Opening a PDF in React Native

Share

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 Android apps. In this post, we’re going to use React Native to build an app that opens a PDF with the press of a button. First we’re going to use an npm package to present the PDF. Then we’ll see how easy it is to integrate PSPDFKit to add even more PDF features to your app.

Below you’ll see the steps for how to open a PDF in React Native with react-native-pdf.

Step 1: Installing the Prerequisites

We’re going to use yarn to install packages. Please follow the Yarn installation guide to set it up on your system if you haven’t yet installed it.

In order to create React Native apps from the command line, we need to install react-native-cli:

1

yarn global add react-native-cli

Step 2: Creating a New React Native App

We can use react-native to create a new React Native app from the command line (we chose the name “OpeningaPDF” for our app):

1

react-native init OpeningaPDF

For the rest of the tutorial, we’re going to work in “OpeningaPDF”:

1

cd OpeningaPDF

Step 3: Installing Dependencies

We’re going to use react-navigation so that we can switch from one view to another in our app:

After these few steps, we can now tap on a button and scroll through a PDF document. However, we can’t do anything else; there is no zooming and there are no annotations. We only have the scrolling view mode.

But that is where PSPDFKit comes in: It includes all of these features and more without you having to configure anything.

All we need is PSPDFKit.present('document.pdf') and we can view a PDF document in PSPDFKit. Not only that, but we can also zoom, create annotations, look at the document’s outline, and lots of other things. We can also customize the PDF viewer by passing a dictionary to PSPDFKit.present.

Our React Native app powered by PSPDFKit, as seen on Android:

And the same again on iOS:

Conclusion

As you saw, adding PDF support to your app with the react-native-pdf package isn’t difficult, but in doing so, you’re missing out on a lot of functionality. Meanwhile, PSPDFKit ships with many features out of the box, providing your users with a better user experience. PSPDFKit also comes with great customer support, so please reach out to us if you have any questions about our React Native integration.