In this tutorial, we show how you can create a simple, typesafe PDF viewer, using the PDFTron SDK, for complete document editing and annotating ability, and React Native.
We’ll be using PDFTron’s recently released TypeScript support for the PDFTron React Native SDK. If you are new to React Native, it is an open-source framework for building native mobile apps in a single codebase. The PDFTron SDK uses React Native to create cross-platform PDF viewers with the fluid look and feel of traditional native applications.
By the end of this tutorial, you will have built something like this:
Step 1: Create an App with React Native and TypeScript
First, let's create a simple React Native app using the TypeScript template.
npm i -g @react-native-community/cli react-native init PDFDemo --template react-native-template-typescript --npm cd PDFDemo
Step 2: Install the PDF SDK Library
react-native-pdftron by calling:
npm install github:PDFTron/pdftron-react-native --save npm install @react-native-community/cli --save-dev npm install @react-native-community/cli-platform-android --save-dev npm install @react-native-community/cli-platform-ios --save-dev npm install
Step 3: Support Android & iOS
npm lsor looking in
package-lock.json. Make sure your
@react-native-community/clidependencies match the versions required by
Step 4: View the Document
App.tsx with the contents below:
You can now run the app with the following commands:
npm run ios,
yarn run ios, or open
ios/PDFDemo.xcworkspacein Xcode and click the triangular Run button.
npm run android,
yarn run androidor open
android/in Android Studio and click the triangular Run button.
You can also enjoy the benefits of TypeScript! Hover over code to see useful type information, or start adding props to the
DocumentView component to see suggested APIs.
Find the full source code with our React Native sample.
As you can see, creating a typesafe PDF viewer is quick and easy with PDFTron's React Native SDK and TypeScript support.
You can now consider customizing the PDF viewer UI to your desired look and feel, and leverage any number of other unique features of the PDFTron SDK -- such as:
- Direct conversion of MS Office to PDF
- Annotation creation & editing
- Form filling
- Digital signatures to uniquely identify signers
- Page manipulation , including page deletion and rearranging
- Layers to easily view or hide content
- Redaction to completely remove classified information
- System file sharing (such as email or to another app)
- and many more !
Get started with PDFTron for React Native and let us know what you build!
We hope you found this article helpful! If you have any questions or comments, don’t hesitate to contact us .