Nutrient React Native SDK

!Nutrient React Native SDK

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

Work with a React Native PDF viewer SDK engineered for the best possible user and developer experience. Whether you need high-fidelity PDF rendering, annotation tools, digital signatures, or form filling, our React Native PDF SDK gives you complete control over PDF viewing and editing within your app.

$3

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:

``
Nutrient.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:

`
Nutrient.setLicenseKey('YOUR_REACT_NATIVE_LICENSE_KEY_GOES_HERE');
`

$3

- 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

$3

To install the Nutrient React Native SDK, run yarn add @nutrient-sdk/react-native in your project directory or npm install @nutrient-sdk/react-native if you’re using npm.

$3

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:

`bash
cd ~/Documents
`

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

`bash
npx @react-native-community/cli init NutrientDemo
`

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

`bash
cd NutrientDemo
`

1. Add the Nutrient React Native SDK:

`bash
yarn add @nutrient-sdk/react-native
`

1. Install all the dependencies for the project:

`bash
yarn install
`

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

`bash
open android/build.gradle
`

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

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

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

`diff
...
android {
- compileSdkVersion rootProject.ext.compileSdkVersion
+ compileSdkVersion 35
...
defaultConfig {
applicationId "com.nutrientdemo"
- minSdkVersion rootProject.ext.minSdkVersion
+ minSdkVersion 21
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
}
}
...
`

1. Open your project’s Podfile:

`bash
open ios/Podfile
`

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

`diff
...
- platform :ios, min_ios_version_supported
+ platform :ios, '16.0'
...
`

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

`bash
cd ios
`

1. Install the CocoaPods dependencies:

`bash
pod install
`

1. Open your project’s Workspace in Xcode:

`bash
open NutrientDemo.xcworkspace
`

1. Make sure the deployment target is set to 16.0 or higher:

!deployment-target

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

!view-controller-based-status-bar-appearance

1. 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.

!drag-and-drop-document

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

`bash
cd ..
`

1. Create the assets directory:

`bash
mkdir android/app/src/main/assets
`

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

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

1. Open your App.tsx file:

`bash
open App.tsx
`

1. Replace the entire contents of App.tsx with the following code snippet:

`typescript
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 = React.createRef();
return (
document={DOCUMENT}
configuration={{
showThumbnailBar: 'scrollable',
pageTransition: 'scrollContinuous',
scrollDirection: 'vertical',
}}
ref={pdfRef}
fragmentTag="PDF1"
style={{flex: 1}}
/>
);
}
}
`

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

`bash
react-native run-ios
`

`bash
react-native run-android
`

$3

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

$3

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

`typescript
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-2026 PSPDFKit GmbH.

See LICENSE for details.