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(opens in a new tab) before presenting the document in your app, like so:

import React, { Component } from 'react';
import { NativeModules } from 'react-native';
import NutrientView from '@nutrient-sdk/react-native';
import RNFetchBlob from 'rn-fetch-blob';


var Nutrient = NativeModules.Nutrient;
Nutrient.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 (
        <NutrientView
          document={this.state.documentPath}
          style={{ flex: 1, color: '#267AD4' }}
        />
      );
    }
  }
}