Android React Native PDF library integration

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

Get the React Native source code

• PDFTron SDK >= 9.1.2
• react-native >= 0.60.0
• npm or yarn
• TypeScript >= 3.4.1 (optional; see TypeScript)

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.

0. If using yarn, do: yarn global add react-native-cli

1. First, follow the official getting started guide on setting up the React Native environment, setting up the iOS and Android environment, and creating a React Native project. The following steps will assume your app is created through react-native init MyApp. This guide also applies if you are using the TypeScript template.

2. In MyApp folder, install react-native-pdftron by calling:

   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

   or

   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

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

   android {
       compileSdkVersion rootProject.ext.compileSdkVersion
   
       compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
   
       defaultConfig {
           applicationId "com.reactnativesample"
           minSdkVersion rootProject.ext.minSdkVersion
           targetSdkVersion rootProject.ext.targetSdkVersion
           versionCode 1
           versionName "1.0"
   +       multiDexEnabled true
   +       manifestPlaceHolders = [pdftronLicenseKey:PDFTRON_LICENSE_KEY]
       }
   
       ...
   }
   
   ...
   
   dependencies {
   +   implementation "androidx.multidex:multidex:2.0.1"
   }

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

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

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

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.myapp">
   
           <uses-permission android:name="android.permission.INTERNET" />
           <!-- Required to read and write documents from device storage -->
   +	    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
           <!-- Required if you want to record audio annotations -->
   +	    <uses-permission android:name="android.permission.RECORD_AUDIO" />
   
     <application
       ...
   +   android:largeHeap="true"
   +   android:usesCleartextTraffic="true">
   
       <!-- 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:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
   -     android:windowSoftInputMode="adjustResize"
   +     android:windowSoftInputMode="adjustPan"
   +     android:theme="@style/PDFTronAppTheme">
         <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>

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

   - import android.app.Application;
   + import androidx.multidex.MultiDexApplication;
   ...
   - public class MainApplication extends Application implements ReactApplication {
   + public class MainApplication extends MultiDexApplication implements ReactApplication {

PDFTron 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 PDFTron React Native dependency to version 3.0.0 or higher.

For non-TypeScript users, updating your PDFTron 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 .

If you are an existing TypeScript user, then the custom typings will be available to you simply by updating your PDFTron 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 PDFTron'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.

View a document