Update filepreview modal to support image panning/zooming (#1286)

apps/mobile-app/components/credentials/details/FilePreviewModal.tsx

@@ -9,10 +9,10 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
-  Image,
   Dimensions,
   Alert
 } from 'react-native';
+import ImageViewer from 'react-native-image-zoom-viewer';
 
 import { useColors } from '@/hooks/useColorScheme';
 
@@ -227,21 +227,18 @@ export const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     if (isImage) {
+      const imageUrls = [{ url: filePath }];
+
       return (
-        <ScrollView
-          contentContainerStyle={styles.scrollContainer}
-          maximumZoomScale={3}
-          minimumZoomScale={1}
-        >
-          <Image
-            source={{ uri: filePath }}
-            style={styles.image}
-            /**
-             * Handle image load error.
-             */
-            onError={(): void => Alert.alert('Error', 'Could not load image')}
-          />
-        </ScrollView>
+        <ImageViewer
+          imageUrls={imageUrls}
+          enableSwipeDown={false}
+          backgroundColor={colors.background}
+          /**
+           * Handle image load failure.
+           */
+          onLoadFailure={(): void => Alert.alert('Error', 'Could not load image')}
+        />
       );
     }
 

apps/mobile-app/package-lock.json

@@ -48,6 +48,7 @@
         "react-native-edge-to-edge": "1.6.0",
         "react-native-gesture-handler": "~2.24.0",
         "react-native-get-random-values": "^1.11.0",
+        "react-native-image-zoom-viewer": "^3.0.1",
         "react-native-keyboard-controller": "^1.18.6",
         "react-native-quick-crypto": "^0.7.13",
         "react-native-reanimated": "~3.17.4",
@@ -14746,6 +14747,29 @@
         "react-native": ">=0.56"
       }
     },
+    "node_modules/react-native-image-pan-zoom": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz",
+      "integrity": "sha512-BF66XeP6dzuANsPmmFsJshM2Jyh/Mo1t8FsGc1L9Q9/sVP8MJULDabB1hms+eAoqgtyhMr5BuXV3E1hJ5U5H6Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-image-zoom-viewer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-image-zoom-viewer/-/react-native-image-zoom-viewer-3.0.1.tgz",
+      "integrity": "sha512-la6s5DNSuq4GCRLsi5CZ29FPjgTpdCuGIRdO5T9rUrAtxrlpBPhhSnHrbmPVxsdtOUvxHacTh2Gfa9+RraMZQA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-native-image-pan-zoom": "^2.1.12"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",

apps/mobile-app/package.json

@@ -69,6 +69,7 @@
     "react-native-edge-to-edge": "1.6.0",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-get-random-values": "^1.11.0",
+    "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-keyboard-controller": "^1.18.6",
     "react-native-quick-crypto": "^0.7.13",
     "react-native-reanimated": "~3.17.4",