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:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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'}}
      />
    );
  }
}