View pdf from URL in Expo React Native Project

Question

I have been trying to open a pdf file using react native, but every library that I try generates an error. I tried the code below:

import React, { Component } from 'react';
import Pdf from 'react-native-pdf';

class OpenBGReport extends Component {
  render() {
    const source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};

    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);
                    }}
                    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,
    }
});

export default OpenBGReport;

However, after installing react-native-pdf, my project stop working and returns: null is not an object (evaluating 'rnfetchblob.documentdir')

What is the best way to open and display a pdf from a URL in react native?

Thanks

Did you find an answer without ejecting from Expo ? – Luc May 30 '20 at 13:36 — Luc, May 30 '20 at 13:36

score 13 · Answer 1 · answered Oct 18 '19 at 18:44

13

Expo doesn't support installing native modules and react-native-pdf is a native module. Possible solutions:

If you really want to use native modules, you should use react-native-cli or eject expo project. You can find a more detailed answer in the repository FAQ section (https://github.com/wonday/react-native-pdf#faq).
You can always open PDF files in the phone browser by using react-native's Linking API.
There is a package to display PDF files in expo projects (https://github.com/xcarpentier/rn-pdf-reader-js). Never used the package, and it also seems very sketchy as it supports only the Android platform, and on iOS, you would need to use WebView to display pdf. Also, it doesn't have a lot of downloads on npm and the project itself is prettry stale.

answered Oct 18 '19 at 18:44

Kacper Wiszczuk

1,809
11
14

I thought about using the phone browser with Linking, but it will show the URL to the user. I can't show the URL – myTest532 myTest532 Oct 18 '19 at 18:48
Then there is no easy solution if you are using expo unless you want to eject your project : – Kacper Wiszczuk Oct 18 '19 at 18:51
I had a bad experience ejecting an expo project lol. Is there a way to use something like an iFrame? So I can hide the URL – myTest532 myTest532 Oct 18 '19 at 19:08
I think most of the people have a bad experience with ejecting expo projects. I don't know if there is any other way to hack around this issue, I usually use react-native-cli, to avoid those kinds of problems. – Kacper Wiszczuk Oct 18 '19 at 19:15
This answer has not aged well. Check out Expo, EAS Build and Managed Workflow. – Greg Fenton Oct 09 '22 at 16:14

score 4 · Answer 2 · answered Dec 29 '21 at 16:04

4

You can use <WebView/> from "react-native-webview" (https://github.com/react-native-webview/react-native-webview) I tested this one on ios with expo, and it's work!

<WebView 
originWhitelist={['*']} 
source={{uri: uri}}

url can be a web link or path to your file local ('file:///...')

answered Dec 29 '21 at 16:04

Tima

41
2

6

Sadly, on my phone it downloads the pdf instead of showing it. – Pirogrammer May 22 '22 at 11:33

score 2 · Accepted Answer · answered Oct 31 '22 at 14:01

The best way I found to handle PDF files with Expo is to use buffer to turn them into base64 files, store them in the FileSystem and Share them:

  import { Buffer } from "buffer";
  import * as FileSystem from "expo-file-system";
  import * as Sharing from "expo-sharing";

  res = await // fetch PDF

  const buff = Buffer.from(res, "base64");
  const base64 = buff.toString("base64");

  const fileUri =
    FileSystem.documentDirectory + `${encodeURI("name-of-the-pdf")}.pdf`;


  await FileSystem.writeAsStringAsync(fileUri, base64, {
    encoding: FileSystem.EncodingType.Base64,
  });


  Sharing.shareAsync(res);

Note: You need to install buffer, expo-file-system and expo-sharing

score 0 · Answer 4 · answered Jun 13 '23 at 11:01

I solved the issue by opening the PDF in the users web browser.

import React from 'react';
import { Button, Linking } from 'react-native';

const PermitViewer = ({ downloadUrl }) => {
  const handlePress = async () => {
    const supported = await Linking.canOpenURL(downloadUrl);

    if (supported) {
      await Linking.openURL(downloadUrl);
    } else {
      console.log(`Don't know how to open this URL: ${downloadUrl}`);
    }
  };

  return <Button title="Open PDF" onPress={handlePress} />;
};

export default PermitViewer;

View pdf from URL in Expo React Native Project

4 Answers4

Linked