@pdftron/react-native-pdf
Advanced tools
[!IMPORTANT] This repository serves as a wrapper around the native SDKs. It exposes only a limited set of APIs intended for basic viewing, annotating and removing components from the out‑of‑box UI. Any advanced customization or access to lower‑level functionality should be performed directly through the native SDKs rather than this wrapper.
APIs are available on the API page.
| Android | iOS |
|---|---|
 |  |
Version 2.0.2 is the last stable release for the legacy UI.
The release can be found here: https://github.com/ApryseSDK/pdftron-react-native/releases/tag/legacy-ui.
Version 3.0.3-38 is the last stable release for pre-Java 17.
The release can be found here: https://github.com/ApryseSDK/pdftron-react-native/releases/tag/pre-java17.
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:
In MyApp folder, install react-native-pdftron by calling:
yarn add github:ApryseSDK/pdftron-react-native
yarn install
or
npm install github:ApryseSDK/pdftron-react-native --save
npm install
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
Add the following in your android/app/build.gradle file:
defaultConfig {
applicationId "com.example.myapp"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0.0"
+ resValue("string", "PDFTRON_LICENSE_KEY", "\"LICENSE_KEY_GOES_HERE\"")
}
Add the following to your android/app/src/main/AndroidManifest.xml file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapp">
<!-- Required if you want to work with online documents -->
+ <uses-permission android:name="android.permission.INTERNET" />
<!-- Required if you want to record audio annotations -->
+ <uses-permission android:name="android.permission.RECORD_AUDIO" />
<application
...
+ android:largeHeap="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="@string/PDFTRON_LICENSE_KEY" />
...
<activity
...
- android:windowSoftInputMode="adjustResize"
+ android:windowSoftInputMode="adjustPan">
</activity>
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.
[!IMPORTANT] As of March 2025, use of the podspec distributed specifically for the PDFTron React Native wrapper (
https://pdftron.com/downloads/ios/react-native/latest.podspec) is deprecated and no longer maintained.Please update to the latest podspec provided for the wrapper as soon as possible (
https://www.pdftron.com/downloads/ios/cocoapods/xcframeworks/pdfnet/latest.podspec)Please update your
Podfileaccordingly.
Open Podfile in the ios folder, add the following line to the target 'MyApp' do ... end block:
target 'MyApp' do
# ...
pod 'PDFNet', podspec: 'https://www.pdftron.com/downloads/ios/cocoapods/xcframeworks/pdfnet/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.
If you installed through GitHub, replace App.js (or App.tsx if you are using TypeScript) with the code below.
If you set your path variable to point to a local storage file,
then the PermissionsAndroid component is required to ensure that storage permission is properly granted.
Within this example there are several sections of commented out code that work together to handle storage permissions.
Below the example are the types of file paths that are native to iOS or Android and accepted
by the DocumentView component.
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
PermissionsAndroid,
BackHandler,
NativeModules,
Alert,
} from "react-native";
import { DocumentView, RNPdftron } from "react-native-pdftron";
type Props = {};
export default class App extends Component<Props> {
// If you are using TypeScript, use `constructor(props: Props) {`
// Otherwise, use:
constructor(props) {
super(props);
// Uses the platform to determine if storage permisions have been automatically granted.
// The result of this check is placed in the component's state.
// this.state = {
// permissionGranted: Platform.OS === 'ios' ? true : false
// };
RNPdftron.initialize("Insert commercial license key here after purchase");
RNPdftron.enableJavaScript(true);
}
// Uses the platform to determine if storage permissions need to be requested.
// componentDidMount() {
// if (Platform.OS === 'android') {
// this.requestStoragePermission();
// }
// }
// Requests storage permissions for Android and updates the component's state using
// the result.
// async requestStoragePermission() {
// try {
// const granted = await PermissionsAndroid.request(
// PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
// );
// if (granted === PermissionsAndroid.RESULTS.GRANTED) {
// this.setState({
// permissionGranted: true
// });
// console.log("Storage permission granted");
// } else {
// this.setState({
// permissionGranted: false
// });
// console.log("Storage permission denied");
// }
// } catch (err) {
// console.warn(err);
// }
// }
onLeadingNavButtonPressed = () => {
console.log("leading nav button pressed");
if (Platform.OS === "ios") {
Alert.alert(
"App",
"onLeadingNavButtonPressed",
[{ text: "OK", onPress: () => console.log("OK Pressed") }],
{ cancelable: true }
);
} else {
BackHandler.exitApp();
}
};
render() {
// If the component's state indicates that storage permissions have not been granted,
// a view is loaded prompting users to grant these permissions.
// if (!this.state.permissionGranted) {
// return (
// <View style={styles.container}>
// <Text>
// Storage permission required.
// </Text>
// </View>
// )
// }
const path =
"https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf";
return (
<DocumentView
document={path}
showLeadingNavButton={true}
leadingNavButtonIcon={
Platform.OS === "ios"
? "ic_close_black_24px.png"
: "ic_arrow_back_white_24dp"
}
onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
});
(iOS) For app bundle file path:
document = "sample";
(Android) For local storage file path:
document = "file:///storage/emulated/0/Download/sample.pdf";
(Android) For raw resource path (include file extension):
document = "android.resource://mypackagename/raw/sample.pdf";
(Android) For content Uri:
document = "content://...";
If you installed through NPM package, Replace App.js (or App.tsx if you are using TypeScript) with the code below.
If you set your path variable to point to a local storage file,
then the PermissionsAndroid component is required to ensure that storage permission is properly granted.
Within this example there are several sections of commented out code that work together to handle storage permissions.
Below the example are the types of file paths that are native to iOS or Android and accepted
by the DocumentView component.
if you are using the npm package use this instead
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
PermissionsAndroid,
BackHandler,
NativeModules,
Alert,
} from "react-native";
import { DocumentView, RNPdftron } from "@pdftron/react-native-pdf";
type Props = {};
export default class App extends Component<Props> {
// If you are using TypeScript, use `constructor(props: Props) {`
// Otherwise, use:
constructor(props) {
super(props);
// Uses the platform to determine if storage permisions have been automatically granted.
// The result of this check is placed in the component's state.
// this.state = {
// permissionGranted: Platform.OS === 'ios' ? true : false
// };
RNPdftron.initialize("Insert commercial license key here after purchase");
RNPdftron.enableJavaScript(true);
}
// Uses the platform to determine if storage permissions need to be requested.
// componentDidMount() {
// if (Platform.OS === 'android') {
// this.requestStoragePermission();
// }
// }
// Requests storage permissions for Android and updates the component's state using
// the result.
// async requestStoragePermission() {
// try {
// const granted = await PermissionsAndroid.request(
// PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
// );
// if (granted === PermissionsAndroid.RESULTS.GRANTED) {
// this.setState({
// permissionGranted: true
// });
// console.log("Storage permission granted");
// } else {
// this.setState({
// permissionGranted: false
// });
// console.log("Storage permission denied");
// }
// } catch (err) {
// console.warn(err);
// }
// }
onLeadingNavButtonPressed = () => {
console.log("leading nav button pressed");
if (Platform.OS === "ios") {
Alert.alert(
"App",
"onLeadingNavButtonPressed",
[{ text: "OK", onPress: () => console.log("OK Pressed") }],
{ cancelable: true }
);
} else {
BackHandler.exitApp();
}
};
render() {
// If the component's state indicates that storage permissions have not been granted,
// a view is loaded prompting users to grant these permissions.
// if (!this.state.permissionGranted) {
// return (
// <View style={styles.container}>
// <Text>
// Storage permission required.
// </Text>
// </View>
// )
// }
const path =
"https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf";
return (
<DocumentView
document={path}
showLeadingNavButton={true}
leadingNavButtonIcon={
Platform.OS === "ios"
? "ic_close_black_24px.png"
: "ic_arrow_back_white_24dp"
}
onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
});
(iOS) For app bundle file path:
document = "sample";
(Android) For local storage file path:
document = "file:///storage/emulated/0/Download/sample.pdf";
(Android) For raw resource path (include file extension):
document = "android.resource://mypackagename/raw/sample.pdf";
(Android) For content Uri:
document = "content://...";
PDFTron React Native introduced support for TypeScript in version 3.0.0. This update mainly benefits those who already use TypeScript in their applications. It also provides certain benefits to all customers, including those who use JavaScript without TypeScript.
To get access to TypeScript support, simply update your PDFTron React Native dependency to version 3.0.0 or higher.
For non-TypeScript users, updating your PDFTron React Native dependency to version 3.0.0 or higher will not automatically install TypeScript itself, and you can continue to use the library as before (without TypeScript support). If you currently do not use TypeScript itself in your project and would like to, see Adding TypeScript to an Existing Project.
Regardless of whether you use TypeScript, the following benefits are available:
dev branch (see Contributing).If you have questions, head to the FAQ's Integration section for Android and iOS.
If you are an existing TypeScript user, then the custom typings will be available to you simply by updating your PDFTron React Native dependency to version 3.0.0 or higher.
Note:
any.noEmitOnError in your tsconfig.json.See Contributing
See License
FAQs
React Native Pdftron
The npm package @pdftron/react-native-pdf receives a total of 3,355 weekly downloads. As such, @pdftron/react-native-pdf popularity was classified as popular.
We found that @pdftron/react-native-pdf demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.