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.
If you’re interested in loading remote documents and synchronizing annotations across multiple concurrent users, devices, or sessions, check out PSPDFKit Instant.