react-native-pdf-view

React Native PDF View (cross-platform support)

Breaking change

React native 0.19 changed the ReactProps class which led to problems with updating native view properties (see https://github.com/facebook/react-native/issues/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

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

• In android/setting.gradle

1...
2include ':PDFView'
3project(':PDFView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pdf-view/android')

• In android/app/build.gradle

1...
2dependencies {
3    ...
4    compile project(':PDFView')
5}

• register module (in MainActivity.java)

On newer versions of React Native (0.18+):

1import com.keyee.pdfview.PDFView;  // <--- import
2
3public class MainActivity extends ReactActivity {
4  ......
5    @Override
6    protected List<ReactPackage> getPackages() {
7      return Arrays.<ReactPackage>asList(
8        new PDFView(), // <------ add here
9        new MainReactPackage());
10    }
11}

On older versions of React Native:

1import com.keyee.pdfview.PDFView;  // <--- import
2
3public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
4  ......
5
6  @Override
7  protected void onCreate(Bundle savedInstanceState) {
8    super.onCreate(savedInstanceState);
9    mReactRootView = new ReactRootView(this);
10
11    mReactInstanceManager = ReactInstanceManager.builder()
12      .setApplication(getApplication())
13      .setBundleAssetName("index.android.bundle")
14      .setJSMainModuleName("index.android")
15      .addPackage(new MainReactPackage())
16      .addPackage(new PDFView())              // <------ add here
17      .setUseDeveloperSupport(BuildConfig.DEBUG)
18      .setInitialLifecycleState(LifecycleState.RESUMED)
19      .build();
20
21    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
22
23    setContentView(mReactRootView);
24  }
25
26  ......
27
28}

Usage

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

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

Example

1'use strict';
2
3import React,{
4    Component
5} from 'react';
6
7import {
8    StyleSheet,
9    View
10} from 'react-native';
11
12import PDFView from 'react-native-pdf-view';
13
14export default class PDF extends Component {
15    constructor(props) {
16        super(props);
17    }
18
19    render(){
20      <PDFView ref={(pdf)=>{this.pdfView = pdf;}}
21                         src={"sdcard/pdffile.pdf"}
22                         onLoadComplete = {(pageCount)=>{
23                            this.pdfView.setNativeProps({
24                                zoom: 1.5
25                            });
26                         }}
27                         style={styles.pdf}/>
28    }
29}
30var styles = StyleSheet.create({
31    pdf: {
32        flex:1
33    }
34});

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	✔	✔