How do I Show a Remote Document in React Native?

Q: How do I Show a Remote Document in React Native?

A: Our React Native plugin, like our mobile SDKs for Android and iOS, is designed to open local file system documents for performance, cache control, battery impact, to name a few. For more details, please refer to our Document Downloads guide.

The best and easiest way to accomplish this, is to download the PDF first using a React Native third-party library like https://github.com/joltup/rn-fetch-blob before presenting the document in your app like so:

import React, {Component} from 'react';
import {NativeModules} from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import RNFetchBlob from 'rn-fetch-blob';

var PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey('YOUR_LICENSE_KEY_GOES_HERE');

var documentPath = RNFetchBlob.fs.dirs.DocumentDir + '/document.pdf';
RNFetchBlob.config({
  path: documentPath,
}).fetch('GET', 'https://www.example.com/pdf/document.pdf');

export default class App extends Component<{}> {
  render() {
    return (
      <PSPDFKitView
        document={documentPath}
        style={{flex: 1, color: '#267AD4'}}
      />
    );
  }
}

Was this page helpful? We're happy to answer any questions.

The PSPDFKit SDK is a framework that allows you to view, annotate, sign, and fill PDF forms on iOS, Android, Windows, macOS, and Web. PSPDFKit Instant adds real-time collaboration features to seamlessly share, edit, and annotate PDF documents.