react-native-pdf

A react native PDF view component (cross-platform support)

Feature

• read a PDF from url/local file/asset and can cache it.
• display horizontally or vertically
• drag and zoom
• double tap for zoom
• support password protected pdf

Installation

We use react-native-fetch-blob to handle file system access in this package, So you should install react-native-pdf and react-native-fetch-blob

npm install react-native-fetch-blob --save
npm install react-native-pdf --save

react-native link react-native-fetch-blob
react-native link react-native-pdf

FAQ

Q1. After installation and running, I can not see the pdf file.
A1: maybe you forgot to excute react-native link or it does not run correctly. You can add it manually. For detail you can see the issue #24 and #2

Q2. When running, it shows 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Your react-native version is too old, please upgrade it to 0.47.0+ see also #39

ChangeLog

v3.0.3

1. when cache failed, can re-load at next time

v3.0.2

1. add activityIndicatorProps to support ActivityIndicator customize
2. fix not trigger onPageChanged() at last screen when screen has more then one pages
3. fix set initial page and scale no action error

v3.0.1 deprecated

v3.0.0

1. rewrite all iOS codes， improve scroll performance/Smoothness, fix scale/onPageChanged...
2. add onPageSigleTap(), onScaleChanged()
3. update android dependent lib AndroidPdfViewer to 3.0.0.alpha.5
4. android support link in pdf
5. delete cache file when error happened

Known issues

1. iOS zooming can not scroll to pinch center

v2.0.7

1. update android dependent lib AndroidPdfViewer to 2.8.1

v2.0.6

1. fix change page number, do not redraw problem

v2.0.5

1. add code protect for not load the same pdf twice
2. can scroll out of bounds with blank page, after stop, redraw pages
3. cancel not finished download task when componentWillUnmount.

v2.0.4

1. add .git to .npmignore

v2.0.3

1. Fix iOS load pdf problem #76

v2.0.2

1. Fix pdf canvas was clipped problem #69

v2.0.1

1. Improve iOS version scrolling performance
2. Fix never ending loop rendering problem in example code

v2.0.0

1. Reimplement iOS version by UIScrollView, improve scrolling performance
2. Fix iOS paging #63

v1.3.5

1. Improve scolling performance
2. Return pdf local/cache path when callback onLoadComplete #57

v1.3.4

1. Update iOS project to Xcode9 format.
2. Fix crash problem when load from base64 #58
3. Fix TypeScript definition for onError #53
4. Update sample code in readme

v1.3.3

1. Improve iOS scrolling performance, fix #47

v1.3.2

1. Move react-native and react-native-fetch-blob to peerDependencies

v1.3.1

1. Refactor android source
2. Stop page scrolling when tap screen #41

v1.3.0

1. Fix drawing problem on Android 4.4 #31
2. Add fitWidth support #36 , #38

[more]

Example

/**
 * Copyright (c) 2017-present, Wonday (@wonday.org)
 * All rights reserved.
 *
 * This source code is licensed under the MIT-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';

import Pdf from 'react-native-pdf';

export default class PDFExample extends React.Component {
    render() {
        const source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};
        //const source = require('./test.pdf');  // ios only
        //const source = {uri:'bundle-assets://test.pdf'};

        //const source = {uri:'file:///sdcard/test.pdf'};
        //const source = {uri:"data:application/pdf;base64,..."};

        return (
            <View style={styles.container}>
                <Pdf
                    source={source}
                    onLoadComplete={(numberOfPages,filePath)=>{
                        console.log(`number of pages: ${numberOfPages}`);
                    }}
                    onPageChanged={(page,numberOfPages)=>{
                        console.log(`current page: ${page}`);
                    }}
                    onError={(error)=>{
                        console.log(error);
                    }}
                    style={styles.pdf}/>
            </View>
        )
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 25,
    },
    pdf: {
        flex:1,
        width:Dimensions.get('window').width,
    }
});

Configuration

| Property | Type | Default | Description | iOS | Android | FirstRelease | | ------------- |:-------------:|:----------------:| ------------------- | ------| ------- | ------------ | | source | object | not null | PDF source like {uri:xxx, cache:false}. see the following for detail.| ✔ | ✔ | <3.0 | | page | number | 1 | initial page index | ✔ | ✔ | <3.0 | | scale | number | 1.0 | zoom scale, 1<=scale<=3| ✔ | ✔ | <3.0 | | horizontal | bool | false | draw page direction, if you want to listen the orientation change, you can use [react-native-orientation-locker]| ✔ | ✔ | <3.0 | | fitWidth | bool | false | if true fit the width of view, can not use fitWidth=true together with scale| ✔ | ✔ | <3.0, abandoned from 3.0 | | fitPolicy | number | 2 | 0:fit width, 1:fit height, 2:fit both(default)| ✔ | ✔ | 3.0 | | spacing | number | 10 | the breaker size between pages| ✔ | ✔ | <3.0 | | password | string | "" | pdf password, if password error, will call OnError() with message "Password required or incorrect password." | ✔ | ✔ | <3.0 | | style | object | {backgroundColor:"#eee"} | support normal view style, you can use this to set border/spacing color... | ✔ | ✔ | <3.0 | | activityIndicator | Component | | when loading show it as an indicator, you can use your component| ✔ | ✔ | <3.0 | | activityIndicatorProps | object | {color:'#009900',progressTintColor:'#009900'} | activityIndicator props | ✔ | ✔ | 3.1 | | enableAntialiasing | bool | true | improve rendering a little bit on low-res screens, but maybe course some problem on Android 4.4, so add a switch | ✖ | ✔ | <3.0 | | onLoadProgress | function(percent) | null | callback when loading, return loading progress (0-1) | ✔ | ✔ | <3.0 | | onLoadComplete | function(numberOfPages, path) | null | callback when pdf load completed, return total page count and pdf local/cache path | ✔ | ✔ | <3.0 | | onPageChanged | function(page,numberOfPages) | null | callback when page changed ,return current page and total page count | ✔ | ✔ | <3.0 | | onError | function(error) | null | callback when error happened | ✔ | ✔ | <3.0 | | onPageSingleTap | function(page) | null | callback when page was single tapped | ✔ | ✔ | 3.0 | | onScaleChanged | function(scale) | null | callback when scale page | ✔ | ✔ | 3.0 |

parameters of source

| parameter | Description | default | iOS | Android | | ------------ | ----------- | ------- | --- | ------- | | uri | pdf source, see the forllowing for detail.| required | ✔ | ✔ | | cache | use cache or not | false | ✔ | ✔ | | method | request method when uri is a url | "GET" | ✔ | ✔ | | headers | request headers when uri is a url | {} | ✔ | ✔ |

types of source.uri

| Usage | Description | iOS | Android | | ------------ | ----------- | --- | ------- | | {uri:"http://xxx/xxx.pdf"} | load pdf from a url | ✔ | ✔ | | {require("./test.pdf")} | load pdf relate to js file (do not need add by xcode) | ✔ | ✖ | | {uri:"bundle-assets://path/to/xxx.pdf"} | load pdf from assets, the file should be at android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | | {uri:"bundle-assets://xxx.pdf"} | load pdf from assets, you must add pdf to project by xcode. this does not support folder. | ✔ | ✖ | | {uri:"base64data"} | load pdf from base64 string | ✔ | ✔ | | {uri:"file:///absolute/path/to/xxx.pdf"} | load pdf from local file system | ✔ | ✔ |