feature(mobile): Allow interacting with images in the app. Fixes #352

6 files changed, 52 insertions, 18 deletions

diff --git a/apps/mobile/app.json b/apps/mobile/app.json
index baf2ca6e..4a877623 100644
--- a/apps/mobile/app.json
+++ b/apps/mobile/app.json
@@ -30,7 +30,7 @@
           "NSAllowsLocalNetworking": true
         }
       },
-      "buildNumber": "8"
+      "buildNumber": "9"
     },
     "android": {
       "adaptiveIcon": {
@@ -48,7 +48,7 @@
         }
       },
       "package": "app.hoarder.hoardermobile",
-      "versionCode": 8
+      "versionCode": 9
     },
     "plugins": [
       "expo-router",
diff --git a/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx
index 95f963f4..8fa88c8b 100644
--- a/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkAssetImage.tsx
@@ -1,5 +1,5 @@
 import { Image } from "react-native";
-import useAppSettings from "@/lib/settings";
+import { useAssetUrl } from "@/lib/hooks";
 
 export default function BookmarkAssetImage({
   assetId,
@@ -8,16 +8,7 @@ export default function BookmarkAssetImage({
   assetId: string;
   className: string;
 }) {
-  const { settings } = useAppSettings();
-  return (
-    <Image
-      source={{
-        uri: `${settings.address}/api/assets/${assetId}`,
-        headers: {
-          Authorization: `Bearer ${settings.apiKey}`,
-        },
-      }}
-      className={className}
-    />
-  );
+  const assetSource = useAssetUrl(assetId);
+
+  return <Image source={assetSource} className={className} />;
 }
diff --git a/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx b/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx
index 318249eb..6bec88af 100644
--- a/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx
+++ b/apps/mobile/components/bookmarks/ViewBookmarkModal.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { Keyboard, Pressable, Text } from "react-native";
+import ImageView from "react-native-image-viewing";
+import { useAssetUrl } from "@/lib/hooks";
 import {
   BottomSheetBackdrop,
   BottomSheetModal,
@@ -122,15 +124,27 @@ function BookmarkTextView({ bookmark }: { bookmark: ZBookmark }) {
 }
 
 function BookmarkAssetView({ bookmark }: { bookmark: ZBookmark }) {
+  const [imageZoom, setImageZoom] = useState(false);
   if (bookmark.content.type !== BookmarkTypes.ASSET) {
     throw new Error("Wrong content type rendered");
   }
+  const assetSource = useAssetUrl(bookmark.content.assetId);
   return (
     <BottomSheetView className="flex gap-2">
-      <BookmarkAssetImage
-        assetId={bookmark.content.assetId}
-        className="h-56 min-h-56 w-full object-cover"
+      <ImageView
+        visible={imageZoom}
+        imageIndex={0}
+        onRequestClose={() => setImageZoom(false)}
+        doubleTapToZoomEnabled={true}
+        images={[assetSource]}
       />
+
+      <Pressable onPress={() => setImageZoom(true)}>
+        <BookmarkAssetImage
+          assetId={bookmark.content.assetId}
+          className="h-56 min-h-56 w-full object-cover"
+        />
+      </Pressable>
     </BottomSheetView>
   );
 }
diff --git a/apps/mobile/lib/hooks.ts b/apps/mobile/lib/hooks.ts
new file mode 100644
index 00000000..beeab391
--- /dev/null
+++ b/apps/mobile/lib/hooks.ts
@@ -0,0 +1,13 @@
+import { ImageURISource } from "react-native";
+
+import useAppSettings from "./settings";
+
+export function useAssetUrl(assetId: string): ImageURISource {
+  const { settings } = useAppSettings();
+  return {
+    uri: `${settings.address}/api/assets/${assetId}`,
+    headers: {
+      Authorization: `Bearer ${settings.apiKey}`,
+    },
+  };
+}
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 6519692e..578dbeeb 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -44,6 +44,7 @@
     "react-native": "0.73.4",
     "react-native-awesome-slider": "^2.5.3",
     "react-native-gesture-handler": "~2.14.0",
+    "react-native-image-viewing": "^0.2.2",
     "react-native-markdown-display": "^7.0.2",
     "react-native-reanimated": "^3.8.0",
     "react-native-safe-area-context": "4.8.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f0d5901..6e69788e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -384,6 +384,9 @@ importers:
       react-native-gesture-handler:
         specifier: ~2.14.0
         version: 2.14.1(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0)
+      react-native-image-viewing:
+        specifier: ^0.2.2
+        version: 0.2.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0)
       react-native-markdown-display:
         specifier: ^7.0.2
         version: 7.0.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0)
@@ -10377,6 +10380,12 @@ packages:
       react: '*'
       react-native: '*'
 
+  react-native-image-viewing@0.2.2:
+    resolution: {integrity: sha512-osWieG+p/d2NPbAyonOMubttajtYEYiRGQaJA54slFxZ69j1V4/dCmcrVQry47ktVKy8/qpFwCpW1eT6MH5T2Q==}
+    peerDependencies:
+      react: '>=16.11.0'
+      react-native: '>=0.61.3'
+
   react-native-markdown-display@7.0.2:
     resolution: {integrity: sha512-Mn4wotMvMfLAwbX/huMLt202W5DsdpMO/kblk+6eUs55S57VVNni1gzZCh5qpznYLjIQELNh50VIozEfY6fvaQ==}
     peerDependencies:
@@ -26591,6 +26600,12 @@ snapshots:
       react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0)
     dev: false
 
+  react-native-image-viewing@0.2.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+      react-native: 0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0)
+    dev: false
+
   react-native-markdown-display@7.0.2(react-native@0.73.4(@babel/core@7.23.9)(@babel/preset-env@7.24.0(@babel/core@7.23.9))(react@18.2.0))(react@18.2.0):
     dependencies:
       css-to-react-native: 3.2.0