move document path out

Author: sgong-pdftron

App.tsx

@@ -6,7 +6,7 @@ import MyViewer from './components/Viewer';
 export default function App() {
   return (
     <View style={styles.container}>
-      <MyViewer />
+      <MyViewer document={"https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf"}/>
     </View>
   );
 }

README.md

@@ -1,5 +1,5 @@
-# pdftron-react-and-react-native-sample
-This sample project uses Expo and shows how to create a PDF viewer app with shared code between React and React Native.
+# PDFTron React and React Native PDF Viewer Sample
+This sample project uses Expo and shows how to create a PDF viewer app for both web and mobile with a single codebase between React and React Native.
 
 ## Install
 

components/Viewer/Viewer.native.tsx

@@ -3,15 +3,19 @@ import {useEffect} from 'react';
 
 import { DocumentView, RNPdftron } from 'react-native-pdftron';
 
-const MyComponent = () => {
+type ViewerProps = {
+  document: string
+}
+
+const MyComponent = ({ document }: ViewerProps) => {
 
   useEffect(() => {
     RNPdftron.initialize("Insert commercial license key here after purchase");
   }, []);
 
   return (
     <DocumentView
-      document={"https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf"}
+      document={document}
       padStatusBar
     />
   );

components/Viewer/Viewer.tsx

@@ -2,14 +2,18 @@ import React from 'react';
 import {useEffect, useRef} from 'react';
 import WebViewer from '@pdftron/webviewer';
 
-const MyComponent = () => {
+type ViewerProps = {
+  document: string
+}
+
+const MyComponent = ({ document }: ViewerProps) => {
   const viewer = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     WebViewer(
       {
         path: 'lib',
-        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf',
+        initialDoc: document,
       },
       viewer.current as HTMLDivElement,
     ).then((instance) => {