Get started with React Native

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

linkPrerequisites

• PDFTron SDK >= 7.0.4
• react-native >= 0.60.0
• npm or yarn

linkIntegrate

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 environment, setting up the Android environment, and creating a React Native project, the following steps will assume your app is created through react-native init MyApp.

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
       }
   
       dependencies {
   +       implementation "androidx.multidex:multidex:2.0.1"
       }
   
       ...
   }

4. 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">
   
     <application
       ...
   +   android:largeHeap="true"
   +   android:usesCleartextTraffic="true">
   
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
   -     android:windowSoftInputMode="adjustResize"
   +     android:windowSoftInputMode="adjustPan"
   +     android:theme="@style/CustomAppTheme">
         <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>

5. 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 {

linkNext step

View a document