react-native-pdf-editor

Getting started

Requirements

• Android or iOS Device
• React Native Project

Installation

npm i @pdftron/react-native-pdf react-native-pdf react-native-blob-util react-native-fs  react-native-pdf-editor

Required Installation for (npm i @pdftron/react-native-pdf)

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. There are two ways to integrate the SDK:

   • Through pdftron's github repo:

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

     yarn add github:PDFTron/pdftron-react-native
     yarn install

     or

     npm install github:PDFTron/pdftron-react-native --save
     npm install

   • Through pdftron's npm package:

     In MyApp folder, install run the following commands:

     yarn add @pdftron/react-native-pdf
     yarn install

     or

     npm install @pdftron/react-native-pdf
     npm install

Android

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

   android {
       ndkVersion rootProject.ext.ndkVersion
   
       compileSdkVersion rootProject.ext.compileSdkVersion
   
       defaultConfig {
           applicationId "com.reactnativesample"
           minSdkVersion rootProject.ext.minSdkVersion
           targetSdkVersion rootProject.ext.targetSdkVersion
           versionCode 1
           versionName "1.0"
           buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
   +       multiDexEnabled true
   +       manifestPlaceholders = [pdftronLicenseKey:PDFTRON_LICENSE_KEY]
       }
       ...
   }
   ...
   
   dependencies {
   +   implementation "androidx.multidex:multidex:2.0.1"
       ...
   }

2. 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=

3. 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:windowSoftInputMode="adjustResize"
   +     android:windowSoftInputMode="adjustPan"
   +     android:exported="true">
         <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>

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

5. Replace App.js (or App.tsx) with what is shown for NPM or GitHub

6. Finally in the root project directory, run react-native run-android.

iOS

Please update your Podfile accordingly.

1. Open Podfile in the ios folder, add the following line to the target 'MyApp' do ... end block:

   target 'MyApp' do
       # ...
       pod 'PDFNet', podspec: 'https://pdftron.com/downloads/ios/react-native/latest.podspec'
       # ...
   end
   

2. In the ios folder, run pod install.

3. Replace App.js (or App.tsx) with what is shown for NPM or GitHub

4. Finally in the root project directory, run react-native run-ios.

5. (Optional) If you need a close button icon, you will need to add the PNG resources to MyApp as well, i.e. ic_close_black_24px.

Prerequisites

• No license key is required for trial. However, a valid commercial license key is required after trial.
• npm or yarn
• PDFTron SDK >= 9.0.0
• react-native >= 0.60.0
• TypeScript >= 3.4.1 (optional; see TypeScript)

Usage-NPM

This react-native-pdf-editor is used for view the pdf by passing the url and if user want to edit any document ,then change the editable value be true . And the pdf file will be saved in cache in app .

Below the example are the types of file paths that are native to iOS or Android and accepted by the PDFView component.

For view pdf

import React, {useState} from 'react';
import PdfEditor from 'react-native-pdf-editor';

const App = () => {
return (
<View style={{flex:1}}>
<PdfEditor 
 url="https://www.africau.edu/images/default/sample.pdf"
 editable={false}
 <!-- for android -->
 saveToLocalAndroid={true}
 />
</View>
)

}

export default App;