added pinch zoom support for images

app/client/mobile/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.11",
+    "@openspacelabs/react-native-zoomable-view": "^2.3.1",
     "@react-native-clipboard/clipboard": "^1.14.2",
     "@react-native-community/blur": "^4.4.0",
     "@react-navigation/drawer": "^6.7.2",

app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts

@@ -27,6 +27,7 @@ export const styles = StyleSheet.create({
     left: 0,
     width: '100%',
     height: '100%',
+    zIndex: 0,
   },
   close: {
     display: 'flex',

app/client/mobile/src/message/imageAsset/ImageAsset.tsx

@@ -5,6 +5,7 @@ import { useImageAsset } from './useImageAsset.hook';
 import { MediaAsset } from '../../conversation/Conversation';
 import { styles } from './ImageAsset.styled'
 import {BlurView} from '@react-native-community/blur';
+import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
 
 export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) {
   const { state, actions } = useImageAsset(topicId, asset);
@@ -66,14 +67,18 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
             style={styles.full}
             resizeMode="contain"
             source={{ uri: state.thumbUrl }}
+            onLayout={actions.fullscreen}
           />
           { state.dataUrl && (
+            <ReactNativeZoomableView width={state.width} height={state.height} minZoom={1} maxZoom={30}>
               <Image
-              style={styles.full}
+                width={state.width}
+                height={state.height}
                 resizeMode="contain"
                 onError={(err)=>console.log(err)}
                 source={{ uri: state.dataUrl }}
               />
+            </ReactNativeZoomableView>
           )}
           { state.loading && (
             <View style={styles.progress}>

app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts

@@ -13,6 +13,8 @@ export function useImageAsset(topicId: string, asset: MediaAsset) {
     loading: false,
     loaded: false,
     loadPercent: 0,
+    width: 0,
+    height: 0,
   })
   const cancelled = useRef(false);
 
@@ -43,6 +45,10 @@ export function useImageAsset(topicId: string, asset: MediaAsset) {
       const { width, height } = e.nativeEvent.source;
       updateState({ loaded: true, ratio: width / height });
     },
+    fullscreen: (e) => {
+      const { width, height } = e.nativeEvent.layout;
+      updateState({ width, height });
+    },
     cancelLoad: () => {
       cancelled.current = true;
     },

app/client/mobile/yarn.lock

@@ -2210,6 +2210,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@openspacelabs/react-native-zoomable-view@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@openspacelabs/react-native-zoomable-view@npm:2.3.1"
+  dependencies:
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ">=16.8.0"
+    react-native: ">=0.54.0"
+  checksum: 2ac48d469c31b8c38aea5646544e591cbcfa1c5cd6c148cd876e77f9b95024af913ea48e1ff5c23e4f15dc846f4b27223fa93f4a9e86b7821b79de8243dc276f
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -3427,6 +3439,7 @@ __metadata:
     "@babel/preset-env": ^7.20.0
     "@babel/runtime": ^7.20.0
     "@bam.tech/react-native-image-resizer": ^3.0.11
+    "@openspacelabs/react-native-zoomable-view": ^2.3.1
     "@react-native-clipboard/clipboard": ^1.14.2
     "@react-native-community/blur": ^4.4.0
     "@react-native/babel-preset": 0.74.85