View a PDF in React Native

react-native-view-pdf github
react-native-pdf github
react-native pdf viewer expo
react-native pdf expo
react-native linking open pdf
react-native download pdf from url
react-native-pdf-lib
react-native-pdf thumbnail

Can anyone please provide sample code for displaying a PDF in React Native? iOS and Android.

This is what I've tried:

  render: function() {
    return <WebView
      source={require('./my.pdf')}
      />
  }

^ This results in a Red Screen of Death with the "Unable to resolve module" error.

  render: function() {
    return <WebView
      source={{uri: 'my.pdf'}}
      />
  }

^ This gives an "Error Loading Page" message in the WebView. "The requested URL was not found on this server"

I know iOS is capable of showing a PDF in a UIWebView. I assume Android can do the same. There must be something in how the source is specified that I'm missing.

Okay, for future generations, here's how I solved this problem:

Updated September 13, 2017:

There is a new NPM module that makes this entire process much easier. I would suggest using it going forward instead of my original answer below:

react-native-pdf

Once installed, rendering the PDF is as easy as this:

export default class YourClass extends Component {
  constructor(props) {
    super(props);
    this.pdf = null;
  }

  render() {
    let yourPDFURI = {uri:'bundle-assets://pdf/YourPDF.pdf', cache: true};

    return <View style={{flex: 1}}>
      <Pdf ref={(pdf)=>{this.pdf = pdf;}}
        source={yourPDFURI}
        style={{flex: 1}}
        onError={(error)=>{console.log(error);}} />
    </View>
  }
}

Just put your actual pdf in the android/app/src/main/assets/pdf folder of your project.

Original Answer:

iOS

render: function() {
  return <WebView source={{uri: 'My.pdf'}}/>
}

The trick is that you need to include My.pdf into your project in Xcode and make sure it's added to your build target.

Just copying it into your React Native project folder wasn't enough. It had to be part of the Xcode project itself.

Android

It appears that Android did not provide a native PDF viewer until 5.0 (Lollipop). To get around this, I've had to make use of three key techniques:

  1. Pull the PDF out of my APK bundle and store it in the files folder for my app. This SO answer was very helpful in accomplishing this:

Android: How to copy files from 'assets' folder to sdcard?

I tweaked the code a bit so that the file wasn't going to an sdcard but to my app's files folder. Here's what I added to my MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  AssetManager assetManager = getAssets();
  String[] files = null;

  try {
      files = assetManager.list("pdf");
  } catch (IOException e) {
      Log.e("tag", "Failed to get asset file list.", e);
  }

  if (files != null) for (String filename : files) {
      InputStream in = null;
      OutputStream out = null;

      try {
        in = assetManager.open("pdf/" + filename);

        File outFile = new File(getFilesDir(), filename);
        out = new FileOutputStream(outFile);
        copyFile(in, out);
        Log.e("tag", "Copy was a success: " + outFile.getPath());
      } catch(IOException e) {
        Log.e("tag", "Failed to copy asset file: " + "pdf/" + filename, e);
      }
      finally {
          if (in != null) {
              try {
                  in.close();
              } catch (IOException e) {
                  // NOOP
              }
          }
          if (out != null) {
              try {
                  out.close();
              } catch (IOException e) {
                  // NOOP
              }
          }
      }
  }
}

private void copyFile(InputStream in, OutputStream out) throws IOException {
    byte[] buffer = new byte[1024];
    int read;
    while((read = in.read(buffer)) != -1){
      out.write(buffer, 0, read);
    }
}

I also made sure my PDF is in the assets/pdf folder under android/app/src/main

  1. I then utilized the react-native-fs package to get the absolute URL to my PDF, which is now in the files folder:

    var RNFS = require('react-native-fs');
    var absolutePath = RNFS.DocumentDirectoryPath + '/My.pdf';
    
  2. With all of this in place, I used react-native-pdf-view to actually load and display the PDF:

    import PDFView from 'react-native-pdf-view';
    
    render: function() {
      var absolutePath = RNFS.DocumentDirectoryPath + '/My.pdf';
    
      return <PDFView
        ref={(pdf)=>{this.pdfView = pdf;}}
        src={absolutePath}
        style={ActharStyles.fullCover} />
    }
    

Good luck!

react-native-pdf, Quick Start. // With Flow type annotations (https://flow.org/) import PDFView from '​react-native-view-pdf'; // Without Flow  The react-native-view-pdf library uses Android PdfViewer, and by extension PdfiumAndroid as the underlying rendering engine, while WKWebView uses Apple's proprietary PDF renderer. linkStep 1 - Create a New App. We're going to use the command line, so make sure you have react-native-cli installed. From the command line: react-native init PDFDemo cd PDFDemo

A simple solution for this problem is to set <WebView> source/uri to this:

https://drive.google.com/viewerng/viewer?embedded=true&url={your pdf url}’

react-native-view-pdf, React Native lets you create mobile apps in JavaScript, but instead of building a “​hybrid app,” you're using the same UI building blocks as regular iOS and  React-Native-Cli. Install Webview. yarn add react-native-webview Expo Project expo install react-native-webview Implementing Webview. Now, we just need to add a webview component to our render method with the url to our document. It can be either locally or from a url, For this Example I will be using a remote document.

Just add style={{flex:1}} in the opening View Tag of your return and you should be fine.

Opening a PDF in React Native, Okay, for future generations, here's how I solved this problem: Updated September 13, 2017: There is a new NPM module that makes this entire  $ npm install react-native-view-pdf --save. Linking. From RN 0.60 there is no need to link - Native Modules are now Autolinked. Mostly automatic installation $ react-native link. If it doesn't work follow the official react native documentation. Using CocoaPods. In your Xcode project directory open Podfile and add the following line:

View a PDF in React Native, React Native PDF View. Contribute to cnjon/react-native-pdf-view development by creating an account on GitHub. React native 0.19 changed the ReactProps class which led to problems with updating native view properties (see https://github.com/facebook/react-native/issues/5649). These errors are corrected in react-native-pdf-view version 0.2.0. Use version 0.2.* for react native >=0.19 and for earlier react native versions use version 0.1.3.

React Native PDF View, This tutorial explains how to build PDF viewer in react native application. Sometime developers needs to display PDF files in their mobile  react-native-pdf-viewer. This is a simple pdf viewer with react native. On IOS it just use native Webview for both local and remote pdf file. On Android, it base on barteksc/AndroidPdfViewer for Local file.

React Native PDF Reader or Viewer Example, Hello everyone and welcome to this new article, where we are going to explore how to make a React Native Document & PDF Viewer. $ npm install react-native-view-pdf --save. Mostly automatic installation $ react-native link react-native-view-pdf. Manual installation iOS. Add ReactNativeViewPDF project to your project; Under your build target general settings, add the library to your Linked Frameworks and Libraries

Comments
  • I presume you've found this already, which is an android only solution github.com/cnjon/react-native-pdf-view though it appears they're working on iOS. They've bridged to native for their solution. You may gain insight if you took the time to dig in. I'd love to hear whether it's possible to load pdfs locally into webview though.
  • @ChrisGeirman I've seen that. I'm a native iOS developer by trade, so I could setup a bridge there as well. I know I could make it work that way. Just hoping I don't need to jump thru those hoops.
  • I hear you. If you do, perhaps consider contributing to the above package so the next guy (maybe me!!) won't have to :)
  • Android solution: Link to detailed solution. Enjoy!
  • Thank you for sharing this, it helped, but I am facing issue that I am not able to scroll the pdf , did you face the issue ?
  • I did not, sorry. I would suggest opening a new Question with sample code and the community will try to help. Good luck!
  • Android solution: Link to detailed solution. Enjoy!
  • @Axeva do you have any idea how to support zoom?
  • @zianwar on which platform? iOS or Android?
  • Actually a better solution is to use this: github.com/mozilla/PDF.js/wiki/Viewer-options since it support jumps to page numbers. And as far as I know the google drive viewer has limitation on uses/day
  • If I need to pass some headers to PDF url, how I can do it?
  • Here's an example to display just a PDD: mozilla.github.io/pdf.js/web/… Here's one displaying the same PDF but opens at page 3: mozilla.github.io/pdf.js/web/…