PSPDFKit/react-native PSPDFKit/react-native

  • Stars
    star
    133
  • Rank 272,600 (Top 6 %)
  • Language
    Java
  • License
    Other
  • Created over 8 years ago
  • Updated 11 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
PSPDFKit/react-native
github

PSPDFKit

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Native library for PSPDFKit for iOS, Android and Windows UWP.

React Native Library for PSPDFKit for iOS, Android & Windows UWP. (PDF SDK for React Native)

PDF SDK for React Native

This library requires a valid license of PSPDFKit. Licenses are per platform.

PSPDFKit for React Native exposes the most often used APIs from PSPDFKit. Many of our partners end up forking this repository and adding some custom code to achieve even greater integration with their products, using native code.

Windows is not currently supported, please use the previous version 1.24.9 instead.

Announcements

PSPDFKit

The PSPDFKit SDK is a framework that allows you to view, annotate, sign, and fill PDF forms on iOS, Android, Windows, macOS, and Web.

PSPDFKit Instant adds real-time collaboration features to seamlessly share, edit, and annotate PDF documents.

Support, Issues and License Questions

PSPDFKit offers support for customers with an active SDK license via https://pspdfkit.com/support/request/

Are you evaluating our SDK? That's great, we're happy to help out! PSPDFKit is a commercial product and requires the purchase of a license key when used in production. By default, this library will initialize in demo mode, placing a watermark on each PDF and limiting usage to 60 minutes.

To purchase a license for production use, please reach out to us via https://pspdfkit.com/sales/form/.

To initialize PSPDFKit using a license key, call either of the following before using any other PSPDFKit APIs or features:

To set the license key for both Android and iOS, use:

PSPDFKit.setLicenseKeys('YOUR_REACT_NATIVE_ANDROID_LICENSE_KEY_GOES_HERE', 'YOUR_REACT_NATIVE_IOS_LICENSE_KEY_GOES_HERE');

To set the license key for the currently running platform, use:

PSPDFKit.setLicenseKey('YOUR_REACT_NATIVE_LICENSE_KEY_GOES_HERE');

iOS

Requirements

Getting Started

Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.

  1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory:

    cd ~/Documents

  2. Create the React Native project by running the following command:

    react-native init PSPDFKitDemo

  3. In the terminal app, change the location of the current working directory inside the newly created project:

    cd PSPDFKitDemo

  4. Add the PSPDFKit library:

    yarn add github:PSPDFKit/react-native

  5. Install all the dependencies for the project:

    yarn install

  6. Open your project’s Podfile in a text editor to update the platform to iOS 14, and add the PSPDFKit Podspec:

    open ios/Podfile

    Your Podfile should look like this:

    require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

- platform :ios, '10.0'
+ platform :ios, '14.0'

target 'PSPDFKitDemo' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'PSPDFKitDemoTests' do
    inherit! :complete
    # Pods for testing
  end
+ pod 'react-native-pspdfkit', :path => '../node_modules/react-native-pspdfkit'
+ pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
end

  7. Change the location of the current working directory to the ios folder:

    cd ios

  8. Install the CocoaPods dependencies:

    pod install

  9. Open your project’s Workspace in Xcode:

    open PSPDFKitDemo.xcworkspace

  10. Make sure the deployment target is set to 14.0 or higher:

    deployment-target

  11. Change View controller-based status bar appearance to YES in your project’s Info.plist:

    view-controller-based-status-bar-appearance

  12. Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.

    drag-and-drop-document

  13. Change the location of the current working directory back to the root project folder:

    cd ..

  14. Open your App.js file:

    open App.js

  15. Replace the entire contents of App.js with the following code snippet:

    import React, { Component } from 'react';
import { Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';

const DOCUMENT =
  Platform.OS === 'ios'
    ? 'Document.pdf'
    : 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
  render() {
    return (
      <PSPDFKitView
        document={DOCUMENT}
        configuration={{
          showThumbnailBar: 'scrollable',
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
        }}
        ref="pdfView"
        fragmentTag="PDF1"
        style={{ flex: 1 }}
      />
    );
  }
}

  16. The app is now ready to launch! Go back to the terminal app and run:

    react-native run-ios

Usage

There are 2 different ways on how to use PSPDFKit for React Native on iOS.

  • Present a document via a Native Module modally.
  • Show a PSPDFKit view via a Native UI component.

Depending on your needs you might want to use one or the other.

Native Module

Using the Native Module PSPDFKit.present(), you can present a document with PSPDFKit modally in fullscreen. You can specify the path to the document you want to present, and configuration options.

import React, { Component } from 'react';
import { NativeModules, Text, TouchableHighlight, View } from 'react-native';

export default class App extends Component<{}> {
  _onPressButton() {
    PSPDFKit.present('document.pdf', {
      pageTransition: 'scrollContinuous',
      scrollDirection: 'vertical',
      documentLabelEnabled: true,
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton}>
          <Text style={styles.text}>Tap to Open Document</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Native UI Component

With PSPDFKitView you can use PSPDFKit like any other React component in your app. Using this approach, you have more flexibility over how a document is presented and displayed.

The layout is completely flexible, and can be adjust with flexbox.

For all the props that you can pass to PSPDFKitView, have a look at the source documentation.

This is how you would show a PDF as a React component:

import React, { Component } from 'react';
import { NativeModules } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';

export default class App extends Component<{}> {
  render() {
    return (
      <PSPDFKitView
        document={'document.pdf'}
        configuration={{
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
          documentLabelEnabled: true,
        }}
        style={{ flex: 1, color: '#267AD4' }}
      />
    );
  }
}

Configuration

You can configure the presentation with a configuration dictionary which is a mirror of the PSPDFConfiguration class.

Example - Native Module:

PSPDFKit.present('document.pdf', {
  showThumbnailBar: 'scrollable',
  pageTransition: 'scrollContinuous',
  scrollDirection: 'vertical',
});

Example - Native UI Component:

<PSPDFKitView
  document={'document.pdf'}
  configuration={{
    showThumbnailBar: 'scrollable',
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
  }}
/>

Running the Catalog Project

Take a look at the instructions to get started here.

Running the Native Catalog

Take a look at the instructions to get started here.

Running on Mac Catalyst

Using PSPDFKit for React Native on Mac Catalyst does not currently work due to a Flipper and FlipperKit issue.

If you wish to run your project on Mac Catalyst, please try the following workaround which removes everything related to Flipper and FlipperKit.

Configuration Mapping

On iOS, PSPDFKit for React Native iOS maps most configuration options available in PSPDFConfiguration from JSON. Take a look at the list of all configuration options for more information. For the iOS-specific implementation, check out RCTConvert+PSPDFConfiguration.m for the complete list and for the exact naming of enum values.

Annotations are mapped based on their type name. This is case sensitive. For example, to limit annotation types to ink and highlight, use this:

editableAnnotationTypes: ['Ink', 'Highlight'];

Menu Item Mapping

On iOS, PSPDFKit for React Native allows you to specify a custom grouping for the annotation creation toolbar. Please refer to RCTConvert+PSPDFAnnotationToolbarConfiguration.m for the complete list of menu items. To set them just specify the menuItemGrouping prop on the PSPDFKitView. The format used is as follows:

[
  menuItem,
  { key: menuItem, items: [subItem, subItem]},
  ...
]

Customize the Toolbar Buttons

You can customize the toolbar buttons on the Native UI View component by specifying the toolbar buttons using setLeftBarButtonItems and setRightBarButtonItems, like so:

pdfView.setRightBarButtonItems(
  ['thumbnailsButtonItem', 'searchButtonItem', 'annotationButtonItem'],
  'document',
  false,
);

Please refer to RCTConvert+UIBarButtonItem.m for the complete list of bar button items.

Also, please take a look at the ToolbarCustomization example from our Catalog app.

For a more detailed description of toolbar customizations, refer to our Customizing the Toolbar guide for iOS and Android.

Process Annotations

PSPDFKit for React Native allows you to create a new document with processed (embedded, flattenned, removed, or printed) annotations on Android and iOS using the PSPDFKit.processAnnotations(annotationChange, annotationType, sourceDocumentPath, processedDocumentPath) function. In the snippet below, we add a button which flattens all the annotations of the document from the currently displayed PSPDFKitView in a newly processed PDF file:

<View>
  <Button
    onPress={async () => {
      const processedDocumentPath =
        RNFS.DocumentDirectoryPath + '/flattened.pdf';
      // Delete the processed document if it already exists.
      RNFS.exists(processedDocumentPath)
        .then(exists => {
          if (exists) {
            RNFS.unlink(processedDocumentPath);
          }
        })
        .then(() => {
          // First, save all annotations in the current document.
          this.refs.pdfView.saveCurrentDocument().then(success => {
            if (success) {
              // Then, flatten all the annotations
              PSPDFKit.processAnnotations(
                'flatten',
                'all',
                sourceDocumentPath,
                processedDocumentPath,
              )
                .then(success => {
                  if (success) {
                    // And finally, present the newly processed document with flattened annotations.
                    PSPDFKit.present(processedDocumentPath, {});
                  } else {
                    alert('Failed to embed annotations.');
                  }
                })
                .catch(error => {
                  alert(JSON.stringify(error));
                });
            } else {
              alert('Failed to save current document.');
            }
          });
        });
    }}
    title="Flatten All Annotations"
  />
</View>

For a runnable example, please take a look at the AnnotationProcessing example from our Catalog app.

Android

Requirements

Getting Started

Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.

  1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory:

    cd ~/Documents

  2. Create the React Native project by running the following command:

    react-native init PSPDFKitDemo

  3. In the terminal app, change the location of the current working directory inside the newly created project:

    cd PSPDFKitDemo

  4. Add the PSPDFKit library:

    yarn add github:PSPDFKit/react-native

  5. Install all the dependencies for the project:

    yarn install

  6. Open your project’s build.gradle file:

    open android/build.gradle

  7. Add the PSPDFKit repository to download the PSPDFKit library:

    ...
 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://customers.pspdfkit.com/maven/'
+        }
...

  8. Open the app’s build.gradle file:

    open android/app/build.gradle

  9. Enable multidex support:

    ...
  defaultConfig {
      applicationId 'com.pspdfkitdemo'
      minSdkVersion rootProject.ext.minSdkVersion
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName '1.0'
+     multiDexEnabled true
  }
...

  10. Add the PDF document you want to display to your application. You can download this QuickStart Guide PDF as an example.

  11. Create the assets directory:

    mkdir android/app/src/main/assets

  12. Copy a PDF document into your assets directory:

    cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf

  13. Open your App.js file:

    open App.js

  14. Replace the entire contents of App.js with the following code snippet:

    import React, { Component } from 'react';
import { Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';

const DOCUMENT =
  Platform.OS === 'ios'
    ? 'Document.pdf'
    : 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
  render() {
    return (
      <PSPDFKitView
        document={DOCUMENT}
        configuration={{
          showThumbnailBar: 'scrollable',
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
        }}
        ref="pdfView"
        fragmentTag="PDF1"
        style={{ flex: 1 }}
      />
    );
  }
}

  15. The app is now ready to launch! Go back to the terminal app and run:

    react-native run-android

Running the Catalog Project

Take a look at the instructions to get started here.

Running the Native Catalog

Take a look at the instructions to get started here.

Configuration

Upload PDF to device

To copy a pdf document to your local device storage:

adb push "document.pdf" "/sdcard/document.pdf"

Bundle PDF inside the APK's assets

To bundle a pdf document in the Android app, simply copy it the Android assets folder, for the Catalog app is samples/PDFs.

Viewer options

You can configure the builder with a dictionary representation of the PSPDFConfiguration object. Take a look at the list of all configuration options for more information. For the Android-specific implementation, check out ConfigurationAdapter.java.

const CONFIGURATION = {
  pageTransition: 'scrollPerSpread',
  showPageNumberOverlay: true,
  grayScale: true,
  showPageLabels: false,
  scrollDirection: 'vertical',
};

Native UI Component

Just like on iOS we also support integrating PSPDFKit directly into the react-native view hierarchy. There are a few thing you need to consider when using this approach:

  • Your activity hosting the react component needs to extend from ReactFragmentActivity.
  • Because of issues in react-native our PdfView needs to call layout and dispatchOnGlobalLayout on every frame, this might negatively affect your apps performance or even cause it to misbehave.
  • PSPDFKitView doesn't yet support all the features (outline, bookmarks, thubmnail grid, view settings) using PSPDFKit.present provides.

Menu Item Mapping

On Android, PSPDFKit for React Native allows you to specify a custom grouping for the annotation creation toolbar. Please refer to ReactGroupingRule.java for the complete list of menu items. To set them just specify the menuItemGrouping prop on the PSPDFKitView. The format used is as follows:

[
  menuItem,
  { key: menuItem, items: [subItem, subItem]},
  ...
]

Update

Upgrading yarn's lock file is required in order to update react-native-pspdfkit module in a project that has been already setup following the steps in Getting Started section. From root project folder (e.g.YourApp for upgrading example project) launch yarn upgrade.

Migrate from PSPDFKit version 2.9.x to 3.0.0

After launching yarn upgrade, apply step 7, step 10 and step 12 from Getting Started section. Enable MultiDex in YourApp/android/app/build.gradle (note one place to edit):

...
android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"

defaultConfig {
    applicationId "com.yourapp"
+   multiDexEnabled true
    minSdkVersion 16
    targetSdkVersion 25
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}
...

Remove pspdfkit-lib folder in YourApp/android/. In YourApp/android/settings.gradle remove the old reference to pspdfkit-lib (note one place to edit):

 project(':react-native-pspdfkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pspdfkit/android')
 include ':app'
-include ':pspdfkit-lib'

Migrate from PSPDFKit version 3.3.3 to 4.0.x

After launching yarn upgrade, apply step 6, step 8 and step 10 from Getting Started section. Enable MultiDex in YourApp/android/app/build.gradle (note four place to edit):

...
android {
-   compileSdkVersion 25
+   compileSdkVersion 26
-   buildToolsVersion "25.0.2"
+   buildToolsVersion "26.0.1"

defaultConfig {
    applicationId "com.yourapp"
    multiDexEnabled true
-   minSdkVersion 16
+   minSdkVersion 19
-   targetSdkVersion 25
+   targetSdkVersion 26
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}
...

Troubleshooting

For Troubleshooting common issues you might encounter when setting up PSPDFKit for React Native, please refer to the Troubleshooting section.

License

This project can be used for evaluation or if you have a valid PSPDFKit license. All items and source code Copyright Β© 2010-2023 PSPDFKit GmbH.

See LICENSE for details.

More Repositories

1

PSPDFKit-Demo

The leading framework for displaying and annotating PDFs in your iOS apps.
275
star
2

PDFXKit

A drop-in replacement for Apple PDFKit powered by our PSPDFKit framework under the hood.
Objective-C
227
star
3

pspdfkit-flutter

PSPDFKit library for Flutter. Flutter is Google's mobile UI framework for crafting high-quality native experiences on iOS and Android in record time.
Dart
89
star
4

pspdfkit-web-example-react

Add PDF Support to Your Web App in No Time with PSPDFKit for Web
JavaScript
59
star
5

pspdfkit-web-examples-catalog

PSPDFKit for Web Examples Catalog
JavaScript
59
star
6

Appcelerator-iOS

Appcelerator Titanium Bridge for PSPDFKit for iOS
Objective-C
37
star
7

PSPDFKitSwift

Swift wrapper for PSPDFKit - both for iOS and macOS.
36
star
8

PSPDFKit-SP

Out-of-the-box PDF functionality for your iOS app
Swift
34
star
9

pspdfkit-ios-catalog

Example projects for PSPDFKit, the iOS PDF SDK.
Swift
32
star
10

Cordova-iOS

This is the official plugin to use PSPDFKit with Apache Cordova/PhoneGap/Ionic
29
star
11

pspdfkit-web-example-vue

Use PSPDFKit for Web in a Vue.js application
JavaScript
22
star
12

pspdfkit-server-example-nodejs

Sample for PSPDFKit Server and Instant
JavaScript
19
star
13

Xamarin-Android

PSPDFKit for Android wrapper for the Xamarin platform.
C#
19
star
14

awesome-pspdfkit

A collection of awesome things regarding PSPDFKit ecosystem
TypeScript
16
star
15

Cordova-Android

Cordova Wrapper for PSPDFKit for Android
15
star
16

Xamarin-iOS

PSPDFKit for iOS wrapper for the Xamarin platform.
C#
14
star
17

pspdfkit-electron-example

PSPDFKit for Electron Example Application
JavaScript
13
star
18

pspdfkit-web-example-webpack

Use PSPDFKit for Web in a Webpack setup
JavaScript
13
star
19

PSPDFKit-Cordova

Cordova / Ionic PDF Library by PSPDFKit
Objective-C
11
star
20

pspdfkit-web-example-pwa

Create a progressive web app (PWA) with PSPDFKit for Web
JavaScript
10
star
21

pspdfkit-android-catalog

PSPDFKit for Android Catalog app
Kotlin
10
star
22

pspdfkit-server-example-rails

Sample for PSPDFKit Server and Instant
Ruby
9
star
23

PSPDFKitOCR-SP

Convert scanned documents to searchable text
Swift
7
star
24

pspdfkit-web-example-nextjs

JavaScript
7
star
25

pspdfkit-android-simple-example

Simple PSPDFKit for Android example app
Java
7
star
26

pspdfkit-ios-swiftui-document-browser-example

PSPDFKit for iOS - SwiftUIDocumentBrowser Example
Swift
7
star
27

Tutorials

Tutorials around using PSPDFKit
Swift
6
star
28

pspdfkit-web-example-typescript

Use PSPDFKit for Web with TypeScript in a Webpack setup
JavaScript
5
star
29

pspdfkit-web-example-angular

Example of how to integrate PSPDFKit for Web in an Angular project
TypeScript
5
star
30

pspdfkit-web-signing-service-example

Example of a PSPDFKit Web (Server and Standalone) compatible digital signature signing server
JavaScript
5
star
31

pspdfkit-server-example-asp-net

HTML
4
star
32

ai-document-assistant-demo

AI Document Assistant for PSPDFKit Demo showcases how to interact with PDFs using natural language commands powered by AI, integrated with PSPDFKit for Web.
JavaScript
3
star
33

pspdfkit-jetpack-compose-pdf-viewer

Example project demonstrating how to build a PDF Viewer for Jetpack Compose with PSPDFKit for Android.
Kotlin
3
star
34

Instant-SP

Enable document collaboration in your app
Swift
3
star
35

Xamarin-UWP

Xamarin example app for PSPDFKit for Windows UWP. (Windows PDF SDK)
C#
3
star
36

open-pdf-with-reasonml

Open PDF with ReasonML example
Reason
2
star
37

pspdfkit-web-example-nuxtjs

This example shows how to integrate PSPDFKit for Web into a Nuxt.js app. pspdfkit.com
Vue
2
star
38

pspdfkit-android-instant-example

Instant for PSPDFKit for Android client example app
Java
2
star
39

pspdfkit-android-customfonts-example

Example app showing how to embed custom fonts into an app for rendering PDFs with PSPDFKit for Android
Kotlin
2
star
40

pspdfkit-sp-online-filehandler

Sample project of a PSPDFKit SharePoint Online Filehandler
TypeScript
2
star
41

pspdfkit-ios-instant-example

PSPDFKit for iOS - Instant example
Swift
1
star
42

pspdfkit-web-example-laravel

Example project demonstrating how to integrate PSPDFKit with the Laravel Framework
JavaScript
1
star
43

pspdfkit-web-cloudhsm-signing-example

Example that shows how to integrate AWS CloudHSM to produce signatures for PSPDFKit for Web
JavaScript
1
star
44

pspdfkit-web-example-svelte

This example shows how to integrate PSPDFKit for Web into an Svelte app. https://pspdfkit.com/
JavaScript
1
star
45

pspdfkit-web-example-gatsbyjs

This example shows how to integrate PSPDFKit for Web into an GatsbyJS app. https://pspdfkit.com/
JavaScript
1
star
46

pspdfkit-sp-online-webpart

Sample SPFx project showing of a PSPDFKit SharePoint Online webpart
TypeScript
1
star
47

dotnet-pdf-library-for-ios

How to build a PDF Viewer and Editor for iOS using .NET (C#) with PSPDFKit.NET (iOS).
C#
1
star
48

pspdfkit-web-example-nextjs-15

TypeScript
1
star