Section:

Get started integrating Apryse React Native 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.

Android & React-Native PDF library Integration

See here for the get started guide for using the Apryse React Native SDK on iOS.

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.

Prerequisites

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 to purchase a commercial key or if you need any other license key assistance.

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

Integrate

For the expo setup of the project please refer to this blog post. 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

sh

1yarn global add react-native-cli

sh

1npm install -g react-native-cli
  1. Initialize the project by running the following command:

sh

1react-native init MyApp
  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:

sh

1yarn add github:PDFTron/pdftron-react-native
2yarn add @react-native-community/cli --dev
3yarn add @react-native-community/cli-platform-android --dev
4yarn add @react-native-community/cli-platform-ios --dev
5yarn install

sh

1npm install github:PDFTron/pdftron-react-native --save
2npm install @react-native-community/cli --save-dev
3npm install @react-native-community/cli-platform-android --save-dev
4npm install @react-native-community/cli-platform-ios --save-dev
5npm install
  • In MyApp folder, install run the following commands:or

Through Apryse's npm package:

sh

1yarn add @pdftron/react-native-pdf
2yarn add @react-native-community/cli --dev
3yarn add @react-native-community/cli-platform-android --dev
4yarn add @react-native-community/cli-platform-ios --dev
5yarn install

sh

1npm install @pdftron/react-native-pdf
2npm install @react-native-community/cli --save-dev
3npm install @react-native-community/cli-platform-android --save-dev
4npm install @react-native-community/cli-platform-ios --save-dev
5npm install
  1. Add the following in your android/app/build.gradle file:

Groovy

1android {
2    ndkVersion rootProject.ext.ndkVersion
3
4    compileSdkVersion rootProject.ext.compileSdkVersion
5
6    defaultConfig {
7        applicationId "com.reactnativesample"
8        minSdkVersion rootProject.ext.minSdkVersion
9        targetSdkVersion rootProject.ext.targetSdkVersion
10        versionCode 1
11        versionName "1.0"
12        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
13+ multiDexEnabled true
14+ manifestPlaceholders = [pdftronLicenseKey:PDFTRON_LICENSE_KEY]
15    }
16
17    ...
18}
19...
20
21dependencies {
22+ implementation "androidx.multidex:multidex:2.0.1"
23    ...
24}
  1. In your android/gradle.properties file, add the following line:

diff

1# Add the PDFTRON_LICENSE_KEY variable here. 
2# For trial purposes leave it blank.
3# For production add a valid commercial license key.
4PDFTRON_LICENSE_KEY=
  1. Add the following to your android/app/src/main/AndroidManifest.xml file:

XML

1<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.myapp">
2
3  <uses-permission android:name="android.permission.INTERNET" />
4  <!-- Required if you want to record audio annotations -->
5+ <uses-permission android:name="android.permission.RECORD_AUDIO" />
6
7  <application ... + android:largeHeap="true" + android:usesCleartextTraffic="false">
8
9    <!-- Add license key in meta-data tag here. This should be inside the application tag. -->
10+ <meta-data
11+ android:name="pdftron_license_key"
12+ android:value="${pdftronLicenseKey}"/>
13
14    <activity ... - android:windowSoftInputMode="adjustResize" + android:windowSoftInputMode="adjustPan" + android:exported="true">
15      <intent-filter>
16          <action android:name="android.intent.action.MAIN" />
17          <category android:name="android.intent.category.LAUNCHER" />
18      </intent-filter>
19    </activity>
20    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
21  </application>
22</manifest>

Storage Permission

Please follow the latest Android best practices and guidelines outlined here

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

Java

1- import android.app.Application;
2+ import androidx.multidex.MultiDexApplication;
3
4- public class MainApplication extends Application implements ReactApplication {
5+ public class MainApplication extends MultiDexApplication implements ReactApplication {

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.

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.

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

  • Proper API typings which can be used in tools such as IntelliSense. This offers insight into the data being passed without referring to the API documentation.
  • Greater type safety and reliability due to the migration of source files from JavaScript to TypeScript.
  • Updated Add an API guides 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).

If you have questions, head to the FAQ's React Native section.

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales