> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/ios/get-started/frameworks/react-native/view-a-document.md).

# View a PDF document in React Native

Discover how to run \`react-native run-ios\` in the root project directory (\`/MyApp\`) and explore the source code for this project. Get started now! The Apryse iOS SDK streamlines secure document proces

This guide will help you to view a document using the Apryse 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.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
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",
  },
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

### 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

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
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",
  },
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

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

## Run

In the root project directory (\`/MyApp\`), run \`react-native run-ios\`. Your application should look like this:

![](https://4149080208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgY6xtY9ZQd9XMpvWlGM0%2Fuploads%2Fgit-blob-acf4f4a742ed5c01b2e8784f35eb2ef1c54bfee7%2Fb3c28a86cf71c42ce6435508aa212224889dc98f-592x1280.png?alt=media)

## Next step

<a href="/ios/guides.md" class="button primary">Guides</a><a href="/ios/get-started/samples.md" class="button primary">Samples</a><a href="/ios/get-started/frameworks/react-native/api.md" class="button primary">API docs</a>

{% hint style="info" %}
**You can view the source code for this project here.**
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/ios/get-started/frameworks/react-native/view-a-document.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.