How to Implement Foxit PDF SDK for Android using React Native plugin

React Native is an open-source mobile development framework for building native apps using JavaScript and React. ‘react-native-foxitpdf‘ is only one of the mobile framework plugins provided by us to use with Foxit PDF SDK for Android. It allows you to achieve powerful PDF viewing features using the React Native framework. Through this plugin, you can preview any PDF file including PDF 2.0 compliant files, XFA documents, and RMS protected documents, as well as commenting and editing PDF documents.

This section will help you get started with Foxit PDF SDK for Android and the React Native plugin for Windows. For other operating systems, you can take this tutorial only as a reference.

System Requirements

• NPM 8.3 or newer
• React Native
• Android SDK
• Foxit PDF SDK For Android
• Android Gradle plugin 3.1.0 or higher
• Gradle 4.4 or higher
• JDK 1.8

Note: The version of Foxit PDF SDK for Android should match the version of the ‘react-native-foxitpdf‘ plugin. You can specify the plugin version when installing it. If you don’t, the latest version will install.

Install React Native Command Line Interface

To build React Native app for Android, you will need Node, the React Native command line interface, a Java SE Development Kit (JDK) and Android Studio.

Please refer to the official getting started guide on setting up React Native CLI and setting up Android development environment to install React Native command line interface and to configure Android development environment.

Build a React Native project using Foxit PDF SDK for Android

Create a React Native project

Navigate to the directory where you wish to create your project and type react-native init . For example, open a command prompt or terminal, go to “D:\react-native”, and type the command below to create a React Native project called “testRN“:

react-native init testRN

Install ‘react-native-foxitpdf‘ plugin

Download the plugin from npm and install it inside the project folder:

To install a specific plugin version, for example, the 6.2.1 version

cd testRN
npm install @foxitsoftware/[email protected] –save  

Install the latest plugin version (by not specifying the version)

cd testRN
npm install @foxitsoftware/react-native-foxitpdf –save

Link the project to the plugin:

react-native link @foxitsoftware/react-native-foxitpdf

Note: All the subsequent commands are executed in the project directory.

Integrate Foxit PDF SDK for Android

Download the Foxit PDF SDK for Android package and extract it. Then, follow the steps below:

1) Copy “libs” folder from the extracted package to “D:\react-native\testRN\android” directory.

2) Add the following code into the project-level build.gradle file (testRN\android\build.gradle):
Inside the ‘allprojects‘, add the code below:

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        flatDir {
        dirs project(':@foxitsoftware_react-native-foxitpdf').file("$rootDir/libs")
        }
    }
}

3) Add the license information into “testRN\android\gradle.properties” file.

        FOXIT_LICENSE_SN=RDK_SN
        FOXIT_LICENSE_KEY=RDK_KEY

The value of “RDK_SN” and “RDK_KEY” can be found in the “rdk_sn.txt” and “rdk_key.txt” files under the “libs” folder of Foxit PDF SDK for Android package.

4) In “testRN\android\app\build.gradle” file, add the following code:Inside the ‘defaultConfig‘, add the code:

defaultConfig {
    applicationId "com.testrn"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
    manifestPlaceholders = [foxit_license_sn:FOXIT_LICENSE_SN, foxit_license_key:FOXIT_LICENSE_KEY]
}

5) In “testRN\android\app\src\main\AndroidManifest.xml” file, add the required permissions, declare PDFReaderActivity, and add license placeholder.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.testrn">
 
<uses -permission android:name="android.permission.INTERNET"></uses>
<uses -permission android:name="android.permission.SYSTEM_ALERT_WINDOW"></uses>
<uses -permission android:name="android.permission.VIBRATE"></uses>
<uses -permission android:name="android.permission.READ_PHONE_STATE"></uses>
<uses -permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses>
<uses -permission android:name="android.permission.READ_EXTERNAL_STORAGE"></uses>
<uses -permission android:name="android.permission.RUN_INSTRUMENTATION"></uses>
<uses -permission android:name="android.permission.CAMERA"></uses>
<uses -permission android:name="android.permission.RECORD_AUDIO"></uses>
 
<application android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:allowBackup="false"
  android:theme="@style/AppTheme"
  tools:replace="android:allowBackup,icon,theme,label,name">
 
  <activity android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent -filter>
      <action android:name="android.intent.action.MAIN"></action>
      <category android:name="android.intent.category.LAUNCHER"></category>
    </intent>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"></activity>
 
  <meta -data
    android:name="foxit_sn"
    android:value="${foxit_license_sn}" />
  <meta -data
    android:name="foxit_key"
    android:value="${foxit_license_key}" />
 
  <activity android:name="com.foxitreader.PDFReaderActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:screenOrientation="fullSensor"></activity>
 
 </application>
</manifest>   

Plugin Usage

After completing the integration of Foxit PDF SDK, you can use the plugin to open a PDF document.

In the “testRN\App.js” file, you can import the plugin using the following code:

import FoxitPDF from '@foxitsoftware/react-native-foxitpdf';

Then, call the function below to open a PDF document:

FoxitPDF.openPDF('a PDF file path');

Update the “App.js” file as below, which adds a button to open a PDF document:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import FoxitPDF from '@foxitsoftware/react-native-foxitpdf';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component {
  onPress() {
    FoxitPDF.openPDF('mnt/sdcard/FoxitSDK/complete_pdf_viewer_guide_android.pdf');
  }
  render() {
    return (
           Open PDF 
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }, 
});

Note: Here, we assume that you have pushed the “complete_pdf_viewer_guide_android.pdf” document into the “FoxitSDK” folder of the Android device or emulator that will be used to run this project. Obviously, you can change the file path to whatever you are using.

Run the project

To run the project, first setup your device or emulator to deploy the project to, navigate to the project directory and type the command below:

react-native run-android 

After running the project successfully, click the “Open PDF” button. The “complete_pdf_viewer_guide_android.pdf” document will be displayed as follows:

Note: If you encounter the problem “Unable to load script from assets ‘index.android.bundle‘. Make sure your bundle is packaged correctly or ensure you’re running a packager server. When running the project, you can follow the steps below:

1) Create a new folder called ‘assets’ in the “testRN\android\app\src\main” folder, or in a command prompt or terminal, navigate to the project directory, enter the command below to create a folder:

cd android/app/src/main
mkdir assets

2) Navigate to the project directory, type the following command:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3) Type the command “react-native run-android” to rerun the project.

Customizing the UI

To customize the UI for your project, please go to our articles on the UIExtensions project:

• How to Implement the UIExtensions project in Foxit PDF SDK for Android
• ‘Customizing the UI with UIExtensions using Foxit PDF SDK for Android.”

All the instructions on how to set up and customize your project will be provided there.