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)

• 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.

• 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

• 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"
      ...
  }
  

• 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=
  

• 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>
  

• 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 {
  

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

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

iOS

Please update your Podfile accordingly.

• 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
  

• In the ios folder, run pod install.

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

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

• (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}
 />
</View>
)

}

export default App;