Home

All Blogs

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

Adrienne Kwan

Published December 16, 2021

Updated July 30, 2024

3 min

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

Adrienne Kwan

Related Products

Mobile SDK

React Native PDF Library Product link

Android PDF SDK Product link

iOS PDF SDK Product link

tutorial

react native

typescript

view

pdf

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 Apryse SDK, for complete document editing and annotating ability, and React Native.

We’ll be using Apryse’s recently released TypeScript support for the Apryse 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 Apryse 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:

If you are looking for information relating to development within browser-based applications, check out our comprehensive WebViewer Guide.

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: