This guide will help you to view a document using the Apryse React Native SDK.
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.
JavaScript
1import React, { Component } from "react";
2import {
3 Platform,
4 StyleSheet,
5 Text,
6 View,
7 PermissionsAndroid,
8 BackHandler,
9 NativeModules,
10 Alert,
11} from "react-native";
12
13import { DocumentView, RNPdftron } from "react-native-pdftron";
14
15type Props = {};
16export default class App extends Component<Props> {
17 constructor(props) {
18 super(props);
19
20 RNPdftron.enableJavaScript(true);
21 }
22
23 onLeadingNavButtonPressed = () => {
24 console.log("leading nav button pressed");
25 if (Platform.OS === "ios") {
26 Alert.alert(
27 "App",
28 "onLeadingNavButtonPressed",
29 [{ text: "OK", onPress: () => console.log("OK Pressed") }],
30 { cancelable: true }
31 );
32 } else {
33 BackHandler.exitApp();
34 }
35 };
36
37 render() {
38
39 const path =
40 "https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf";
41
42 return (
43 <DocumentView
44 document={path}
45 showLeadingNavButton={true}
46 leadingNavButtonIcon={
47 Platform.OS === "ios"
48 ? "ic_close_black_24px.png"
49 : "ic_arrow_back_white_24dp"
50 }
51 onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
52 />
53 );
54 }
55}
56
57const styles = StyleSheet.create({
58 container: {
59 flex: 1,
60 justifyContent: "center",
61 alignItems: "center",
62 backgroundColor: "#F5FCFF",
63 },
64});
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
JavaScript
1import React, { Component } from "react";
2import {
3 Platform,
4 StyleSheet,
5 Text,
6 View,
7 PermissionsAndroid,
8 BackHandler,
9 NativeModules,
10 Alert,
11} from "react-native";
12
13import { DocumentView, RNPdftron } from "@pdftron/react-native-pdf";
14
15type Props = {};
16export default class App extends Component<Props> {
17
18 constructor(props) {
19 super(props);
20
21 RNPdftron.enableJavaScript(true);
22 }
23
24 onLeadingNavButtonPressed = () => {
25 console.log("leading nav button pressed");
26 if (Platform.OS === "ios") {
27 Alert.alert(
28 "App",
29 "onLeadingNavButtonPressed",
30 [{ text: "OK", onPress: () => console.log("OK Pressed") }],
31 { cancelable: true }
32 );
33 } else {
34 BackHandler.exitApp();
35 }
36 };
37
38 render() {
39
40 const path =
41 "https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_mobile_about.pdf";
42
43 return (
44 <DocumentView
45 document={path}
46 showLeadingNavButton={true}
47 leadingNavButtonIcon={
48 Platform.OS === "ios"
49 ? "ic_close_black_24px.png"
50 : "ic_arrow_back_white_24dp"
51 }
52 onLeadingNavButtonPressed={this.onLeadingNavButtonPressed}
53 />
54 );
55 }
56}
57
58const styles = StyleSheet.create({
59 container: {
60 flex: 1,
61 justifyContent: "center",
62 alignItems: "center",
63 backgroundColor: "#F5FCFF",
64 },
65});
To open a document from other sources, change the document={path} line to:
For local storage file path:
JavaScript
1document="file:///storage/emulated/0/Download/sample.pdf"
For raw resource path (include file extension):
JavaScript
1document="android.resource://mypackagename/raw/sample.pdf"
For content Uri:
JavaScript
1document="content://..."
In the root project directory, run `react-native run-android`. You should see the viewer start up.
You can view the source code for this project here.
