How to Build a React Native PDF Viewer

This article was first published in June 2021 and was updated in August 2024.

Integrating a PDF viewer in a React Native app can enhance user experience by allowing easy document handling and display across iOS and Android platforms. This article will show you how to set up a PDF viewer using two different libraries: the open source react-native-pdf, and the commercial PSPDFKit React Native PDF SDK .

You’ll learn how to create a new project, add the necessary dependencies, configure platform-specific settings, and display a PDF document. By the end of this tutorial, you’ll have a fully functional PDF viewer in your React Native app.

Why Add PDF Support to Your App?

Adding PDF support to your app enables it to handle various document needs, from basic viewing, to advanced functionalities like annotations, form filling, and digital signatures. Choosing the right library can help you implement features that are essential for your app’s success.

React Native PDF Viewer Use Case

This post assumes you’re familiar with React Native and that you’ve previously developed apps using React Native. If that isn’t the case, you can use our getting started guides to create a new React Native project that uses PSPDFKit. Or, if you’re in a hurry, you can download our ready-to-run example project and follow the instructions from its README.

In the video below, you can see how we open a PDF file using react-native-pdf and PSPDFKit for React Native.

Now, let’s take a look at the steps involved!

Prerequisites

Before getting started, ensure you have the following:

• A development environment for React Native using the React Native CLI (not the Expo CLI)

• The latest stable versions of Android Studio, the Android NDK, and an Android Virtual Device or hardware device

• The latest stable versions of Xcode and CocoaPods

Step 1 — Create a New React Native Project

Open your terminal and navigate to the directory where you want to create your project. For this example, you’ll use the ~/Documents/ directory:

cd ~/Documents

Create a new React Native project:

npx react-native@latest init ReactNativePDFViewer

Next, you’ll add the required dependencies.

Step 2 — Install the PSPDFKit Dependency

1. Navigate to your project directory:

cd ReactNativePDFViewer

2. Then, add the PSPDFKit dependency:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

3. Install all the dependencies for the project:

yarn install

Step 3 — Configure the Android Platform

1. Open android/build.gradle and add the PSPDFKit repository:

allprojects {
    repositories {
        mavenCentral()
+       maven { url 'https://my.nutrient.io/maven/' }
    }
}

2. Open android/app/build.gradle and update the SDK versions:

android {
-   compileSdkVersion rootProject.ext.compileSdkVersion
+   compileSdkVersion 34

    defaultConfig {
        applicationId "com.reactnativepdfviewer"
-       minSdkVersion rootProject.ext.minSdkVersion
+       minSdkVersion 21
        targetSdkVersion rootProject.ext.targetSdkVersion
    }
}

Step 4 — Configure the iOS Platform

1. Open ios/Podfile and set the platform version to iOS 15:

- platform :ios, '11.0'
+ platform :ios, '15.0'

2. Navigate to the ios folder and install the required dependencies:

cd ios
pod install

3. Open the Workspace in Xcode:

open ReactNativePDFViewer.xcworkspace

4. In Xcode, ensure the deployment target is set to 15.0 or higher.

5. Change View controller-based status bar appearance to YES in Info.plist.

Step 5 — Display a PDF Document

1. Drag a PDF document into your project to use as a sample.

2. *If you haven’t already, create an assets directory for Android:

mkdir android/app/src/main/assets

3. Place your PDF document in the assets directory:

cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf

4. Open App.js and replace its contents with the following code snippet:

import React, { Component } from 'react';
import { Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import { NativeModules } from 'react-native';

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null);

const DOCUMENT =
	Platform.OS === 'ios'
		? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
	render() {
		var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
		return (
			<PSPDFKitView
				document={DOCUMENT}
				configuration={{
					showThumbnailBar: 'scrollable',
					pageTransition: 'scrollContinuous',
					scrollDirection: 'vertical',
				}}
				ref={pdfRef}
				fragmentTag="PDF1"
				style={{ flex: 1 }}
			/>
		);
	}
}

Step 6 — Launch the App

Run the app on your chosen platform:

npx react-native run-android
npx react-native run-ios

Conclusion

We hope this post will help you build a PDF viewer using react-native-pdf and PSPDFKit for React Native in your React Native project. As you can see, react-native-pdf is a great solution for many use cases.

However, sometimes your business may require more complex features for handling PDFs in your React Native project, such as:

• PDF annotation support — react-native-pdf will only render annotations that were already in the source file. It doesn’t have annotation editing support, so your users won’t be able to create, update, or delete annotations to review a PDF document.

• Interactive PDF forms — Just like with annotations, react-native-pdf will only render forms and their values that were already in the source file. It doesn’t have form editing support, so your users won’t be able to fill forms in a PDF document.

• Digital signatures — react-native-pdf currently has no support for digital signatures, which are used to verify the authenticity of a filled-out PDF.

• Long-term support — Currently, the latest update for react-native-pdf dates back to October 2020. At PSPDFKit, we release regular updates to add new features and enhancements, fix bugs, and maintain compatibility with the latest React Native changes, dependencies, and operating system updates.

If your business relies on any of the above features, consider looking into alternatives. At PSPDFKit, we offer a commercial, feature-rich, and completely customizable React Native PDF viewer library that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. Check out our demos to see it in action.

If you have any questions about our React Native PDF library, please don’t hesitate to reach out to us. We’re happy to help!

FAQ

Here are a few frequently asked questions about building a React Native PDF viewer.

What is the best library for building a React Native PDF viewer?

Two popular libraries for building a PDF viewer in React Native are react-native-pdf and PSPDFKit for React Native. react-native-pdf is an open source library suitable for basic PDF viewing needs, while PSPDFKit offers a comprehensive commercial solution with advanced features like annotations, form filling, and digital signatures.

How can I display PDF files in a React Native app?

To display PDF files in a React Native app, you can use the react-native-pdf library for basic PDF rendering or PSPDFKit for a more feature-rich experience. Both libraries support loading and viewing PDF documents on iOS and Android platforms. The setup involves installing the required dependencies, adding the PDF file to your project, and using components from these libraries to display the file.

How do I add annotations to PDFs in React Native?

react-native-pdf only renders existing annotations in a PDF but doesn’t support creating or editing them. For full annotation support, including adding, modifying, and deleting annotations, you can use PSPDFKit for React Native, which provides a robust API and tools for advanced PDF annotation capabilities.

Can I fill out forms in a PDF document using React Native?

Yes, but only with certain libraries. While react-native-pdf will display forms as they appear in the PDF, it doesn’t support interactive form filling. PSPDFKit for React Native offers complete form handling, allowing users to fill out interactive PDF forms directly within the app.

What are the advantages of using PSPDFKit for React Native?

PSPDFKit for React Native provides several advanced features not available in react-native-pdf, such as digital signatures, annotation editing, form filling, and long-term support with regular updates. It’s an ideal choice for apps that require robust PDF handling capabilities beyond basic viewing.