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

Supported versions - React Native / react-native-pdf

> The table below shows the supported versions of React Native for different versions of react-native-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 Notice: rn-fetch-blob v0.10.14 has a bug, please use v0.10.13

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 :

NSAppTransportSecurity

  NSExceptionDomains
  
    yourserver.com
    
      
      NSIncludesSubdomains
      
      
      NSTemporaryExceptionAllowsInsecureHTTPLoads
      
      
      NSTemporaryExceptionMinimumTLSVersion
      TLSv1.1
    
  

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

v5.0.11

1. fix sample codes

v5.0.10

1. support enablePaging for ios<11.0
2. disable long press on ios (the same with android)
3. make iOS singleTap scale the same action with android
4. recreate sample with RN 0.57

v5.0.9

1. fix podspec
2. NS_CLASS_AVAILABLE_IOS(11_0) to PDFKit related codes
3. Fix pdfs when pipe appears in table content json
4. modify build.gradle for RN 0.57

v5.0.8

1. fix podspec

v5.0.7

1. onLoadComplete return table of contents
2. delete tmp file after downloaded

v5.0.6

1. add accessible to PdfPageView
2. restore podspec

v5.0.5

1. add minScale, maxScale props
2. fix pdf display box
3. fix Content-length check

v5.0.4

1. fix ios background not work
2. fix can not show two pdf in in one page

v5.0.3

1. add enableAnnotationRendering property support, default enableAnnotationRendering=true
2. android build.gradle can reference root project sdk and buildTool setting
3. fix ios progressbar not work

v5.0.2

1. fix file successfully download check

v5.0.1

1. add paging support (ios and android)
2. add RTL support (ios)
3. fix position when set page (ios)

v5.0.0 (break change)

1. use iOS PDFKit to show pdf (iOS SDK>=11)
2. use js+native to show pdf (iOS SDK<11, the same with 4.0.0)
3. support pdf with layers (iOS SDK>=11)
4. support pdf with links (iOS SDK>=11)
5. fix zoom (iOS SDK>=11)

[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:'https://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 (
            
        )
  }
}

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