react-native-pdf-view

React Native PDF View (cross-platform support)

Breaking changes

• React native 0.40 moved iOS headers, thus all iOS react import statements has been changed. Use version 0.4.* for react native >=0.40. For earlier version see below breaking change.

• React native 0.19 changed the ReactProps class which led to problems with updating native view properties (see react/react-native#5649). These errors are corrected in react-native-pdf-view version 0.2.0. Use version 0.2.* for react native >=0.19 and for earlier react native versions use version 0.1.3.

Installation

npm i react-native-pdf-view --save
react-native link react-native-pdf-view

• In android/setting.gradle

...
include ':PDFView'
project(':PDFView').projectDir =newFile(rootProject.projectDir, '../node_modules/react-native-pdf-view/android')

• In android/app/build.gradle

...
dependencies {
...
compile project(':PDFView')
}

• register module (in MainActivity.java)

On newer versions of React Native (0.18+):

importcom.keyee.pdfview.PDFView; // <--- importpublicclassMainActivityextendsReactActivity {
......
@OverrideprotectedList<ReactPackage> getPackages() {
returnArrays.<ReactPackage>asList(
newPDFView(), // <------ add herenewMainReactPackage());
}
}

On older versions of React Native:

importcom.keyee.pdfview.PDFView; // <--- importpublicclassMainActivityextendsActivityimplementsDefaultHardwareBackBtnHandler {
......
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = newReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(newMainReactPackage())
.addPackage(newPDFView()) // <------ add here
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
setContentView(mReactRootView);
}
......
}

Usage

First, require it from your app's JavaScript files with:

import PDFView from 'react-native-pdf-view';

Example

'use strict';importReact,{Component}from'react';import{StyleSheet,View}from'react-native';importPDFViewfrom'react-native-pdf-view';exportdefaultclassPDFextendsComponent{constructor(props){super(props);}render(){<PDFViewref={(pdf)=>{this.pdfView=pdf;}}src={"sdcard/pdffile.pdf"}onLoadComplete={(pageCount)=>{this.pdfView.setNativeProps({zoom: 1.5});}}style={styles.pdf}/>}}varstyles=StyleSheet.create({pdf: {flex:1}});

Configuration

Property	Type	Default	Description	iOS	Android
path	string	null	pdf absolute path	✔	✔
src	string	null	pdf absolute path(Deprecated)	✔	✔
asset	string	null	the name of a PDF file in the asset folder		✔
pageNumber	number	1	page index	✔	✔
zoom	number	1.0	zoom scale	✔	✔
onLoadComplete	function	null	page load complete,return page count	✔	✔