How to Build a Typesafe PDF Viewer with React Native and TypeScript

By Adrienne Kwan | 2021 Dec 16

3 min

Step 1: Create an App with React Native and TypeScript

Copied to clipboard

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.

//@data {"m":true}//
npm i -g @react-native-community/cli
react-native init PDFDemo --template react-native-template-typescript --npm
cd PDFDemo

//@data {"m":true}//
yarn global add @react-native-community/cli
react-native init PDFDemo --template react-native-template-typescript
cd PDFDemo

Step 2: Install the PDF SDK Library

Copied to clipboard

Install react-native-pdftron by calling:

//@data {"m":true}//
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

//@data {"m":true}//
yarn add github:PDFTron/pdftron-react-native
yarn add @react-native-community/cli --dev
yarn add @react-native-community/cli-platform-android --dev
yarn add @react-native-community/cli-platform-ios --dev
yarn install

Step 3: Support Android & iOS

Copied to clipboard

The instructions on our GitHub will show you how to add Apryse'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

Copied to clipboard

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

Copied to clipboard

As you can see, creating a typesafe PDF viewer is quick and easy with Apryse'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 Apryse SDK—such as: