Some test text!

Loading...
Guides
View a document

View a PDF document in React Native

This guide will help you to view a document using the PDFTron React Native SDK.

Preparation

Usage-Github

If you installed through GitHub, replace App.js with the code below.

If you set your path variable to point to a local storage file, then the PermissionsAndroid component is required to ensure that storage permission is properly granted.

Within this example there are several sections of commented out code that work together to handle storage permissions.

Below the example are the types of file paths that are native to iOS or Android and accepted by the DocumentView component.

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  PermissionsAndroid,
  BackHandler,
  NativeModules,
  Alert,
} from "react-native";

import { DocumentView, RNPdftron } from "react-native-pdftron";

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);

    RNPdftron.enableJavaScript(true);
  }

  onLeadingNavButtonPressed = () => {
    console.log("leading nav button pressed");
    if (Platform.OS === "ios") {
      Alert.alert(
        "App",
        "onLeadingNavButtonPressed",
        [{ text: "OK", onPress: () => console.log("OK Pressed") }],
        { cancelable: true }
      );
    } else {
      BackHandler.exitApp();
    }
  };

  render() {

    const path =
      "https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf";

    return (
      <DocumentView
        document={path}
        showLeadingNavButton={true}
        leadingNavButtonIcon={
          Platform.OS === "ios"
            ? "ic_close_black_24px.png"
            : "ic_arrow_back_white_24dp"
        }
        onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
});

Usage-NPM

If you installed through NPM package, Replace App.js with the code below.

If you set your path variable to point to a local storage file, then the PermissionsAndroid component is required to ensure that storage permission is properly granted.

Within this example there are several sections of commented out code that work together to handle storage permissions.

Below the example are the types of file paths that are native to iOS or Android and accepted by the DocumentView component.

if you are using the npm package use this instead

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  PermissionsAndroid,
  BackHandler,
  NativeModules,
  Alert,
} from "react-native";

import { DocumentView, RNPdftron } from "@pdftron/react-native-pdf";

type Props = {};
export default class App extends Component<Props> {

  constructor(props) {
    super(props);

    RNPdftron.enableJavaScript(true);
  }

  onLeadingNavButtonPressed = () => {
    console.log("leading nav button pressed");
    if (Platform.OS === "ios") {
      Alert.alert(
        "App",
        "onLeadingNavButtonPressed",
        [{ text: "OK", onPress: () => console.log("OK Pressed") }],
        { cancelable: true }
      );
    } else {
      BackHandler.exitApp();
    }
  };

  render() {

    const path =
      "https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf";

    return (
      <DocumentView
        document={path}
        showLeadingNavButton={true}
        leadingNavButtonIcon={
          Platform.OS === "ios"
            ? "ic_close_black_24px.png"
            : "ic_arrow_back_white_24dp"
        }
        onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
});

To open a document from other sources, change the document={path} line to:

For local storage file path:
document="file:///storage/emulated/0/Download/sample.pdf"

For raw resource path (include file extension):

document="android.resource://mypackagename/raw/sample.pdf"

For content Uri:

document="content://..."

Run

In the root project directory, run `react-native run-android`. You should see the viewer start up.

Next step

Guides Samples API docs

Get the answers you need: Support

Upcoming Webinar: Customer Experience and Retaining Control: Boosting Document Automation and Efficiency in Financial Services | Sept 15, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use