react-native-pdf-enhanced v4.0.3

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 rn-fetch-blob to handle file system access in this package, So you should install react-native-pdf and rn-fetch-blob

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

react-native link rn-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

Q3. When I run the example app I get a white screen / the loading bar isn't progressing on IOS.
A3. Check your uri, if you hit a pdf that is hosted on a http you will need to add an exception for the server hosting the pdf in the ios info.plist. Here is an example :

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

Q4. why doesn't it work with react native expo?.
A4. Expo does not support native module. you can read more expo caveats here

ChangeLog

v4.0.0 (break change) 1. replace dependence lib react-native-fetch-blob with rn-fetch-blob if you upgrade from an old version, you should

react-native unlink react-native-fetch-blob
npm uninstall react-native-fetch-blob

npm install rn-fetch-blob --save
react-native link rn-fetch-blob

v3.0.17 1. update android build tool to v26.0.3 2. update AndroidPdfViewer to v3.1.0.beta1 3. add {width,height} to onLoadComplete

v3.0.16 1. onPageChanged not fired in Landscape (IOS) 2. draw the page with diffrent size to center 3. support the page with rotation

v3.0.15 1. fix iPad scale offset problem 2. add code protection to avoid crashes

v3.0.14 1. fix in iPad can not zoom problem(offset still has problem, but zoom works)

v3.0.13 1. fix in iPad layout not center problem

v3.0.12 1. fix source.expiration check

v3.0.11 1. improve iOS zoom, can zoom from pinch center 2. fix call setState on an unmounted component

v3.0.10 1. fix source.expiration check #163

v3.0.9 1. use CATiledLayer to improve iOS render performance

v3.0.8 1. use await to unlink file 2. fix podspec 3. do not count a scrolling gesture as a tap

v3.0.6 1. add cache file expiration 2. enhanced file download stability

v3.0.5 1. OnError return Error() object 2. fix cache overwrite error 3. add Android content:// support 4. fix type error 5. refactor view.propTypes to ViewPropTypes.

v3.0.4

1. fix 'virtualizedCell.cellKey' warning #125
2. fix android crashed because of missing props #127
3. use pure component to render pdf pages #129
4. add requiresMainQueueSetup to cure RN v0.52 warning #130

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

[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

parameters of source

types of source.uri