@archireport/react-native-pspdfkit
Advanced tools
A React Native module for the PSPDFKit library.
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.
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.
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! To make sure this is fast, please use a work email and have someone from your company fill out our sales form: https://pspdfkit.com/sales/
Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.
~/Documents/ directory:cd ~/Documents
react-native init PSPDFKitDemo
cd PSPDFKitDemo
yarn add github:PSPDFKit/react-native
yarn install
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, '13.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
ios folder:cd ios
pod install
open PSPDFKitDemo.xcworkspace
YES in your project’s Info.plist:
cd ..
App.js file:open App.js
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={{
thumbnailBarMode: 'scrollable',
pageTransition: 'scrollContinuous',
scrollDirection: 'vertical',
}}
ref="pdfView"
fragmentTag="PDF1"
style={{flex: 1}}
/>
);
}
}
react-native run-ios
There are 2 different ways on how to use PSPDFKit for React Native on iOS.
Depending on your needs you might want to use one or the other.
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";
var PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey("YOUR_LICENSE_KEY_GOES_HERE");
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>
);
}
}
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";
var PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey("YOUR_LICENSE_KEY_GOES_HERE");
export default class App extends Component<{}> {
render() {
return (
<PSPDFKitView
document={"document.pdf"}
configuration={{
pageTransition: "scrollContinuous",
scrollDirection: "vertical",
documentLabelEnabled: true
}}
style={{ flex: 1, color: "#267AD4" }}
/>
);
}
}
You can configure the presentation with a configuration dictionary which is a mirror of the PSPDFConfiguration class.
Example - Native Module:
PSPDFKit.present("document.pdf", {
thumbnailBarMode: "scrollable",
pageTransition: "scrollContinuous",
scrollDirection: "vertical"
});
Example - Native UI Component:
<PSPDFKitView
document={"document.pdf"}
configuration={{
thumbnailBarMode: "scrollable",
pageTransition: "scrollContinuous",
scrollDirection: "vertical"
}}
/>
Take a look at the instructions to get started here.
Take a look at the instructions to get started here.
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.
On iOS, PSPDFKit for React Native iOS maps most configuration options available in PSPDFConfiguration from JSON. Please refer to 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"];
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]},
...
]
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.
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.
Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.
~/Documents/ directory:cd ~/Documents
react-native init PSPDFKitDemo
cd PSPDFKitDemo
yarn add github:PSPDFKit/react-native
yarn install
build.gradle file:open android/build.gradle
...
allprojects {
repositories {
mavenLocal()
+ maven {
+ url 'https://customers.pspdfkit.com/maven/'
+ }
...
build.gradle file:open android/app/build.gradle
multidex support:...
defaultConfig {
applicationId "com.pspdfkitdemo"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
+ multiDexEnabled true
}
...
Add the PDF document you want to display to your application. You can download this QuickStart Guide PDF as an example.
Create the assets directory:
mkdir android/app/src/main/assets
assets directory:cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf
App.js file:open App.js
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={{
thumbnailBarMode: 'scrollable',
pageTransition: 'scrollContinuous',
scrollDirection: 'vertical',
}}
ref="pdfView"
fragmentTag="PDF1"
style={{flex: 1}}
/>
);
}
}
react-native run-android
Take a look at the instructions to get started here.
Take a look at the instructions to get started here.
To copy a pdf document to your local device storage:
adb push "document.pdf" "/sdcard/document.pdf"
To bundle a pdf document in the Android app, simply copy it the Android assets folder, for the Catalog app is samples/PDFs.
You can configure the builder with a dictionary representation of the PSPDFConfiguration object. Check ConfigurationAdapter.java for all the parameters available.
const CONFIGURATION = {
startPage: 3,
scrollContinuously: false,
showPageNumberOverlay: true,
grayScale: true,
showPageLabels: false,
pageScrollDirection: "vertical"
};
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:
ReactFragmentActivity.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.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]},
...
]
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.
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'
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"
}
}
...
The following constants are available on the PSPDFKit export:
versionString (String) PSPDFKit version number.present(document : string, configuration : readable map) : voidShows the pdf document from the local device filesystem, or your app's assets.
file:///sdcard/document.pdf will open the document from local device filesystem.file:///android_asset/document.pdf will open the document from your app's assets.configuration can be empty {}.
Windows UWP is not currently supported on master, please follow the integration steps on the windows-support branch.
This project can be used for evaluation or if you have a valid PSPDFKit license. All items and source code Copyright © 2010-2021 PSPDFKit GmbH.
See LICENSE for details.
Please ensure you signed our CLA so we can accept your contributions.
FAQs
React Native PDF Library by PSPDFKit
The npm package @archireport/react-native-pspdfkit receives a total of 0 weekly downloads. As such, @archireport/react-native-pspdfkit popularity was classified as not popular.
We found that @archireport/react-native-pspdfkit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."