How to Build a Cross-Platform PDF Viewer with React and React Native

By Shirley Gong | 2020 Oct 14

3 min

Setup

Copied to clipboard

First, let's create a simple expo app:

npm install react react-dom react-native-web
npm install expo-cli --global
expo init my-app
cd my-app
expo start

This will create an app that can work on native and the web. See the detailed getting started guide from React Native for Web.

Integrate with Apryse SDK

Copied to clipboard

Next, we will add Apryse's React Native SDK as well as WebViewer into the app.

Interested in learning more on WebViewer? Check out our comprehensive guide here.

Native

Apryse's React Native SDK is a native module, therefore, we will first need to eject the native modules:

expo eject

Follow the instructions to add Apryse's React Native module to the app. Follow all of the cross-platform instructions. Then, follow step 1-5 for Android, and step 1-3 for iOS.

Android

Create a local.properties file inside the android folder with your Android SDK location, for example:

ndk.dir=/Users/<user-name>/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/<user-name>/Library/Android/sdk

Note: Replace with your actual path.

Web

Follow the instructions to add WebViewer to the app. Follow step 1-2.

Then, add the following to package.json:

"scripts": {
  "postinstall": "node tools/copy-webviewer-files.js"
},

Lastly, create a tools folder, and add the following copy-webviewer-files.js file in it: https://github.com/PDFTron/webviewer-react-sample/tree/master/tools

Create the PDF Viewer

Copied to clipboard

Create a components/viewer folder, then add the following files:

Viewer.native.tsx - the native implementation of the viewer
Viewer.tsx - the web implementation of the viewer
package.json - exports the component

Add the following to the package.json:

{
  "name": "Viewer",
  "version": "0.0.0",
  "private": true,
  "main": "./Viewer"
}

Native Viewer

Add in Viewer.native.tsx:

import React from 'react';
import {useEffect} from 'react';

import { DocumentView, RNPdftron } from 'react-native-pdftron';

type ViewerProps = {
  document: string
}

const MyComponent = ({ document }: ViewerProps) => {

  useEffect(() => {
    RNPdftron.initialize("Insert commercial license key here after purchase");
  }, []);

  return (
    <DocumentView
      document={document}
      padStatusBar
    />
  );
};

export default MyComponent;

WebViewer

Add in Viewer.tsx:

import React from 'react';
import {useEffect, useRef} from 'react';
import WebViewer from '@pdftron/webviewer';

type ViewerProps = {
  document: string
}

const MyComponent = ({ document }: ViewerProps) => {
  const viewer = useRef<HTMLDivElement>(null);

  useEffect(() => {
    WebViewer(
      {
        path: 'lib',
        initialDoc: document,
      },
      viewer.current as HTMLDivElement,
    ).then((instance) => {
        // you can now call WebViewer APIs here...
      });
  }, []);

  return (
    <div className="MyComponent">
      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
    </div>
  );
};

export default MyComponent;

Use the PDF Viewer

Copied to clipboard

In App.tsx, this viewer component can now be used:

return (
  <View style={styles.container}>
    <MyViewer document={"https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf"}/>
  </View>
);

This will pick up the native component on the mobile and the WebViewer component on the web. The rest of your application can share the same code, both for business logic and the UI.

That's it!

You can find full source code from https://github.com/PDFTron/pdftron-react-and-react-native-sample.

Conclusion

Copied to clipboard

As you can see, creating a cross-platform PDF viewer that runs on both mobile and the web using Apryse SDK isn’t complicated when using Apryse's React-Native SDK, WebViewer, and expo.

Get started with Apryse for React Native and WebViewer 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.