6.7.4 • Published 3 months ago

react-native-pdf v6.7.4

Weekly downloads
42,497
License
MIT
Repository
github
Last release
3 months ago

react-native-pdf

npm

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

Feature

  • read a PDF from url, blob, local file or asset and can cache it.
  • display horizontally or vertically
  • drag and zoom
  • double tap for zoom
  • support password protected pdf
  • jump to a specific page in the pdf

Supported versions

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

The table below shows the supported versions of React Native and react-native-blob-util for different versions of react-native-pdf.

React Native0.4x - 0.560.570.60+0.62+0.62+
react-native-pdf4.x.x - 5.0.x5.0.9+6.0.0+6.2.0+6.4.0+
react-native-blob-util0.13.7+

🚨 Expo: This package is not available in the Expo Go app. Learn how you can use this package in Custom Dev Clients via the out-of-tree Expo Config Plugin. Example: with-pdf.

Installation

# Using npm
npm install react-native-pdf react-native-blob-util --save

# or using yarn:
yarn add react-native-pdf react-native-blob-util

Then follow the instructions for your platform to link react-native-pdf into your project:

iOS installation

React Native 0.60 and above

Run pod install in the ios directory. Linking is not required in React Native 0.60 and above.

React Native 0.59 and below

react-native link react-native-blob-util
react-native link react-native-pdf

Android installation

If you use RN 0.59.0 and above, please add following to your android/app/build.gradle**

android {

+    packagingOptions {
+       pickFirst 'lib/x86/libc++_shared.so'
+       pickFirst 'lib/x86_64/libjsc.so'
+       pickFirst 'lib/arm64-v8a/libjsc.so'
+       pickFirst 'lib/arm64-v8a/libc++_shared.so'
+       pickFirst 'lib/x86_64/libc++_shared.so'
+       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+     }

   }

React Native 0.59.0 and below

react-native link react-native-blob-util
react-native link react-native-pdf

Windows installation

  • Open your solution in Visual Studio 2019 (eg. windows\yourapp.sln)
  • Right-click Solution icon in Solution Explorer > Add > Existing Project...
  • If running RNW 0.62: add node_modules\react-native-pdf\windows\RCTPdf\RCTPdf.vcxproj
  • If running RNW 0.62: add node_modules\react-native-blob-util\windows\ReactNativeBlobUtil\ReactNativeBlobUtil.vcxproj
  • Right-click main application project > Add > Reference...
  • Select progress-view and in Solution Projects
    • If running 0.62, also select RCTPdf and ReactNativeBlobUtil
  • In app pch.h add #include "winrt/RCTPdf.h"
    • If running 0.62, also select #include "winrt/ReactNativeBlobUtil.h"
  • In App.cpp add PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); before InitializeComponent();
    • If running RNW 0.62, also add PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); and PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());

Bundling PDFs with the app

To add a test.pdf like in the example add:

<None Include="..\..\test.pdf">
  <DeploymentContent>true</DeploymentContent>
</None>

in the app .vcxproj file, before <None Include="packages.config" />.

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/gray screen / the loading bar isn't progressing .
A3. Check your uri, if you hit a pdf that is hosted on a http you will need to do the following:

iOS: 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>

Android: see here

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

Q5. Why can't I run the iOS example? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Run the following commands in the project folder (e.g. react-native-pdf/example) to ensure that all dependencies are available:

yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios

ChangeLog

v6.7.4 1. Fixed: Fix Android crash issue

v6.7.3 1. Fixed: fix android package name

v6.7.2 1. Fixed: fix iOS double tap zoom scrolling 2. Fixed: fix RN 73 compatibility 3. Fixed: bump crypto-js to avoid critical vulnerability

v6.7.1 1. Fixed: fix ios project setting 2. Fixed: fix typo in RNPDFPdfViewManagerInterface interface causing android build error

v6.7.0 1. Fixed: fix(iOS): center page at tap point after double tap to zoom 2. Fixed: add PDFKit to podspec to make ios compile 3. Improved: Update build.gradle to support RN 0.71 on new arch 4. Fixed: fix some small bugs and documents.

v6.6.2 1. Fixed: Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types' 2. Added: Decode File Path for iOS 3. Improved: prefer current page for calculating scale factor on fit

v6.6.1 depresed

v6.6.0 depresed 1. Fixed: Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types' 2. Added: Decode File Path for iOS 3. Improved: prefer current page for calculating scale factor on fit 4. Improved: Typescript version source

v6.5.0 1. Fix: replace mavenCentral with maven 2. Breaking Change(Android): replace deprecated repository: jcenter() 3. Fix: loading progress 4. Add: Typed "source" prop 5. Remove: dependency to fbjs

v6.4.0 1. Remove sample for reducing NPM package size 2. Add support for setting a filename for the cached pdf file 3. Use react-native-blob-util instead of rn-fetch-blob 4. Add blob support 5. remove progress-view dependency

v6.3.0 1. Add windows support 2. Fixed some bugs

[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,JVBERi0xLjcKJc..."};
        //const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
        //const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};

        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);
                    }}
                    onPressLink={(uri) => {
                        console.log(`Link pressed: ${uri}`);
                    }}
                    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,
        height:Dimensions.get('window').height,
    }
});

Configuration

PropertyTypeDefaultDescriptioniOSAndroidWindowsFirstRelease
sourceobjectnot nullPDF source like {uri:xxx, cache:false}. see the following for detail.<3.0
pagenumber1initial page index<3.0
scalenumber1.0should minScale<=scale<=maxScale<3.0
minScalenumber1.0min scale5.0.5
maxScalenumber3.0max scale5.0.5
horizontalboolfalsedraw page direction, if you want to listen the orientation change, you can use [react-native-orientation-locker]<3.0
showsHorizontalScrollIndicatorbooltrueshows or hides the horizontal scroll bar indicator on iOS6.6
showsVerticalScrollIndicatorbooltrueshows or hides the vertical scroll bar indicator on iOS6.6
fitWidthboolfalseif true fit the width of view, can not use fitWidth=true together with scale<3.0, abandoned from 3.0
fitPolicynumber20:fit width, 1:fit height, 2:fit both(default)3.0
spacingnumber10the breaker size between pages<3.0
passwordstring""pdf password, if password error, will call OnError() with message "Password required or incorrect password."<3.0
styleobject{backgroundColor:"#eee"}support normal view style, you can use this to set border/spacing color...<3.0
renderActivityIndicator(progress) => Componentwhen loading show it as an indicator, you can use your component<3.0
enableAntialiasingbooltrueimprove rendering a little bit on low-res screens, but maybe course some problem on Android 4.4, so add a switch<3.0
enablePagingboolfalseonly show one page in screen5.0.1
enableRTLboolfalsescroll page as "page3, page2, page1"5.0.1
enableAnnotationRenderingbooltrueenable rendering annotation, notice:iOS only support initial setting,not support realtime changing5.0.3
trustAllCertsbooltrueAllow connections to servers with self-signed certification6.0.?
singlePageboolfalseOnly show first page, useful for thumbnail views6.2.1
onLoadProgressfunction(percent)nullcallback when loading, return loading progress (0-1)<3.0
onLoadCompletefunction(numberOfPages, path, {width, height}, tableContents)nullcallback when pdf load completed, return total page count, pdf local/cache path, {width,height} and table of contents✔ but without tableContents<3.0
onPageChangedfunction(page,numberOfPages)nullcallback when page changed ,return current page and total page count<3.0
onErrorfunction(error)nullcallback when error happened<3.0
onPageSingleTapfunction(page)nullcallback when page was single tapped3.0
onScaleChangedfunction(scale)nullcallback when scale page3.0
onPressLinkfunction(uri)nullcallback when link tapped6.0.0

parameters of source

parameterDescriptiondefaultiOSAndroidWindows
uripdf source, see the forllowing for detail.required
cacheuse cache or notfalse
cacheFileNamespecific file name for cached pdf fileSHA1(uri) result
expirationcache file expired seconds (0 is not expired)0
methodrequest method when uri is a url"GET"
headersrequest headers when uri is a url{}

types of source.uri

UsageDescriptioniOSAndroidWindows
{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:"data:application/pdf;base64,JVBERi0xLjcKJc..."}load pdf from base64 string
{uri:"file:///absolute/path/to/xxx.pdf"}load pdf from local file system
{uri:"ms-appx:///xxx.pdf"}}load pdf bundled with UWP app
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}load pdf from content URI✔*
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}load pdf from blob URL

*) requires building React Native from source with this patch

Methods

Methods operate on a ref to the PDF element. You can get a ref with the following code:

return (
  <Pdf
    ref={(pdf) => { this.pdf = pdf; }}
    source={source}
    ...
  />
);

setPage()

setPage(pageNumber)

Set the current page of the PDF component. pageNumber is a positive integer. If pageNumber > numberOfPages, current page is not changed.

Example:

this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
6.7.4

3 months ago

6.7.2

4 months ago

6.7.3

4 months ago

6.7.0

9 months ago

6.7.1

9 months ago

6.6.1

2 years ago

6.6.0

2 years ago

6.6.2

2 years ago

6.5.0

2 years ago

6.4.0

2 years ago

6.3.0

3 years ago

6.2.2

3 years ago

6.2.1

4 years ago

6.2.0

4 years ago

6.1.2

4 years ago

6.1.1

4 years ago

6.1.0

4 years ago

6.0.1

4 years ago

6.0.0

4 years ago

5.1.7

4 years ago

5.1.6

4 years ago

5.1.5

5 years ago

5.1.4

5 years ago

5.1.3

5 years ago

5.1.2

5 years ago

5.1.1

5 years ago

5.1.0

5 years ago

5.0.12

5 years ago

5.0.11

5 years ago

5.0.9

5 years ago

5.0.8

5 years ago

5.0.7

5 years ago

5.0.6

6 years ago

5.0.5

6 years ago

5.0.4

6 years ago

5.0.3

6 years ago

5.0.2

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.0.0

6 years ago

3.0.17

6 years ago

3.0.16

6 years ago

3.0.15

6 years ago

3.0.14

6 years ago

3.0.13

6 years ago

3.0.12

6 years ago

3.0.11

6 years ago

3.0.10

6 years ago

3.0.9

6 years ago

3.0.8

6 years ago

3.0.7

6 years ago

3.0.6

6 years ago

3.0.5

6 years ago

3.0.4

6 years ago

3.0.3

6 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

3.0.0-alpha

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.3.5

6 years ago

1.3.4

6 years ago

1.3.3

7 years ago

1.3.2

7 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.9

7 years ago

1.2.8

7 years ago

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago