View a PDF in React Native

Question

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.

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. — Chris Geirman
– Chris Geirman, Commented Mar 9, 2016 at 19:37
@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. — Axeva
– Axeva, Commented Mar 9, 2016 at 19:40
I hear you. If you do, perhaps consider contributing to the above package so the next guy (maybe me!!) won't have to :) — Chris Geirman
– Chris Geirman, Commented Mar 9, 2016 at 19:46

Axeva · Accepted Answer · 2017-09-13 16:35:36Z

38

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:

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

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';
```

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!

edited Sep 13, 2017 at 16:35

answered Mar 10, 2016 at 19:12

Axeva

4,7376 gold badges42 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Bhumit Mehta Over a year ago

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 ?

Axeva Over a year ago

I did not, sorry. I would suggest opening a new Question with sample code and the community will try to help. Good luck!

Larney Over a year ago

Android solution: Link to detailed solution. Enjoy!

zianwar Over a year ago

@Axeva do you have any idea how to support zoom?

Axeva Over a year ago

@zianwar on which platform? iOS or Android?

|

Michael Falck Wedelgård · Accepted Answer · 2018-08-14 19:07:28Z

21

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}’

answered Aug 14, 2018 at 19:07

Michael Falck Wedelgård

3,2232 gold badges34 silver badges41 bronze badges

3 Comments

Michael Falck Wedelgård Over a year ago

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

indapublic Over a year ago

If I need to pass some headers to PDF url, how I can do it?

Michael Falck Wedelgård Over a year ago

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/…

Ayush Sharma · Accepted Answer · 2021-06-10 12:30:21Z

3

The Amazon S3 Presigned URL contains query string contains "?" and "&" which confuses the outer URL.

So you have to Encode the S3 Presigned URL before passing it to the Google Doc Viewer.

Like this:

var encodedUrl = encodeURIComponent(presigned_url);

var iFrameUrl = 'https://docs.google.com/gview?url=' + encodedUrl;

answered Jun 10, 2021 at 12:30

Ayush Sharma

411 bronze badge

Comments

gmds · Accepted Answer · 2019-04-08 05:44:58Z

1

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

edited Apr 8, 2019 at 5:44

gmds

20k4 gold badges37 silver badges65 bronze badges

answered Apr 8, 2019 at 3:19

Nitcheu Mbouendeu Pascal

111 bronze badge

1 Comment

Sandeep Amarnath Over a year ago

Could you elaborate a bit more and show the block of code please?

ArkaneKhan · Accepted Answer · 2021-10-28 05:07:50Z

1

In case of pdf url this will do

openLink(url) {
    return Linking.canOpenURL(url)
      .then(supported => {
        if (!supported) {
          console.log("Can't handle url: " + url);
          this.showFlashMessage('Not supported in your device');
        } else {
          return Linking.openURL(url);
        }
      })
      .catch(err => console.error('An error occurred', err));
  }

answered Oct 28, 2021 at 5:07

ArkaneKhan

4763 silver badges13 bronze badges

Collectives™ on Stack Overflow

View a PDF in React Native

5 Answers 5

10 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related