How to build a React Native PDF viewer with react-native-pdf and Nutrient

With Nutrient’s React Native PDF SDK, you can ship a fully featured PDF viewer in days instead of months. Your users get annotations, form filling, and digital signatures out of the box — features that would take significant engineering effort to build from scratch or aren’t available in open source alternatives like react-native-pdf.

Mobile apps often need to display PDFs — contracts, reports, invoices, or reference documents. PDFs are widely used across industries like education, finance, healthcare, and legal services.

With Nutrient, you can build apps that:

• Let users annotate and collaborate — Add highlights, comments, and drawings to contracts, reports, or educational materials.
• Capture signatures on mobile — Collect legally binding digital signatures without leaving your app.
• Fill and submit forms — Enable users to complete PDF forms and export the data to your backend.

This tutorial shows you how to integrate the Nutrient React Native PDF SDK into your app. It also compares it to the open source react-native-pdf(opens in a new tab) library so you can see the difference.

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 Nutrient for React Native PDF viewing?

Most React Native PDF libraries only handle basic viewing. Nutrient goes further — you get a complete document experience with annotations, form filling, and signatures built in. Your team saves months of development time, and your users get a polished, native-feeling PDF viewer on both iOS and Android.

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 Nutrient. Or, if you’re in a hurry, you can download our ready-to-run example project and follow the instructions from its README.

Which React Native PDF viewer should you choose?

• Use Nutrient React Native PDF SDK if you’re building a customer-facing or enterprise app. You get annotations, form filling, digital signatures, security features, and ongoing support — plus a polished UI that works on both iOS and Android.
• Use react-native-pdf if you only need basic view-only functionality for an internal tool or prototype and don’t need advanced features.

In the video below, you can see how to open a PDF file using react-native-pdf and Nutrient React Native SDK.

Prerequisites

Before getting started, ensure you have the following:

• A development environment for React Native using the React Native CLI(opens in a new tab) (not the Expo CLI)
• The latest stable versions of Android Studio(opens in a new tab), the Android NDK(opens in a new tab), and an Android Virtual Device(opens in a new tab) or hardware device
• The latest stable versions of Xcode(opens in a new tab) and CocoaPods(opens in a new tab)

Platform-specific configuration

Android configuration

• Ensure compatibility with different Android SDK versions.
• Common issues and solutions:
  • Gradle build failures — Ensure proper dependency versions in build.gradle.
  • Permissions — Add required permissions in AndroidManifest.xml for file access.

iOS configuration

• Setting up permissions:
  • Add necessary permissions in Info.plist for document access.
• Handling device orientations:
  • Ensure the app supports all orientations by modifying the UISupportedInterfaceOrientations key.
• Performance optimizations:
  • Enable caching for faster load times.

Step 1 — Creating 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 — Installing the Nutrient dependency

1. Navigate to your project directory:

   cd ReactNativePDFViewer

2. Then, add the Nutrient dependency:

yarn add @nutrient-sdk/react-native

3. Install all the dependencies for the project:

   yarn install

Step 3 — Configuring the Android platform

1. Open android/build.gradle and add the Nutrient 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 — Configuring 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 — Displaying 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 NutrientView from '@nutrient-sdk/react-native';
import { NativeModules } from 'react-native';

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

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

Step 6 — Launching the app

Run the app on your chosen platform:

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

Why Nutrient instead of react-native-pdf?

Both libraries display PDFs, but Nutrient delivers a production-ready experience. Here’s how they compare:

Bottom line:

If PDF viewing is core to your app’s value, start with Nutrient. You’ll ship faster, support users better, and avoid the pain of migrating later. Teams that start with react-native-pdf often switch to Nutrient once they need annotations, forms, or signatures — and wish they’d made the switch earlier.

What you can build with Nutrient that you can’t with react-native-pdf

Production apps often need more than basic PDF viewing. Here’s what Nutrient enables that react-native-pdf doesn’t support:

1. Annotation support

• Limitations of react-native-pdf — react-native-pdf only renders annotations that were already in the source file. It doesn’t support annotation editing, so users won’t be able to create, update, or delete annotations in the PDF.
• Nutrient SDK features — Nutrient’s React Native SDK supports comprehensive annotation capabilities, allowing you to add, edit, and remove various types of annotations programmatically or via the user interface. It supports 17 annotation types, including highlights, text, ink, notes, and shapes. You can also import and export annotations in XFDF or JSON formats, with advanced features like cloudy annotations and custom appearances.

2. Interactive PDF forms

• Limitations of react-native-pdf — react-native-pdf only renders forms and their values from the source file and doesn’t support form editing. Users won’t be able to fill forms in a PDF document.
• Nutrient SDK features — Nutrient’s React Native SDK provides full support for interactive PDF forms, allowing users to fill, read, and edit PDF AcroForms programmatically or through the UI. You can capture form field data, export it, or embed it into the PDF.

3. Digital signatures

• Limitations of react-native-pdf — react-native-pdf currently has no support for digital signatures, which are essential for verifying the authenticity of filled-out PDFs.
• Nutrient SDK features — Nutrient React Native SDK includes support for adding electronic and digital signatures to PDF documents, ensuring a document’s authenticity.

4. Customizing the PDF viewer UI

• Limitations of react-native-pdf — The customization options for the PDF viewer in react-native-pdf are limited compared to the Nutrient SDK.
• Nutrient SDK features — Nutrient offers extensive customization of the PDF viewer UI. You can modify the toolbar, adjust the background color, and configure the layout to match your app’s design. The viewer supports multiple page modes and transitions, ensuring the UI aligns with your app’s user experience.

5. Long-term support and updates

• Limitations of react-native-pdf — The latest update for react-native-pdf was released in October 2020, and it has limited support for new features and updates.
• Nutrient SDK features — The Nutrient SDK is regularly updated to add new features, fix bugs, and maintain compatibility with the latest React Native versions, operating system updates, and dependencies. This ensures your app stays up to date with the latest PDF handling capabilities.

Optimizing performance of the PDF viewer in React Native

To optimize the performance of the PDF viewer in React Native applications using Nutrient SDK, follow the best practices outlined below.

1. Optimize PDF documents

   Before rendering, optimize your PDF documents for mobile viewing by reducing image sizes to save memory, avoiding JPEG 2000 for image compression due to its complexity, and using tools like Adobe Acrobat to optimize PDFs for mobile devices.

2. Implement caching

   Improve performance for recurring users by implementing a caching strategy, such as using service workers to precache resources and implementing client-side caching for faster interactions.

3. Use Reader View

   For text-heavy documents, consider using the Reader View feature, which presents content in an easy-to-read, single-column view optimized for mobile devices. It ignores non-essential elements like images and headers, improving reading flow and enhancing performance.

4. Configure page transitions

   Optimize page transitions for smoother scrolling by using continuous scrolling modes, which ensure seamless navigation between pages.

5. Lazy loading

   Consider implementing lazy loading techniques to load only the visible pages and their immediate neighbors, reducing memory usage and improving initial load times.

6. Optimize UI rendering

   Customize the UI to show only necessary elements by hiding unnecessary toolbar buttons to reduce UI complexity and using the PSPDFKitView component to adjust the layout of the native UI component for optimal performance.

7. Use the latest version

   Always use the latest version of Nutrient React Native SDK, as it likely includes performance improvements and bug fixes.

Apply these based on your document types and performance requirements.

Conclusion

In this tutorial, you saw how to integrate PDF viewing into a React Native app using both react-native-pdf and the Nutrient React Native PDF SDK. react-native-pdf is a solid choice for basic viewing in simple or internal apps, but it falls short when you need advanced features like annotations, interactive forms, digital signatures, or long-term support.

If your business depends on PDFs, it’s usually more efficient to adopt a dedicated React Native PDF viewer library like Nutrient from the start. We offer a commercial, feature-rich, and completely customizable React Native PDF SDK that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. Check out our demos or start a free trial to see it in action.

If you have any questions about our Nutrient React Native SDK(opens in a new tab), please don’t hesitate to reach out to us(opens in a new tab). We’re happy to help!

FAQ