How Do I Show a Remote Document in React Native?

Our React Native library, like our mobile SDKs for Android and iOS, is designed to open local file system documents for performance, cache control, and battery impact, to name a few.

The best and easiest way to accomplish this is to download a PDF using a React Native third-party library like 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(null);

export default class App extends Component<
	{},
	{ documentPath: string | undefined },
> {
	constructor(props: {} | Readonly<{}>) {
		super(props);
		this.state = {
			documentPath: undefined,
		};
		this.downloadFile();
	}

	downloadFile() {
		var documentPath =
			RNFetchBlob.fs.dirs.DocumentDir + '/document.pdf';
		RNFetchBlob.config({
			path: documentPath,
		})
			.fetch(
				'GET',
				'https://pspdfkit.com/downloads/pspdfkit-react-native-quickstart-guide.pdf',
			)
			.then(() => {
				this.setState({ documentPath });
			});
	}

	render() {
		if (this.state.documentPath !== undefined) {
			return (
				<PSPDFKitView
					document={this.state.documentPath}
					style={{ flex: 1, color: '#267AD4' }}
				/>
			);
		}
	}
}