CODEWITHSUNDEEP
react-native
zann
zann

Reputation: 41

How to load local pdf file in react-native?

I wanna open a pdf when a button click. Also, I don't use react-native-pdf because I got an error in linking it with react-native. So, now I try to show pdf using rn-pdf-reader-js. It works well in loading pdf from the web, but can't load the local file. How can I fix it? Here is my code.

 <PDFReader
      source={{ uri: "file:///D:/test/Angular.pdf" }}
  />

error: "Invalid response for blob";

Upvotes: 2

Views: 4971

Answers (2)

YoniWitz
YoniWitz

Reputation: 129

The question is quite generic since you don't mention what device you are using. I personally came across the same errors and trouble as you are describing trying to accomplish pdf loading on an ANDROID device.

After much fiddling and mainly trial and error, I finally managed to come up with a solution. I'm glad to share it with whom ever is experiencing similar roadblocks.

'react-native-pdf' is the library you are looking for (react-native-pdf documentation). Follow the instructions CAREFULLY. Here are some key notes from documentation to notice:

  1. Install 'rn-fetch-blob' in project as well
  2. Make sure to expand and follow the 'Android installation' instructions.
  3. Store the pdf document under

'android/app/src/main/assets/pdf/'

  1. make sure to name the file with the '.pdf' extension.
  2. The simplest and most straight forward example of the necessary code is provided in the documentation. Use the styling too.
  3. The example provides different 'source' options. If you are trying to view a pdf on an Android device, use: const source = {uri:'bundle-assets://yourdocument.pdf'};

Upvotes: 4

RDardelet
RDardelet

Reputation: 564

You're trying to load a from from your computer's D: drive. In most cases, your emulator (or device) doesn't have any access to that drive. And the resulting issue is that it's trying to look for a path that doesn't exists in its own drive.

You should move the file to your emulator's (or device's) storage and attempt to load it from there with a path usable by your app.

Be careful, on some platforms / OS, you'll need permissions to access user files, like Downloads folder, image gallery...

Stuff to read to help you out:

Upvotes: 0

Related Questions