New: Create and edit Word documents with DOCX Editor in WebViewer

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

By Adrienne Kwan | 2021 Dec 16

Sanity Image
Read time

3 min

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:

Create an App with React Native and TypeScript

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.

//@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

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

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

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

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

 onLeadingNavButtonPressed = () => {
   console.log('leading nav button pressed');
   if (Platform.OS === 'ios') {
         {text: 'OK', onPress: () => console.log('OK Pressed')},
       { cancelable: true }
   } else {

 render() {
   const path = "";

   return (
       leadingNavButtonIcon={Platform.OS === 'ios' ? 'ic_close_black_24px.png' : 'ic_arrow_back_white_24dp'}

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.


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:

Get started with Apryse 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.

Sanity Image

Adrienne Kwan

Share this post