--- title: "Integrate Nutrient React Native dependency into Android and iOS applications" canonical_url: "https://www.nutrient.io/sdk/react-native/getting-started/" md_url: "https://www.nutrient.io/sdk/react-native/getting-started.md" last_updated: "2026-05-14T16:53:43.984Z" description: "Integrate Nutrient React Native dependency into your Android and iOS applications. View, annotate, and edit PDFs with a unified solution and consistent experience across platforms." --- # Integrate Nutrient React Native dependency into Android and iOS applications This guide walks you through the steps necessary to integrate Nutrient React Native dependency into your Android or iOS application. By the end, you’ll be able to present a PDF document in the default Nutrient user interface (UI). ## Requirements Install the following required packages depending on your platform (Android or iOS): > The Nutrient React Native dependency is installed from npmjs.com by running `yarn add @nutrient-sdk/react-native` in your project directory or `npm install @nutrient-sdk/react-native` if you’re using npm. - A [development environment](https://reactnative.dev/docs/environment-setup) for running React Native projects using the React Native CLI (not the Expo CLI) - The [latest stable version of Android Studio](https://developer.android.com/studio) - The [Android NDK](https://developer.android.com/studio/projects/install-ndk) - An [Android Virtual Device](https://developer.android.com/studio/run/managing-avds.html) or a hardware device - The [latest stable version of Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12) - The [latest stable version of CocoaPods](https://github.com/CocoaPods/CocoaPods/releases). If you don’t already have CocoaPods installed, follow the [CocoaPods installation](https://guides.cocoapods.org/using/getting-started.html#installation) guide to install CocoaPods on your Mac. You can check your version of CocoaPods with `pod --version`. ## Creating a new project If you already have an existing React Native project that runs on both Android and iOS using the latest version of React Native, skip to the [Installation](#installing-the-nutrient-dependency) step. Otherwise, create a new one by following the steps below: 1. In the terminal, change the current working directory to where you’ll save your project. This example uses the `pdf` folder created in the home directory: ### Shell ```sh mkdir ~/pdf cd ~/pdf ``` ### Shell (Windows) ```bat cd /d %userprofile% mkdir pdf cd pdf ``` 2. Create the React Native project by running the following command: ```bash npx @react-native-community/cli init NutrientDemo ``` ## Installing the Nutrient dependency 1. Open the terminal app and change the location of the current working directory inside your project: ```bash cd path/to/YourProject ``` 2. Add the Nutrient plugin: ```bash yarn add @nutrient-sdk/react-native ``` 3. Install all the dependencies for the project: ```bash yarn install ``` 4. Based on whether you are installing Nutrient React Native dependency into an Android or iOS application, make your selection and follow the steps below. ### Android 4.1. Open your project’s `build.gradle` file: ```bash open android/build.gradle ``` 4.2. Add the Nutrient repository to download the Nutrient library: ```diff... allprojects { repositories { mavenLocal() + maven { + url 'https://my.nutrient.io/maven/' + }... ``` 4.3. Open the app’s `build.gradle` file: ```bash open android/app/build.gradle ``` 4.4. Modify the compile SDK version and the minimum SDK version: ```diff... android { - compileSdkVersion rootProject.ext.compileSdkVersion + compileSdkVersion 34... defaultConfig { applicationId "com.nutrientdemo" - minSdkVersion rootProject.ext.minSdkVersion + minSdkVersion 21 targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" } }... ``` ### iOS 4.1. Open your project’s Podfile in a text editor to update the platform to iOS 15, and add the Nutrient Podspec: ```bash open ios/Podfile ``` Your Podfile should look like this: ```diff require_relative '../node_modules/react-native/scripts/react_native_pods' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' - platform :ios, '11.0' + platform :ios, '16.0' target 'NutrientDemo' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # to enable hermes on iOS, change `false` to `true` and then install pods :hermes_enabled => false ) target 'NutrientDemoTests' do inherit! :complete # Pods for testing end # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable the next line. use_flipper!() post_install do |installer| react_native_post_install(installer) end end ``` 4.2. Change the location of the current working directory to the `ios` folder: ```bash cd ios ``` 4.3. Install the CocoaPods dependencies: ```bash pod install ``` 4.4. Open your project’s Workspace in Xcode: ```bash open YourProject.xcworkspace ``` 4.5. Make sure the deployment target is set to 16.0 or higher: 4.6. Change View controller-based status bar appearance to `YES` in your project’s `Info.plist`: ## Displaying a PDF 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](https://www.nutrient.io/downloads/pspdfkit-react-native-quickstart-guide.pdf) as an example. 2. Change the location of the current working directory back to the root project folder: ```bash cd.. ``` 3. Create the `assets` directory if you don’t have one already: ```bash mkdir android/app/src/main/assets ``` 4. Copy a PDF document into your `assets` directory: ```bash cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf ``` 5. Use the `NutrientView` React component in your project: ```js import React, {Component} from 'react'; import {Platform} from 'react-native'; import NutrientView, { PDFConfiguration } 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 ( ); } } ``` 6. The app is now ready to launch! Go back to the terminal app and run: ```bash npx react-native run-android ``` ```bash npx react-native run-ios ``` ## Expo If you’re using Expo, refer to the blog post that explains how to use [Nutrient for React Native with Expo](https://www.nutrient.io/blog/how-to-use-nutrient-react-native-sdk-with-expo/). ## Next steps To learn more about React Native, make sure to check out the following blog posts: - [React Native UI Component for Android](https://www.nutrient.io/blog/react-native-ui-component-for-android/) - [React Native UI Component for iOS](https://www.nutrient.io/blog/react-native-ui-component-for-ios/) - [Advanced Techniques for React Native UI Components](https://www.nutrient.io/blog/advanced-techniques-for-react-native-ui-components.md) - [How to Extend React Native APIs](https://www.nutrient.io/blog/how-to-extend-react-native-api/) - [How to Bridge Native iOS Code to React Native](https://www.nutrient.io/blog/how-to-bridge-native-ios-code-to-react-native/) - [How to Open a PDF in React Native Using the Document Picker](https://www.nutrient.io/blog/how-to-open-a-pdf-in-react-native-using-the-document-browser/) - [How to Build a React Native PDF Viewer](https://www.nutrient.io/blog/how-to-build-a-react-native-pdf-viewer/)