How to Read PDF Files Using React Native Expo App

Please note that this project won’t work on the Expo Go App

Read PDF Files Using React Native Expo

Hello guys, My name is Rohit, and I am a software Developer and a Youtube content creator. A few days I integrated a PDF reading feature into my React Native Expo App. The code is very simple, but…

Source Code & More: https://www.patreon.com/bugninza

Installation and Setup

For this project, we need only one external package: react-native-pdf. This package offers the following features:

• read a PDF from url, blob, local file or asset and can cache it.
• display horizontally or vertically
• drag and zoom
• double tap for zoom
• support password protected pdf
• jump to a specific page in the pdf

npm i react-native-pdf

Install it in your react native expo project using the above command.

Code

Make a separate file or you can continue to write code in the default App.js file. But I recommend you make a separate component and Import it into App.js. It’s good practice.

We start by defining a constant, which will hold the URI of our PDF file

const PdfResource = { uri: 'www.example.com/pdf', cache: true };

Replace the URI link with your PDF file link.

Inside the view component, we need to write the code to render the PDF file using the Pdf component. Something like this:

<Pdf 
   trustAllCerts={false}
   source={PdfResource}
   style={styles.pdf}
   onLoadComplete={(numberOfPages, filePath) => {
      console.log(`number of pages: ${numberOfPages}`);
   }}
/>

That’s it. Now, if you run your app using the command: npx expo start, and test it using the Expo Go App then it won’t work. WHY? Because, The react-native-pdf package is a native module, which means it requires native code to work. However, Expo Go does not support installing native modules. This is why the react-native-pdf package won’t work in the Expo Go app.

So, what do we gonna do now? Well, we have two choices. One is to go with the Development build method and the other method is Prebuild method. The Development build method is a lot simpler. So, we will implement it here.

To achieve this, you need to install two packages, build an EAS, and manually install it on your mobile phone. You can also use an emulator. If you find yourself confused, you can simply refer to my YouTube video where I provide a step-by-step approach to achieving the end result.

Install the following packages using the command:

npm install -g eas-cli
npx expo install expo-dev-client

Next, login to your expo account using the command: eas login

Next, create a build and install it on your device:

eas build --profile development --platform android

If you are using the latest Expo SDK Version ( 49 or above ) then you can simply press S to switch to the development build.

Development Build Expo

If you feel lost somewhere in this project build then feel free to watch the step-by-step guide here:

That’s it!!!! Now if you are here then make sure to clap. It gonna help the medium algorithms to promote my article to a wider audience. Thanks for reading. Happy coding!!