Open Remote PDF Files in React Native

PSPDFKit usually works best with PDF documents on the local file system of your device. There are several reasons for using local file system documents (these include performance, cache control, and battery impact).

However, if you have a PDF document that isn’t on the local file system, you can open the remote document by passing in the remote URL when creating the PSPDFKitView component:

import React, { Component } from 'react';
import { AppRegistry, Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import { NativeModules } from 'react-native';

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null);

const DOCUMENT = "https://pspdfkit.com/downloads/pspdfkit-react-native-quickstart-guide.pdf";
export default class App extends Component<{}> {
    var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();

    render() {
        return (
            <PSPDFKitView
             document={DOCUMENT}
             ref={pdfRef}
             fragmentTag="PDF1"
             style={{ flex: 1 }}
            />
        );
    }
}

AppRegistry.registerComponent('App', () => App);

This will download the remote document and cache it. Files downloaded from a remote URL using this method are read-only by default, and annotations cannot be saved, as the source file could change at any time. If you wish to annotate a remote document or make changes to it, you need to specify the location where the downloaded document should be stored using the RemoteDocumentConfiguration configuration object:

import React, { Component } from 'react';
import { AppRegistry, Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import { NativeModules } from 'react-native';

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null);

const DOCUMENT = "https://pspdfkit.com/downloads/pspdfkit-react-native-quickstart-guide.pdf";
export default class App extends Component<{}> {
    var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
    // Using the react-native-fs plugin to get a temporary directory path.
    const myDocumentPath = RNFS.TemporaryDirectoryPath + '/test.pdf';

    render() {
        return (
            <PSPDFKitView
             document={DOCUMENT}
             configuration={{
                remoteDocumentConfiguration: {
                    outputFilePath: myDocumentPath,
                    overwriteExisting: true
                }
             }},
             ref={pdfRef}
             fragmentTag="PDF1"
             style={{ flex: 1 }}
            />
        );
    }
}

AppRegistry.registerComponent('App', () => App);

For more details and sample code showing how to open a document from a remote URL using PSPDFKit for React Native, take a look at our OpenRemoteDocument.tsx example from the Catalog example project.