feat: re-add PdfView sample

packages/my-app/package.json

@@ -113,6 +113,7 @@
     "react-native-nfc-manager": "^3.16.1",
     "react-native-pager-view": "6.3.0",
     "react-native-pdf": "^6.7.5",
+    "react-native-pdf-view": "*",
     "react-native-qrcode-svg": "^6.3.12",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.5",

packages/my-app/src/app/secure/my-resume-web.tsx

@@ -0,0 +1,62 @@
+import { PdfView, PdfViewPortEventData } from 'react-native-pdf-view';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { Button, ImageStyle, useWindowDimensions, View } from 'react-native';
+
+const samples = [
+  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
+  'https://trajano.net/assets/Archimedes%20Trajano.pdf',
+  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
+  'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+  'https://www.learningcontainer.com/wp-content/uploads/2019/09/sample-pdf-file.pdf',
+  'https://www.learningcontainer.com/wp-content/uploads/2019/09/sample-pdf-download-10-mb.pdf',
+  'https://www.learningcontainer.com/wp-content/uploads/2019/09/sample-pdf-with-images.pdf',
+];
+
+const ResumeScreen: FC = () => {
+  const [uri, setUri] = useState(
+    'https://trajano.net/assets/Archimedes%20Trajano.pdf',
+  );
+  const windowDimensions = useWindowDimensions();
+  const [pdfWidth, setPdfWidth] = useState(0);
+  const [pdfHeight, setPdfHeight] = useState(0);
+  const viewDimensions = useMemo<ImageStyle>(() => {
+    if (pdfWidth === 0 || pdfHeight === 0) {
+      return {
+        width: windowDimensions.width,
+        height: 1,
+      };
+    } else {
+      return {
+        width: windowDimensions.width,
+        height: (windowDimensions.width / pdfWidth) * pdfHeight,
+      };
+    }
+  }, [windowDimensions.width, pdfWidth, pdfHeight]);
+  const handleViewPortKnown = useCallback(
+    ({ height, width }: PdfViewPortEventData) => {
+      setPdfWidth(width);
+      setPdfHeight(height);
+    },
+    [],
+  );
+  const flip = useCallback(() => {
+    const randomUri = samples[Math.floor(Math.random() * samples.length)];
+    setUri(randomUri);
+  }, []);
+
+  return (
+    <View>
+      <PdfView
+        uri={uri}
+        onViewPortKnown={handleViewPortKnown}
+        onError={(error) => {
+          console.error(error);
+        }}
+        style={viewDimensions}
+      />
+      <Button title={uri} onPress={flip} />
+    </View>
+  );
+};
+
+export default ResumeScreen;

packages/react-native-pdf-view/src/PdfWebView.tsx

@@ -96,11 +96,11 @@ export const PdfWebView: FC<
       try {
         const [pdfJsCode, pdfWorkerBase64Code] = await Promise.all([
           FileSystem.readAsStringAsync(
-            (await pdfJsAsset.downloadAsync()).localUri,
+            (await pdfJsAsset.downloadAsync()).localUri!,
             { encoding: 'utf8' },
           ),
           FileSystem.readAsStringAsync(
-            (await pdfWorkerJsAsset.downloadAsync()).localUri,
+            (await pdfWorkerJsAsset.downloadAsync()).localUri!,
             { encoding: 'base64' },
           ),
         ]);