Nutrient React Native SDK

This library requires a valid license of the Nutrient SDK. Licenses are per platform.

The Nutrient React Native SDK exposes the most often used APIs from Nutrient. Many of our partners end up forking this repository and adding some custom code to achieve even greater integration with their products, using native code.

Windows is not currently supported, please use version 1.24.9 instead.

Nutrient

The Nutrient SDK is a framework that allows you to view, annotate, sign, and fill PDF forms on iOS, Android, Windows, macOS, and Web.

Nutrient Collaboration adds real-time collaboration features to seamlessly share, edit, and annotate PDF documents.

Support, Issues and License Questions

Nutrient offers support for customers with an active SDK license via https://support.nutrient.io/hc/en-us/requests/new.

Are you evaluating our SDK? That's great, we're happy to help out! The Nutrient React Native SDK is a commercial product and requires the purchase of a license key when used in production. By default, this library will initialize in demo mode, placing a watermark on each PDF and limiting usage to 60 minutes.

To purchase a license for production use, please reach out to us via https://www.nutrient.io/sdk/contact-sales.

To initialize the Nutrient React Native SDK using a license key, call either of the following before using any other Nutrient SDK APIs or features:

To set the license key for both Android and iOS, use:

PSPDFKit.setLicenseKeys('YOUR_REACT_NATIVE_ANDROID_LICENSE_KEY_GOES_HERE', 'YOUR_REACT_NATIVE_IOS_LICENSE_KEY_GOES_HERE');

To set the license key for the currently running platform, use:

PSPDFKit.setLicenseKey('YOUR_REACT_NATIVE_LICENSE_KEY_GOES_HERE');

Requirements

• A development environment for running React Native projects using the React Native CLI. If you’re using Expo, check out our blog post on the topic.

iOS

• The latest stable version of Xcode
• The latest stable version of CocoaPods. If you don’t already have CocoaPods installed, follow the CocoaPods installation guide to install CocoaPods on your Mac.

Android

• The latest stable version of Android Studio
• The Android NDK
• An Android Virtual Device or a hardware device

Installation

The Nutrient React Native SDK dependency is installed from the GitHub repository and not the npm registry. To install the Nutrient React Native SDK, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

Getting Started

See our Getting Started on React Native guide to integrate the SDK into your new or existing application, or follow the steps below:

1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents directory:

   cd ~/Documents

2. Create the React Native project by running the following command:

   npx react-native init PSPDFKitDemo

3. In the terminal app, change the location of the current working directory inside the newly created project:

   cd PSPDFKitDemo

4. Add the Nutrient React Native SDK:

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

5. Install all the dependencies for the project:

   yarn install

6. Open your project's build.gradle file:

   open android/build.gradle

7. Add the Nutrient repository to download the Nutrient SDK:

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

8. Open the app’s build.gradle file:

   ...
     android {
   -  compileSdkVersion rootProject.ext.compileSdkVersion
   +  compileSdkVersion 34
   ...
     defaultConfig {
       applicationId "com.pspdfkitdemo"
   -     minSdkVersion rootProject.ext.minSdkVersion
   +     minSdkVersion 21
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
     }
   }
   ...

9. Open your project’s Podfile:

   open ios/Podfile

10. Update the minimum iOS platform version in the Podfile:

    ...
    - platform :ios, min_ios_version_supported
    + platform :ios, '15.0'
    ...

11. Change the location of the current working directory to the ios folder:

    cd ios

12. Install the CocoaPods dependencies:

    pod install

13. Open your project’s Workspace in Xcode:

    open PSPDFKitDemo.xcworkspace

14. Make sure the deployment target is set to 15.0 or higher:

    

15. Change View controller-based status bar appearance to YES in your project’s Info.plist:

    

16. Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.

    

17. Change the location of the current working directory back to the root project folder:

    cd ..

18. Create the assets directory:

    mkdir android/app/src/main/assets

19. Copy a PDF document into your Android assets directory:

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

20. Open your App.tsx file:

    open App.tsx

21. Replace the entire contents of App.tsx 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}}
          />
        );
      }
    }

22. The app is now ready to launch! Go back to the terminal app and run:

    react-native run-ios

    react-native run-android

Running the example Catalog application

Take a look at the instructions to get started here for iOS and here for Android.

Configuration

The behaviour of the PSPDFKitView component can be customized using the configuration object. Refer to the PDFConfiguration API documentation. The PDFConfiguration object can be passed as parameter in when creating the PSPDFKitView component, or when using the PSPDFKit.present() Native Module API.

const configuration: PDFConfiguration = {
  showPageLabels: false,
  pageTransition: 'scrollContinuous',
  scrollDirection: 'vertical',
  showThumbnailBar: 'scrollable'
};

Updates

Some releases contain changes that require updates to your project settings or application code. Take a look at our Upgrade and Migration guides after updating your Nutrient React Native SDK dependency.

Troubleshooting

For Troubleshooting common issues you might encounter when setting up the Nutrient React Native SDK, please refer to the Troubleshooting section.

License

This project can be used for evaluation or if you have a valid Nutrient license. All items and source code Copyright © 2010-2024 PSPDFKit GmbH.

See LICENSE for details.