React Native Wrapper for Foxit PDF SDK For IOS and Android

react-native-foxitpdf

react-native-foxitpdf is Foxit’s first React Native PDF component for iOS and Android. It uses Foxit PDF SDK for Android/iOS technology to view, render and edit PDFs easily.

• Installation
• Integration for iOS
• Integration for Android
• General Usage
• API Reference
• Versions
• License

Installation

First, download the library from npm and install inside your current project folder

npm install @foxitsoftware/react-native-foxitpdf

Integration for iOS

1. Unzip Foxit PDF SDK for iOS and copy libs folder into the component’s <PROJECT_ROOT>/ios folder.

<PROJECT_ROOT>/ios/libs/<frameworks>

Please use foxitpdfsdk_(version_no)_ios.zip from https://developers.foxitsoftware.com/pdf-sdk/ios/

2. Add FoxitPDF to <PROJECT_ROOT>/ios/Podfile

pod 'FoxitPDF', :path=>'./libs/FoxitPDF.podspec'

cd <PROJECT_ROOT>/ios && pod install

Integration for Android

1. Download foxit_mobile_pdf_sdk_android_en.zip from [https://developers.foxitsoftware.com/pdf-sdk/android/] (Please use Foxit PDF SDK for Android 7.5.0 )

2. Unzip foxitpdfsdk_(version_no)_android.zip and copy libs folder into the component android folder. /xxx/platforms/android/

3. In your root android/build.gradle:

    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")           
+           }
        }
    }

In your root android/app/build.gradle:

    ```
    android {
         ```
         defaultConfig {
             applicationId "xxx.xxx.xxx"
             minSdkVersion rootProject.ext.minSdkVersion
             targetSdkVersion rootProject.ext.targetSdkVersion
             versionCode 1
             versionName "1.0"
+            multiDexEnabled true
         }
         ```
    }

    ```
    dependencies {
        implementation fileTree(dir: "libs", include: ["*.jar"])
        implementation "com.facebook.react:react-native:+"  // From node_modules
+       implementation 'androidx.multidex:multidex:2.0.1'

        if (enableHermes) {
          def hermesPath = "../../node_modules/hermesvm/android/";
          debugImplementation files(hermesPath + "hermes-debug.aar")
          releaseImplementation files(hermesPath + "hermes-release.aar")
        } else {
          implementation jscFlavor
        }
    }
    ```

4. Add uses-permission ,PDFReaderActivity and tools:replace to your android/app/src/main/AndroidManifest.xml.

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+             xmlns:tools="http://schemas.android.com/tools"
              package="com.foxitreact">

+      <uses-permission android:name="android.permission.INTERNET"/>
+      <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+      <uses-permission android:name="android.permission.VIBRATE"/>
+      <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
+      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+      <uses-permission android:name="android.permission.RUN_INSTRUMENTATION"/>
+      <uses-permission android:name="android.permission.CAMERA"/>
+      <uses-permission android:name="android.permission.RECORD_AUDIO"/>

       <application
           android:name=".MainApplication"
           android:allowBackup="false"
           android:icon="@mipmap/ic_launcher"
           android:label="@string/app_name"
           android:roundIcon="@mipmap/ic_launcher_round"
           android:theme="@style/AppTheme"
+          tools:replace="android:allowBackup,icon,theme,label,name">

+          <activity
+              android:name="com.foxitreader.PDFReaderActivity"
+              android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+              android:screenOrientation="fullSensor"/>
           <activity
               android:name=".MainActivity"
               android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
               android:label="@string/app_name"
               android:windowSoftInputMode="adjustResize">
               <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. Please update you Android Gradle plugin to 3.1.0+, and update the version of Gradle to 4.4+, you can refer to [https://developer.android.com/studio/releases/gradle-plugin].

General Usage

In your App.js file, you can import the component using the following code:

1.Import FoxitPDF

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

2.Initialize the library. The foxit_sn is rdk_sn, foxit_key is rdk_key and they can be found in the libs folder of Foxit PDF SDK.

FoxitPDF.initialize("foxit_sn","foxit_key");

3.Once the component is initialized, call the function below to open document:

FoxitPDF.openDocument('sample.pdf');

In the openDocument function parameter, add the path to the file you wish to open.

If you are using iOS version: Add the name of the PDF file, but make sure it is located under app Document folder

If you are using Android version: Please input the absolute path of the file in the devices, e.g., FoxitPDF.openDocument('/mnt/sdcard/xxx/xxx.pdf')

In App.js:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  NativeModules,
  TouchableOpacity,
} from 'react-native';

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

type Props = {};
export default class App extends Component<Props> {

  constructor(props) {
     super(props);

     FoxitPDF.initialize("foxit_sn","foxit_key");
  }

  onPress() {
    FoxitPDF.openDocument('/sample.pdf');
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.onPress}>
          <Text>Open PDF</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

API Reference

Initialize Foxit PDF SDK

FoxitPDF.initialize(String, String); // foxit_sn and foxit_key

Open a pdf document

FoxitPDF.openDocument(String, String) // path and password

Versions

v7.5.0

v7.4.0

v7.3.0

v7.2.0

v7.1.0

v7.0.0

v6.4.0

v6.3.0

v6.2.1

v6.2

v6.1

v6.0

Download Details:

Author: foxitsoftware

Demo: https://developers.foxitsoftware.com/

Source Code: https://github.com/foxitsoftware/react-native-foxitpdf

#react-native #react #mobile-apps