> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/android/get-started/frameworks/react-native/react-native.md).

# Get started integrating Apryse React Native SDK

Integrate a free trial of Apryse React Native SDK into your Android and iOS projects with unlimited usage and support. Follow this comprehensive guide for seamless integration. The Apryse Android SDK

Welcome to Apryse. This guide will help you integrate a free trial of the Apryse React Native SDK into your React Native Project. Your free trial includes unlimited trial usage and support from solution engineers.

{% tabs %}
{% tab title="Android" %}

## Android & React-Native PDF library Integration

{% hint style="info" %}
**See here for the get started guide for using the Apryse React Native SDK on iOS.**
{% endhint %}

This guide will help you integrate a free trial of the Apryse SDK into your Android applications using React Native. Your free trial includes unlimited trial usage and support from solution engineers.

<a href="https://github.com/ApryseSDK/pdftron-react-native/" class="button primary">Get the React Native source code</a>

## Prerequisites

* Set up [development environment](https://reactnative.dev/docs/environment-setup/) for React Native environment
* Latest stable version of [Android Studio](https://developer.android.com/studio/)
* Have [Android NDK (Native Development Kit)](https://developer.android.com/studio/projects/install-ndk/) installed
* Have [npm](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment/) or [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) setup
* Apryse SDK >= 11.0.0
* react-native >= 0.60.0
* TypeScript >= 3.4.1 (optional; see [TypeScript](#typescript))

{% hint style="info" %}
**No trial license key required.**

The trial of Apryse Mobile SDK does not require a trial key. A commercial license key is required for use in a production environment. Please [contact sales](https://apryse.com/form/contact-sales) to purchase a commercial key or if you need any other license key assistance.
{% endhint %}

{% hint style="warning" %}
**Keep your license keys confidential.**

License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).
{% endhint %}

## Integrate

For the expo setup of the project please refer to this [blog post](https://apryse.com/blog/pdfnet/pdftron-sdk-8-0). For simplicity the following guide is based on a boilerplate react native app for `react-native init MyApp` with git diff syntax for adding and removing lines from the boilerplate app.

1. If you are using yarn, run the command to install react-native cli:or

{% code lineNumbers="true" %}

```sh
yarn global add react-native-cli
```

{% endcode %}

{% code lineNumbers="true" %}

```sh
npm install -g react-native-cli
```

{% endcode %}

1. Initialize the project by running the following command:

{% code lineNumbers="true" %}

```sh
react-native init MyApp
```

{% endcode %}

1. In `MyApp` folder, install `react-native-pdftron`. There are two ways to integrate the SDK:

* In `MyApp` folder, install `react-native-pdftron` by calling:or

#### Through Apryse's github repo:

{% code lineNumbers="true" %}

```sh
yarn add github:PDFTron/pdftron-react-native
yarn add @react-native-community/cli --dev
yarn add @react-native-community/cli-platform-android --dev
yarn add @react-native-community/cli-platform-ios --dev
yarn install
```

{% endcode %}

{% code lineNumbers="true" %}

```sh
npm install github:PDFTron/pdftron-react-native --save
npm install @react-native-community/cli --save-dev
npm install @react-native-community/cli-platform-android --save-dev
npm install @react-native-community/cli-platform-ios --save-dev
npm install
```

{% endcode %}

* In `MyApp` folder, install run the following commands:or

#### Through Apryse's npm package:

{% code lineNumbers="true" %}

```sh
yarn add @pdftron/react-native-pdf
yarn add @react-native-community/cli --dev
yarn add @react-native-community/cli-platform-android --dev
yarn add @react-native-community/cli-platform-ios --dev
yarn install
```

{% endcode %}

{% code lineNumbers="true" %}

```sh
npm install @pdftron/react-native-pdf
npm install @react-native-community/cli --save-dev
npm install @react-native-community/cli-platform-android --save-dev
npm install @react-native-community/cli-platform-ios --save-dev
npm install
```

{% endcode %}

1. Add the following in your `android/app/build.gradle` file:

{% code lineNumbers="true" %}

```groovy
android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.reactnativesample"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+ multiDexEnabled true
+ manifestPlaceholders = [pdftronLicenseKey:PDFTRON_LICENSE_KEY]
    }

    ...
}
...

dependencies {
+ implementation "androidx.multidex:multidex:2.0.1"
    ...
}
```

{% endcode %}

1. In your `android/gradle.properties` file, add the following line:

{% code lineNumbers="true" %}

```diff
# Add the PDFTRON_LICENSE_KEY variable here. 
# For trial purposes leave it blank.
# For production add a valid commercial license key.
PDFTRON_LICENSE_KEY=
```

{% endcode %}

1. Add the following to your `android/app/src/main/AndroidManifest.xml` file:

{% code lineNumbers="true" %}

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.myapp">

  <uses-permission android:name="android.permission.INTERNET" />
  <!-- Required if you want to record audio annotations -->
+ <uses-permission android:name="android.permission.RECORD_AUDIO" />

  <application ... + android:largeHeap="true" + android:usesCleartextTraffic="false">

    <!-- Add license key in meta-data tag here. This should be inside the application tag. -->
+ <meta-data
+ android:name="pdftron_license_key"
+ android:value="${pdftronLicenseKey}"/>

    <activity ... - android:windowSoftInputMode="adjustResize" + android:windowSoftInputMode="adjustPan" + android:exported="true">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  </application>
</manifest>
```

{% endcode %}

{% hint style="warning" %}
**Storage Permission**

Please follow the latest Android best practices and guidelines outlined [here](https://developer.android.com/training/permissions/usage-notes/)
{% endhint %}

1. In your `android/app/src/main/java/com/myapp/MainApplication.java` file, change `Application` to `MultiDexApplication`:

{% code lineNumbers="true" %}

```java
- import android.app.Application;
+ import androidx.multidex.MultiDexApplication;

- public class MainApplication extends Application implements ReactApplication {
+ public class MainApplication extends MultiDexApplication implements ReactApplication {
```

{% endcode %}

{% hint style="warning" %}
If your app is targeting Android SDK version 28 or higher, please make sure the `android:usesCleartextTraffic="true"` attribute is set in your application tag to open HTTP files in the viewer. If you are only working with HTTPS files, this is not required.
{% endhint %}

## TypeScript

Apryse React Native introduced support for TypeScript in version 3.0.0. This update mainly benefits those who already use TypeScript in their applications. It also provides certain benefits to all customers, including those who use JavaScript without TypeScript.

To get access to TypeScript support, simply update your Apryse React Native dependency to version 3.0.0 or higher.

### All Users

For non-TypeScript users, updating your Apryse React Native dependency to version 3.0.0 or higher will not automatically install TypeScript itself, and you can continue to use the library as before (without TypeScript support). If you currently do not use TypeScript itself in your project and would like to, see [Adding TypeScript to an Existing Project](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project).

Regardless of whether you use TypeScript, the following benefits are available:

* Proper API typings which can be used in tools such as [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense/). This offers insight into the data being passed without referring to the [API documentation](https://sdk.apryse.com/api/android/javadoc/reference/packages.html).
* Greater type safety and reliability due to the migration of source files from JavaScript to TypeScript.
* Updated [Add an API guides](/android/get-started/frameworks/react-native/add-an-api.md) to offer step-by-step, TypeScript-supported examples on accessing properties, methods, and events. Contributors should be aware that PRs must now be made to the `dev` branch (see [Contributing](https://github.com/ApryseSDK/pdftron-react-native/blob/master/CONTRIBUTING.md)).

If you have questions, head to the [FAQ's React Native section](/android/get-started/faq.md).

### TypeScript Users

If you are an existing TypeScript user, then the custom typings will be available to you simply by updating your Apryse React Native dependency to version 3.0.0 or higher.

Note:

* TypeScript version 3.4.1+ is recommended. Although compilation still works with lower versions, typings may degrade to `any`.
* Due to the introduction of proper typings to Apryse's APIs, your compiler may now give warnings or errors about your usage of these APIs. In most cases these will not prevent your app from running but it is advised that you address them to take full advantage of TypeScript. It is particularly important to address them if you use TypeScript to emit files and have enabled `noEmitOnError` in your `tsconfig.json`.

## Next step

<a href="/android/get-started/frameworks/react-native/view-a-document.md" class="button primary">View a document</a>
{% endtab %}

{% tab title="iOS" %}

## iOS & React-Native PDF library Integration

{% hint style="info" %}
**See here for the get started guide for using the Apryse React Native SDK on Android.**
{% endhint %}

This guide will help you integrate a free trial of the Apryse SDK into your iOS applications using React Native. Your free trial includes unlimited trial usage and support from solution engineers.

<a href="https://github.com/ApryseSDK/pdftron-react-native/" class="button primary">Get the React Native source code</a>

## Prerequisites

* Set up [development environment](https://reactnative.dev/docs/environment-setup/) for React Native environment
* Latest stable version of [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12)
* Latest stable version of [CocoaPods](https://guides.cocoapods.org/using/getting-started.html#installation)
* Have [npm](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment/) or [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) setup
* Apryse SDK >= 11.0.0
* react-native >= 0.60.0
* TypeScript >= 3.4.1 (optional; see [TypeScript](#typescript-1))

{% hint style="info" %}
**No trial license key required.**

The trial of Apryse Mobile SDK does not require a trial key. A commercial license key is required for use in a production environment. Please [contact sales](https://apryse.com/form/contact-sales) to purchase a commercial key or if you need any other license key assistance.
{% endhint %}

{% hint style="warning" %}
**Keep your license keys confidential.**

License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).
{% endhint %}

## Integrate

For the expo setup of the project please refer to this [blog post](https://www.apryse.com/blog/mobile/react-and-react-native-pdf-viewers). For simplicity the following guide is based on a boilerplate react native app for `react-native init MyApp` with git diff syntax for adding and removing lines from the boilerplate app.

1. If you are using yarn, run the command to install react-native cli:or

{% code lineNumbers="true" %}

```sh
yarn global add react-native-cli
```

{% endcode %}

{% code lineNumbers="true" %}

```sh
npm install -g react-native-cli
```

{% endcode %}

1. Initialize the project by running the following command:

{% code lineNumbers="true" %}

```sh
react-native init MyApp
```

{% endcode %}

1. In the terminal change the location of the working directly to the directory of the newly created project:

{% code lineNumbers="true" %}

```sh
cd MyApp
```

{% endcode %}

1. Install `react-native-pdftron` by calling. There are two ways to integrate the SDK:

* In `MyApp` folder, install `react-native-pdftron` by calling:or

#### Through Apryse's github repo:

{% code lineNumbers="true" %}

```sh
yarn add github:PDFTron/pdftron-react-native
yarn add @react-native-community/cli --dev
yarn add @react-native-community/cli-platform-android --dev
yarn add @react-native-community/cli-platform-ios --dev
yarn install
```

{% endcode %}

{% code lineNumbers="true" %}

```sh
npm install github:PDFTron/pdftron-react-native --save
npm install @react-native-community/cli --save-dev
npm install @react-native-community/cli-platform-android --save-dev
npm install @react-native-community/cli-platform-ios --save-dev
npm install
```

{% endcode %}

* In `MyApp` folder, install run the following commands:or

#### Through Apryse's npm package:

{% code lineNumbers="true" %}

```sh
yarn add @pdftron/react-native-pdf
yarn add @react-native-community/cli --dev
yarn add @react-native-community/cli-platform-android --dev
yarn add @react-native-community/cli-platform-ios --dev
yarn install
```

{% endcode %}

{% code lineNumbers="true" %}

```sh
npm install @pdftron/react-native-pdf
npm install @react-native-community/cli --save-dev
npm install @react-native-community/cli-platform-android --save-dev
npm install @react-native-community/cli-platform-ios --save-dev
npm install
```

{% endcode %}

1. Open `Podfile` in the `ios` folder, add:

{% code lineNumbers="true" %}

```sh
target 'MyApp' do
    # ...
    pod 'PDFNet', podspec: 'https://www.pdftron.com/downloads/ios/cocoapods/pdfnet/latest.podspec'
    # ...
end
```

{% endcode %}

1. Change working directory to the `ios` folderinstall the pods by running the command:

{% code lineNumbers="true" %}

```sh
cd ios
```

{% endcode %}

{% code lineNumbers="true" %}

```sh
pod install
```

{% endcode %}

1. (Optional) If you need a close button icon, you will need to add the PNG resources to `MyApp` as well, i.e. [`ic_close_black_24px`](https://github.com/ApryseSDK/pdftron-react-native/blob/master/example/ios/ic_close_black_24px.png).

## TypeScript

Apryse React Native introduced support for TypeScript in version 3.0.0. This update mainly benefits those who already use TypeScript in their applications. It also provides certain benefits to all customers, including those who use JavaScript without TypeScript.

To get access to TypeScript support, simply update your Apryse React Native dependency to version 3.0.0 or higher.

### All Users

For non-TypeScript users, updating your Apryse React Native dependency to version 3.0.0 or higher will not automatically install TypeScript itself, and you can continue to use the library as before (without TypeScript support). If you currently do not use TypeScript itself in your project and would like to, see [Adding TypeScript to an Existing Project](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project).

Regardless of whether you use TypeScript, the following benefits are available:

* Proper API typings which can be used in tools such as [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense/). This offers insight into the data being passed without referring to the [API documentation](https://sdk.apryse.com/api/ios/index.html).
* Greater type safety and reliability due to the migration of source files from JavaScript to TypeScript.
* Updated [Add an API guides](/android/get-started/frameworks/react-native/add-an-api.md) to offer step-by-step, TypeScript-supported examples on accessing properties, methods, and events. Contributors should be aware that PRs must now be made to the `dev` branch (see [Contributing](https://github.com/ApryseSDK/pdftron-react-native/blob/master/CONTRIBUTING.md)).

If you have questions, head to the [FAQ's React Native section](/android/get-started/faq.md).

### TypeScript Users

If you are an existing TypeScript user, then the custom typings will be available to you simply by updating your Apryse React Native dependency to version 3.0.0 or higher.

Note:

* TypeScript version 3.4.1+ is recommended. Although compilation still works with lower versions, typings may degrade to `any`.
* Due to the introduction of proper typings to Apryse's APIs, your compiler may now give warnings or errors about your usage of these APIs. In most cases these will not prevent your app from running but it is advised that you address them to take full advantage of TypeScript. It is particularly important to address them if you use TypeScript to emit files and have enabled `noEmitOnError` in your `tsconfig.json`.

## Next step

<a href="/ios/get-started/frameworks/react-native/view-a-document.md" class="button primary">View a document</a>
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/android/get-started/frameworks/react-native/react-native.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.