Skip to content
πŸ“š PDF viewer for React Native
Branch: master
Clone or download
Latest commit 515109a Jul 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci CI testcoverage Mar 17, 2018
.github Increase daysUntilStale for stale bot Jan 10, 2019
ReactNativeViewPDF.xcodeproj Update build scheme for iOS Mar 16, 2018
ReactNativeViewPDF 🍎 Specify module name Mar 13, 2019
android React native 0.60.* android ready Jul 11, 2019
demo Upgrade demo project to rn_0.60.* Jul 11, 2019
flow-typed/npm Flow Mar 17, 2018
src Fix iOS reload Jul 11, 2019
utils 🎨 Add shebang to utils/deploy.sh Oct 2, 2018
.buckconfig Fixed react-native 0.58 warnings Mar 3, 2019
.editorconfig Initial implmentation Mar 8, 2018
.eslintignore Reload PDF functionality Nov 20, 2018
.eslintrc.json Reload PDF functionality Nov 20, 2018
.flowconfig Fixed react-native 0.58 warnings Mar 3, 2019
.gitattributes Fixed react-native 0.58 warnings Mar 3, 2019
.gitignore Fixed react-native 0.58 warnings Mar 3, 2019
.watchmanconfig Fixed react-native 0.58 warnings Mar 3, 2019
CONTRIBUTING.md Create CONTRIBUTING.md Sep 26, 2018
LICENSE Initial commit Mar 8, 2018
PULL_REQUEST_TEMPLATE.md πŸ‘• Support projects without flow type annotation Sep 30, 2018
README.md Update docs: react autolinking Jul 11, 2019
RNPDF.podspec Add pods support Sep 20, 2018
babel.config.js Fixed react-native 0.58 warnings Mar 3, 2019
index.d.ts feat(type): Add type definittion for Typescript projects Apr 24, 2019
jest.config.js Fixed react-native 0.58 warnings Mar 3, 2019
package.json 0.9.1 Jul 15, 2019

README.md

react-native-view-pdf

Codacy Badge npm npm version CircleCI codecov PRs Welcome

Library for displaying PDF documents in react-native

  • android - uses Android PdfViewer. Targets minSdkVersion 21 (required by setClipToOutline) and above.. By default stable version 2.8.2 is used. It's also possible to override it and use 3.1.0-beta.1 (this version allows to handle links, etc. and will be used when Android PdfViewer stable version is released). To change the version, define it in your build file:
buildscript {
  ext {
    ...
    pdfViewer = "3.1.0-beta.1"
  }
  ...
}
  • ios - uses WKWebView. Targets iOS9.0 and above

  • zero NPM dependencies

Getting started

$ npm install react-native-view-pdf --save

Linking

From RN 0.60 there is no need to link - Native Modules are now Autolinked

Otherwise use steps below

Mostly automatic installation

$ react-native link react-native-view-pdf

Manual installation

iOS

  1. Add ReactNativeViewPDF project to your project
  2. Under your build target general settings, add the library to your Linked Frameworks and Libraries
  3. If you run into any issues, confirm that under Build Phases -> Link Binary With Libraries the library is present
Using CocoaPods

In your Xcode project directory open Podfile and add the following line:

pod 'RNPDF', :path => '../node_modules/react-native-view-pdf'

And install:

pod install

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.rumax.reactnative.pdfviewer.PDFViewPackage; to the imports at the top of the file
  • Add new PDFViewPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-view-pdf'
    project(':react-native-view-pdf').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-pdf/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-view-pdf')
    
Note for Android

The Android project tries to retrieve the following properties:

  • compileSdkVersion
  • buildToolsVersion
  • minSdkVersion
  • targetSdkVersion

from the ext object if you have one defined in your Android's project root (you can read more about it here). If not, it falls back to its current versions (check the gradle file for additional information).

Windows

ReactWindows

N/A

Demo

Android iOS
Android iOS

Quick Start

// With Flow type annotations (https://flow.org/)
import PDFView from 'react-native-view-pdf';
// Without Flow type annotations
// import PDFView from 'react-native-view-pdf/lib/index';

const resources = {
  file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',
  url: 'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf',
  base64: 'JVBERi0xLjMKJcfs...',
};

export default class App extends React.Component {
  render() {
    const resourceType = 'base64';

    return (
      <View style={{ flex: 1 }}>
        {/* Some Controls to change PDF resource */}
        <PDFView
          fadeInDuration={250.0}
          style={{ flex: 1 }}
          resource={resources[resourceType]}
          resourceType={resourceType}
          onLoad={() => console.log(`PDF rendered from ${resourceType}`);}
          onError={() => console.log('Cannot render PDF', error)}
        />
      </View>
    );
  }
}

Use the demo project to:

  • Test the component on both android and iOS
  • Render PDF using URL, BASE64 data or local file
  • Handle error state

Props

Name Android iOS Description
resource βœ“ βœ“ A resource to render. It's possible to render PDF from file, url or base64
resourceType βœ“ βœ“ Should correspond to resource and can be: file, url or base64
fileFrom βœ— βœ“ iOS ONLY: In case if resourceType is set to file, there are different way to search for it on iOS file system. Currently Documents and app’s bundle are supported.
onLoad βœ“ βœ“ Callback that is triggered when loading is completed
onError βœ“ βœ“ Callback that is triggered when loading has failed. And error is provided as a function parameter
style βœ“ βœ“ A style
fadeInDuration βœ“ βœ“ Fade in duration (in ms, defaults to 0.0) to smoothly fade the webview into view when pdf loading is completed
urlProps βœ“ βœ“ Extended properties for url type that allows to specify HTTP Method, HTTP headers and HTTP body
onPageChanged βœ“ βœ— Callback that is invoked when page is changed. Provides active page and total pages information
onScrolled βœ“ βœ“ Callback that is invoked when PDF is scrolled. Provides offset value in a range between 0 and 1. Currently only 0 and 1 are supported.

Methods

reload

Allows to reload the PDF document. This can be useful in such cases as network issues, document is expired, etc. To reload the document you will need a ref to the component:

...

render() {
  return (
    <PDFView
      ...
      ref={(ref) => this._pdfRed = ref} />
  );
}

And trigger it by calling reloadPDF:

reloadPDF = async () => {
  const pdfRef = this._pdfRef;

  if (!pdfRef) {
    return;
  }

  try {
    await pdfRef.reload();
  } catch (err) {
    console.err(err.message);
  }
}

Or check the demo project which also includes this functionality.

Development tips

On android for the file type it is required to request permissions to read/write. You can get more information in PermissionsAndroid section from react native or Request App Permissions from android documentation. Demo project provides an example how to implement it using Java, check the MainActivity.java and AndroidManifest.xml files.

Before trying file type in demo project, open sdcard/Download folder in Device File Explorer and store some downloadedDocument.pdf document that you want to render.

On iOS, using resource file will make the component lookup in two places. First, it will attempt to locate the file in the Bundle. If it cannot locate it there, it will search the Documents directory. For more information on the iOS filesystem access at runtime of an application please refer the official documentation. Note here that the resource will always need to be a relative path from the Documents directory for example and also do NOT put the scheme in the path (so no file://.....).

You can find an example of both usage of the Bundle and Documents directory for rendering a pdf from file on iOS in the demo project.

In demo project you can also run the simple server to serve PDF file. To do this navigate to demo/utils/ and start the server node server.js. (Do not forget to set proper IP adress of the server in demo/App.js)

License

MIT

Authors

Other information

    -keep class com.shockwave.**
You can’t perform that action at this time.