TypeScript is one of the most popular and fastest-growing flavors of JavaScript, and with good reason: as a superset of JavaScript, TypeScript is easy to learn and ease to use; more importantly, TypeScript’s support for static types helps to reduce critical errors with more clarity into code behavior, and puts developers on the same page -- without requiring them to be in the same room!

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:

preview

Step 1: Create an App with React Native and TypeScript

First, let's create a simple React Native app using the TypeScript template.

Note: If you previously installed react-native-cli globally, please remove it first to prevent unexpected behaviour. You can follow these steps for npm and for yarn.

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

Install 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

The instructions on our GitHub will show you how to add PDFTron's React Native module to the app. Follow steps 1-5 for Android, and steps 1-2 for iOS.

Helpful tip:
Double-check your dependencies by running npm ls or looking in package-lock.json. Make sure your @react-native-community/cli dependencies match the versions required by react-native.

Step 4: View the Document

Replace App.tsx with the contents below:

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

 constructor(props: Props) {
   super(props);

   RNPdftron.initialize("Insert commercial license key here after purchase");
   RNPdftron.enableJavaScript(true);
 }

 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() {
   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',
 }
});

That's it!

You can now run the app with the following commands:

  • iOS: npm run ios, yarn run ios, or open ios/PDFDemo.xcworkspace in Xcode and click the triangular Run button.
  • Android: npm run android, yarn run android or 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.

Conclusion

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:

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 .