mobile: add pdf attachment previews

2026-02-23 19:49:56 +01:00 · 2023-05-19 11:05:16 +05:00
parent 7227513783
commit b413315777
24 changed files with 397 additions and 75 deletions
--- a/apps/mobile/app/common/database/storage.js
+++ b/apps/mobile/app/common/database/storage.js
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

 import { Platform } from "react-native";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import {
  decrypt,
  deriveCryptoKey,
--- a/apps/mobile/app/common/filesystem/compress.js
+++ b/apps/mobile/app/common/filesystem/compress.js
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { Dimensions, Platform } from "react-native";
 import ImageResizer from "@bam.tech/react-native-image-resizer";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 /**
 * Scale down & compress images to screen width
 * for loading in editor.
--- a/apps/mobile/app/common/filesystem/download-attachment.js
+++ b/apps/mobile/app/common/filesystem/download-attachment.js
@@ -26,7 +26,7 @@ import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { subscribe, zip } from "react-native-zip-archive";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { ShareComponent } from "../../components/sheets/export-notes/share";
 import { ToastEvent, presentSheet } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
--- a/apps/mobile/app/common/filesystem/download.js
+++ b/apps/mobile/app/common/filesystem/download.js
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import hosts from "@notesnook/core/utils/constants";
 import NetInfo from "@react-native-community/netinfo";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { ToastEvent } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
--- a/apps/mobile/app/common/filesystem/io.js
+++ b/apps/mobile/app/common/filesystem/io.js
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { cacheDir, getRandomId } from "./utils";
 import { db } from "../database";
 import { compressToBase64 } from "./compress";
--- a/apps/mobile/app/common/filesystem/upload.js
+++ b/apps/mobile/app/common/filesystem/upload.js
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import { cacheDir } from "./utils";
--- a/apps/mobile/app/common/filesystem/utils.js
+++ b/apps/mobile/app/common/filesystem/utils.js
@@ -17,9 +17,9 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

-import RNFetchBlob from "rn-fetch-blob";
 import * as ScopedStorage from "react-native-scoped-storage";
 import { Platform } from "react-native";
+import RNFetchBlob from "react-native-blob-util";

 export const cacheDir = RNFetchBlob.fs.dirs.CacheDir;

--- a/apps/mobile/app/components/dialog-provider/index.js
+++ b/apps/mobile/app/components/dialog-provider/index.js
@@ -36,6 +36,7 @@ import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
 import RestoreDataSheet from "../sheets/restore-data";
+import PDFPreview from "../dialogs/pdf-preview";

 const DialogProvider = () => {
  const colors = useThemeStore((state) => state.colors);
@@ -60,6 +61,7 @@ const DialogProvider = () => {
      {loading ? null : <Expiring />}
      <AnnouncementDialog />
      <SessionExpired />
+      <PDFPreview />
    </>
  );
 };
--- a/apps/mobile/app/components/dialogs/pdf-preview/index.js
+++ b/apps/mobile/app/components/dialogs/pdf-preview/index.js
@@ -0,0 +1,291 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { useEffect, useRef, useState } from "react";
+import { Dimensions, TextInput, View } from "react-native";
+import {
+  addOrientationListener,
+  removeOrientationListener
+} from "react-native-orientation";
+import Pdf from "react-native-pdf";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import downloadAttachment from "../../../common/filesystem/download-attachment";
+import { cacheDir } from "../../../common/filesystem/utils";
+import { useAttachmentProgress } from "../../../hooks/use-attachment-progress";
+import useGlobalSafeAreaInsets from "../../../hooks/use-global-safe-area-insets";
+import {
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from "../../../services/event-manager";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import { SIZE } from "../../../utils/size";
+import { Dialog } from "../../dialog";
+import BaseDialog from "../../dialog/base-dialog";
+import { presentDialog } from "../../dialog/functions";
+import SheetProvider from "../../sheet-provider";
+import { IconButton } from "../../ui/icon-button";
+import { ProgressBarComponent } from "../../ui/svg/lazy";
+import Paragraph from "../../ui/typography/paragraph";
+import { sleep } from "../../../utils/time";
+
+const WIN_WIDTH = Dimensions.get("window").width;
+const WIN_HEIGHT = Dimensions.get("window").height;
+
+const PDFPreview = () => {
+  const colors = useThemeStore((state) => state.colors);
+  const [visible, setVisible] = useState(false);
+  const [pdfSource, setPDFSource] = useState();
+  const [loading, setLoading] = useState(false);
+  const [width, setWidth] = useState(WIN_WIDTH);
+  const insets = useGlobalSafeAreaInsets();
+  const [numPages, setNumPages] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const inputRef = useRef();
+  const pdfRef = useRef();
+  const [attachment, setAttachment] = useState(null);
+  const [password, setPassword] = useState("");
+  const progress = useAttachmentProgress(attachment);
+
+  useEffect(() => {
+    eSubscribeEvent("PDFPreview", open);
+    return () => {
+      eUnSubscribeEvent("PDFPreview", open);
+    };
+  }, []);
+
+  const onOrientationChange = (o) => {
+    if (o.includes("LANDSCAPE")) {
+      setWidth(WIN_HEIGHT);
+    } else {
+      setWidth(WIN_WIDTH);
+    }
+  };
+
+  useEffect(() => {
+    addOrientationListener(onOrientationChange);
+    return () => {
+      removeOrientationListener(onOrientationChange);
+    };
+  }, []);
+
+  const open = async (attachment) => {
+    setVisible(true);
+    setLoading(true);
+    setTimeout(async () => {
+      setAttachment(attachment);
+      let hash = attachment.metadata.hash;
+      if (!hash) return;
+      const uri = await downloadAttachment(hash, false, {
+        silent: true,
+        cache: true
+      });
+      const path = `${cacheDir}/${uri}`;
+      setPDFSource("file://" + path);
+      setLoading(false);
+    }, 100);
+  };
+
+  const close = () => {
+    setPDFSource(null);
+    setVisible(false);
+    setPassword("");
+  };
+
+  const onError = async (error) => {
+    if (error?.message === "Password required or incorrect password.") {
+      await sleep(300);
+      presentDialog({
+        context: attachment?.metadata?.hash,
+        input: true,
+        inputPlaceholder: "Enter password",
+        positiveText: "Unlock",
+        title: "Decrypt",
+        paragraph: "Please input password to view pdf.",
+        positivePress: (value) => {
+          setTimeout(() => {
+            setPassword(value);
+          });
+        },
+        onClose: () => {
+          close();
+        }
+      });
+    }
+  };
+
+  return (
+    visible && (
+      <BaseDialog animation="fade" visible={true} onRequestClose={close}>
+        <SheetProvider context={attachment?.metadata?.hash} />
+        <Dialog context={attachment?.metadata?.hash} />
+
+        <View
+          style={{
+            width: "100%",
+            height: "100%",
+            backgroundColor: "black"
+          }}
+        >
+          {loading ? (
+            <Animated.View
+              exiting={FadeOut}
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <ProgressBarComponent
+                indeterminate
+                color={colors.accent}
+                borderColor="transparent"
+              />
+              <Paragraph
+                style={{
+                  marginTop: 10
+                }}
+                color={colors.light}
+              >
+                Loading ({progress?.percent || "0%"})... Please wait
+              </Paragraph>
+            </Animated.View>
+          ) : (
+            <>
+              <View
+                style={{
+                  width: "100%",
+                  height: 50,
+                  marginTop: insets.top,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  paddingHorizontal: 12,
+                  paddingLeft: 6
+                }}
+              >
+                <View
+                  style={{
+                    flexDirection: "row"
+                  }}
+                >
+                  <IconButton
+                    color={colors.light}
+                    name="arrow-left"
+                    onPress={close}
+                    customStyle={{
+                      marginRight: 12
+                    }}
+                    size={SIZE.xxl}
+                  />
+                </View>
+
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    marginRight: 12
+                  }}
+                >
+                  <TextInput
+                    ref={inputRef}
+                    defaultValue={currentPage + ""}
+                    style={{
+                      color: colors.pri,
+                      padding: 0,
+                      paddingTop: 0,
+                      paddingBottom: 0,
+                      marginTop: 0,
+                      marginBottom: 0,
+                      paddingVertical: 0,
+                      height: 25,
+                      backgroundColor: colors.nav,
+                      width: 40,
+                      textAlign: "center",
+                      marginRight: 4,
+                      borderRadius: 3,
+                      fontFamily: "OpenSans-Regular"
+                    }}
+                    selectTextOnFocus
+                    keyboardType="decimal-pad"
+                    onSubmitEditing={(event) => {
+                      setCurrentPage(event.nativeEvent.text);
+                      pdfRef.current?.setPage(parseInt(event.nativeEvent.text));
+                    }}
+                    blurOnSubmit
+                  />
+                  <Paragraph color={colors.light}>/{numPages}</Paragraph>
+                </View>
+
+                <View
+                  style={{
+                    flexDirection: "row"
+                  }}
+                >
+                  <IconButton
+                    color={colors.light}
+                    name="download"
+                    onPress={() => {
+                      downloadAttachment(attachment.metadata.hash, false);
+                    }}
+                  />
+                </View>
+              </View>
+              {pdfSource ? (
+                <Animated.View
+                  style={{
+                    flex: 1
+                  }}
+                  entering={FadeIn}
+                >
+                  <Pdf
+                    source={{
+                      uri: pdfSource
+                    }}
+                    ref={pdfRef}
+                    onLoadComplete={(numberOfPages) => {
+                      setNumPages(numberOfPages);
+                    }}
+                    onPageChanged={(page) => {
+                      setCurrentPage(page);
+                      inputRef.current?.setNativeProps({
+                        text: page + ""
+                      });
+                    }}
+                    password={password}
+                    maxScale={6}
+                    onError={onError}
+                    onPressLink={(uri) => {
+                      console.log(`Link pressed: ${uri}`);
+                    }}
+                    style={{
+                      flex: 1,
+                      width: width,
+                      height: Dimensions.get("window").height
+                    }}
+                  />
+                </Animated.View>
+              ) : null}
+            </>
+          )}
+        </View>
+      </BaseDialog>
+    )
+  );
+};
+
+export default PDFPreview;
--- a/apps/mobile/app/components/sheets/recovery-key/index.js
+++ b/apps/mobile/app/components/sheets/recovery-key/index.js
@@ -43,7 +43,7 @@ import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import { QRCode } from "../../ui/svg/lazy";
 import Paragraph from "../../ui/typography/paragraph";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";

 class RecoveryKeySheet extends React.Component {
  constructor(props) {
--- a/apps/mobile/app/components/sheets/restore-data/index.js
+++ b/apps/mobile/app/components/sheets/restore-data/index.js
@@ -44,7 +44,7 @@ import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import SheetWrapper from "../../ui/sheet";
 import Paragraph from "../../ui/typography/paragraph";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";

 const RestoreDataSheet = () => {
  const [visible, setVisible] = useState(false);
--- a/apps/mobile/app/hooks/use-attachment-progress.ts
+++ b/apps/mobile/app/hooks/use-attachment-progress.ts
@@ -60,7 +60,7 @@ export const useAttachmentProgress = (
        setCurrentProgress(undefined);
      }, 300);
    }
-  }, [attachment.metadata.hash, progress]);
+  }, [attachment, progress]);

  return [currentProgress, setCurrentProgress];
 };
--- a/apps/mobile/app/package.json
+++ b/apps/mobile/app/package.json
@@ -27,7 +27,8 @@
    "validator": "^13.5.2",
    "zustand": "^3.6.0",
    "fflate": "^0.7.3",
-    "timeago.js": "4.0.2"
+    "timeago.js": "4.0.2",
+    "react-native-blob-util": "0.17.3"
  },
  "sideEffects": false
 }
--- a/apps/mobile/app/screens/editor/tiptap/picker.js
+++ b/apps/mobile/app/screens/editor/tiptap/picker.js
@@ -22,7 +22,7 @@ import React from "react";
 import { Platform, View } from "react-native";
 import DocumentPicker from "react-native-document-picker";
 import { launchCamera, launchImageLibrary } from "react-native-image-picker";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { db } from "../../../common/database";
 import { compressToBase64 } from "../../../common/filesystem/compress";
 import { AttachmentItem } from "../../../components/attachments/attachment-item";
--- a/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts
+++ b/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts
@@ -398,9 +398,18 @@ export const useEditorEvents = (
          openLinkInBrowser(editorMessage.value as string);
          break;

-        case EventTypes.previewAttachment:
-          eSendEvent("ImagePreview", editorMessage.value);
+        case EventTypes.previewAttachment: {
+          const hash = (editorMessage.value as Attachment)?.hash;
+          const attachment = db.attachments?.attachment(hash);
+          if (attachment.metadata.type.startsWith("image/")) {
+            eSendEvent("ImagePreview", editorMessage.value);
+          } else {
+            eSendEvent("PDFPreview", attachment);
+          }
+
          break;
+        }
+
        default:
          break;
      }
--- a/apps/mobile/app/screens/settings/2fa.tsx
+++ b/apps/mobile/app/screens/settings/2fa.tsx
@@ -28,7 +28,7 @@ import React, {
 import { ActivityIndicator, Linking, Platform, View } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import * as ScopedStorage from "react-native-scoped-storage";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { db } from "../../common/database";
 import Storage from "../../common/database/storage";
 import DialogHeader from "../../components/dialog/dialog-header";
--- a/apps/mobile/app/screens/settings/debug.tsx
+++ b/apps/mobile/app/screens/settings/debug.tsx
@@ -18,12 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

 import Clipboard from "@react-native-clipboard/clipboard";
-import { LogMessage } from "@streetwriters/logger";
+import { LogMessage } from "@notesnook/logger";
 import { format, LogLevel, logManager } from "@notesnook/core/logger";
 import React, { useEffect, useState } from "react";
 import { FlatList, Platform, TouchableOpacity, View } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import Storage from "../../common/database/storage";
 import { presentDialog } from "../../components/dialog/functions";
 import { IconButton } from "../../components/ui/icon-button";
--- a/apps/mobile/app/screens/settings/license-data.js
+++ b/apps/mobile/app/screens/settings/license-data.js
@@ -268,10 +268,10 @@ export const LICENSES = [
    link: "https://github.com/RocketChat/rn-extensions-share"
  },
  {
-    name: "rn-fetch-blob",
+    name: "react-native-blob-util",
    licenseType: "MIT",
-    author: "Joltup",
-    link: "https://github.com/joltup/rn-fetch-blob"
+    author: "RonRadtke",
+    link: "https://github.com/RonRadtke/react-native-blob-util"
  },
  {
    name: "react-native-gzip",
--- a/apps/mobile/app/services/backup.js
+++ b/apps/mobile/app/services/backup.js
@@ -21,7 +21,7 @@ import { Platform } from "react-native";
 import FileViewer from "react-native-file-viewer";
 import * as ScopedStorage from "react-native-scoped-storage";
 import Share from "react-native-share";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { presentDialog } from "../components/dialog/functions";
 import { DatabaseLogger, db } from "../common/database";
 import storage from "../common/database/storage";
--- a/apps/mobile/app/services/exporter.js
+++ b/apps/mobile/app/services/exporter.js
@@ -22,7 +22,7 @@ import { zipSync } from "fflate";
 import { Platform } from "react-native";
 import RNHTMLtoPDF from "react-native-html-to-pdf-lite";
 import * as ScopedStorage from "react-native-scoped-storage";
-import RNFetchBlob from "rn-fetch-blob";
+import RNFetchBlob from "react-native-blob-util";
 import { DatabaseLogger, db } from "../common/database/index";
 import Storage from "../common/database/storage";
 import { toTXT } from "../utils";
--- a/apps/mobile/native/android/app/build.gradle
+++ b/apps/mobile/native/android/app/build.gradle
@@ -276,6 +276,13 @@ android {
        }
    }

+     packagingOptions {
+      pickFirst 'lib/x86/libc++_shared.so'
+      pickFirst 'lib/x86_64/libc++_shared.so'
+      pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+      pickFirst 'lib/arm64-v8a/libc++_shared.so'
+  }
+
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
--- a/apps/mobile/native/package.json
+++ b/apps/mobile/native/package.json
@@ -48,7 +48,6 @@
    "react-native-tooltips": "^1.0.3",
    "react-native-webview": "^11.14.1",
    "rn-extensions-share": "^2.4.0",
-    "rn-fetch-blob": "^0.12.0",
    "react-native-gzip":"1.0.0",
    "@shopify/flash-list":"1.4.0",
    "@ammarahmed/notifee-react-native": "7.4.4",
@@ -61,7 +60,9 @@
    "react-native-actions-shortcuts": "^1.0.1",
    "react-native-in-app-review": "4.3.3",
    "react-native-zip-archive": "6.0.9",
-    "react-native-vector-icons": "9.2.0"
+    "react-native-vector-icons": "9.2.0",
+    "react-native-pdf": "6.6.2",
+    "react-native-blob-util": "0.17.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
--- a/apps/mobile/package-lock.json
+++ b/apps/mobile/package-lock.json
@@ -39,6 +39,7 @@
        "phone": "^3.1.14",
        "qclone": "^1.2.0",
        "react-native-actions-sheet": "0.9.0-alpha.18",
+        "react-native-blob-util": "0.17.3",
        "react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
        "react-native-drax": "^0.10.2",
        "react-native-image-zoom-viewer": "^3.0.1",
@@ -79,6 +80,7 @@
        "react-native-actions-shortcuts": "^1.0.1",
        "react-native-background-actions": "^2.6.6",
        "react-native-begin-background-task": "https://github.com/blockfirm/react-native-begin-background-task.git",
+        "react-native-blob-util": "0.17.3",
        "react-native-bootsplash": "^4.1.4",
        "react-native-config": "^1.4.6",
        "react-native-date-picker": "4.2.6",
@@ -101,6 +103,7 @@
        "react-native-navigation-bar-color": "2.0.2",
        "react-native-notification-sounds": "0.5.5",
        "react-native-orientation": "https://github.com/yamill/react-native-orientation.git",
+        "react-native-pdf": "6.6.2",
        "react-native-privacy-snapshot": "https://github.com/standardnotes/react-native-privacy-snapshot.git",
        "react-native-reanimated": "2.13.0",
        "react-native-safe-area-context": "^4.3.1",
@@ -112,9 +115,13 @@
        "react-native-tooltips": "^1.0.3",
        "react-native-vector-icons": "9.2.0",
        "react-native-webview": "^11.14.1",
+<<<<<<< HEAD
        "react-native-zip-archive": "6.0.9",
        "rn-extensions-share": "^2.4.0",
        "rn-fetch-blob": "^0.12.0"
+=======
+        "rn-extensions-share": "^2.4.0"
+>>>>>>> 7fe572bf9 (mobile: add pdf attachment previews)
      },
      "devDependencies": {
        "@babel/core": "^7.12.9",
@@ -8129,6 +8136,11 @@
        "node": ">=4.8"
      }
    },
+    "node_modules/crypto-js": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
+      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
+    },
    "node_modules/css-select": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -17902,6 +17914,19 @@
        "react-native-windows": "0.41.0-rc.1"
      }
    },
+    "node_modules/react-native-blob-util": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/react-native-blob-util/-/react-native-blob-util-0.17.3.tgz",
+      "integrity": "sha512-nO4VXIPtCrtf3mzCiOkdrXsmc8WmOLNSziS7dCnQ6kSyg4LOLXP4mQOFqfiNxt78n7cZ0QOF5CdUY/sIZZ2aOA==",
+      "dependencies": {
+        "base-64": "0.1.0",
+        "glob": "^7.2.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-bootsplash": {
      "version": "4.3.2",
      "resolved": "https://registry.npmjs.org/react-native-bootsplash/-/react-native-bootsplash-4.3.2.tgz",
@@ -18349,6 +18374,15 @@
        "react-native": ">=0.40"
      }
    },
+    "node_modules/react-native-pdf": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-native-pdf/-/react-native-pdf-6.6.2.tgz",
+      "integrity": "sha512-gqxNPSzL0lNN1dGYAz9ObSLb0shUTB8x1u69qKLMSmwuxFTpGui5PNNgpH8q/nlpL9zBzMVVc/AXEuDCwRyxEQ==",
+      "dependencies": {
+        "crypto-js": "^3.2.0",
+        "deprecated-react-native-prop-types": "^2.3.0"
+      }
+    },
    "node_modules/react-native-privacy-snapshot": {
      "version": "1.0.0",
      "resolved": "git+ssh://git@github.com/standardnotes/react-native-privacy-snapshot.git#653e904c90fc6f2b578da59138f2bfe5d7f942fe",
@@ -18902,31 +18936,6 @@
      "resolved": "https://registry.npmjs.org/rn-extensions-share/-/rn-extensions-share-2.4.0.tgz",
      "integrity": "sha512-zX3HcOhib805fVHR7TMYfFXrVBJWYgcrLYNB89RxbKqmSjaqUyWlHYuF61SKOs/dXXeic91e/L8d1YJa6TdzGA=="
    },
-    "node_modules/rn-fetch-blob": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/rn-fetch-blob/-/rn-fetch-blob-0.12.0.tgz",
-      "integrity": "sha512-+QnR7AsJ14zqpVVUbzbtAjq0iI8c9tCg49tIoKO2ezjzRunN7YL6zFSFSWZm6d+mE/l9r+OeDM3jmb2tBb2WbA==",
-      "dependencies": {
-        "base-64": "0.1.0",
-        "glob": "7.0.6"
-      }
-    },
-    "node_modules/rn-fetch-blob/node_modules/glob": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
-      "integrity": "sha512-f8c0rE8JiCxpa52kWPAOa3ZaYEnzofDzCQLCn3Vdk0Z5OVLq3BsRFJI4S4ykpeVW6QMGBUkMeUpoEgWnMTnw5Q==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.2",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -24234,6 +24243,7 @@
        "phone": "^3.1.14",
        "qclone": "^1.2.0",
        "react-native-actions-sheet": "0.9.0-alpha.18",
+        "react-native-blob-util": "0.17.3",
        "react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
        "react-native-drax": "^0.10.2",
        "react-native-image-zoom-viewer": "^3.0.1",
@@ -24302,6 +24312,7 @@
        "react-native-actions-shortcuts": "^1.0.1",
        "react-native-background-actions": "^2.6.6",
        "react-native-begin-background-task": "https://github.com/blockfirm/react-native-begin-background-task.git",
+        "react-native-blob-util": "0.17.3",
        "react-native-bootsplash": "^4.1.4",
        "react-native-bundle-visualizer": "^3.1.1",
        "react-native-cli-bump-version": "^1.3.0",
@@ -24326,6 +24337,7 @@
        "react-native-navigation-bar-color": "2.0.2",
        "react-native-notification-sounds": "0.5.5",
        "react-native-orientation": "https://github.com/yamill/react-native-orientation.git",
+        "react-native-pdf": "6.6.2",
        "react-native-privacy-snapshot": "https://github.com/standardnotes/react-native-privacy-snapshot.git",
        "react-native-reanimated": "2.13.0",
        "react-native-safe-area-context": "^4.3.1",
@@ -24340,7 +24352,6 @@
        "react-native-zip-archive": "6.0.9",
        "react-test-renderer": "18.0.0",
        "rn-extensions-share": "^2.4.0",
-        "rn-fetch-blob": "^0.12.0",
        "terser-webpack-plugin": "^5.3.5",
        "ts-jest": "^28.0.7",
        "webpack": "^5.74.0"
@@ -27431,6 +27442,11 @@
        "which": "^1.2.9"
      }
    },
+    "crypto-js": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
+      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
+    },
    "css-select": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -34729,6 +34745,15 @@
      "version": "git+ssh://git@github.com/blockfirm/react-native-begin-background-task.git#c2aa793249db6cc6298a812905f955a99b864e78",
      "from": "react-native-begin-background-task@https://github.com/blockfirm/react-native-begin-background-task.git"
    },
+    "react-native-blob-util": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/react-native-blob-util/-/react-native-blob-util-0.17.3.tgz",
+      "integrity": "sha512-nO4VXIPtCrtf3mzCiOkdrXsmc8WmOLNSziS7dCnQ6kSyg4LOLXP4mQOFqfiNxt78n7cZ0QOF5CdUY/sIZZ2aOA==",
+      "requires": {
+        "base-64": "0.1.0",
+        "glob": "^7.2.3"
+      }
+    },
    "react-native-bootsplash": {
      "version": "4.3.2",
      "resolved": "https://registry.npmjs.org/react-native-bootsplash/-/react-native-bootsplash-4.3.2.tgz",
@@ -35043,6 +35068,15 @@
      "version": "git+ssh://git@github.com/yamill/react-native-orientation.git#b45830cce0837fa668838554e023979497673c82",
      "from": "react-native-orientation@https://github.com/yamill/react-native-orientation.git"
    },
+    "react-native-pdf": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/react-native-pdf/-/react-native-pdf-6.6.2.tgz",
+      "integrity": "sha512-gqxNPSzL0lNN1dGYAz9ObSLb0shUTB8x1u69qKLMSmwuxFTpGui5PNNgpH8q/nlpL9zBzMVVc/AXEuDCwRyxEQ==",
+      "requires": {
+        "crypto-js": "^3.2.0",
+        "deprecated-react-native-prop-types": "^2.3.0"
+      }
+    },
    "react-native-privacy-snapshot": {
      "version": "git+ssh://git@github.com/standardnotes/react-native-privacy-snapshot.git#653e904c90fc6f2b578da59138f2bfe5d7f942fe",
      "from": "react-native-privacy-snapshot@https://github.com/standardnotes/react-native-privacy-snapshot.git"
@@ -35434,30 +35468,6 @@
      "resolved": "https://registry.npmjs.org/rn-extensions-share/-/rn-extensions-share-2.4.0.tgz",
      "integrity": "sha512-zX3HcOhib805fVHR7TMYfFXrVBJWYgcrLYNB89RxbKqmSjaqUyWlHYuF61SKOs/dXXeic91e/L8d1YJa6TdzGA=="
    },
-    "rn-fetch-blob": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/rn-fetch-blob/-/rn-fetch-blob-0.12.0.tgz",
-      "integrity": "sha512-+QnR7AsJ14zqpVVUbzbtAjq0iI8c9tCg49tIoKO2ezjzRunN7YL6zFSFSWZm6d+mE/l9r+OeDM3jmb2tBb2WbA==",
-      "requires": {
-        "base-64": "0.1.0",
-        "glob": "7.0.6"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.0.6",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
-          "integrity": "sha512-f8c0rE8JiCxpa52kWPAOa3ZaYEnzofDzCQLCn3Vdk0Z5OVLq3BsRFJI4S4ykpeVW6QMGBUkMeUpoEgWnMTnw5Q==",
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.2",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        }
-      }
-    },
    "run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -32,6 +32,7 @@
    "react-native": "0.69.7",
    "@notesnook/core": "*",
    "@notesnook/editor": "*",
-    "@notesnook/editor-mobile": "*"
+    "@notesnook/editor-mobile": "*",
+    "@notesnook/logger": "*"
  }
 }