From 032217cefb35ac3d36c673f661cf971a3865a439 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 30 Dec 2024 17:37:59 -0800
Subject: [PATCH] adding image modal

---
 .../message/imageAsset/ImageAsset.styled.ts   | 14 ++++++++
 .../src/message/imageAsset/ImageAsset.tsx     | 32 ++++++++++++-------
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
index f0e2113b..70518999 100644
--- a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
+++ b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
@@ -2,6 +2,20 @@ import {StyleSheet} from 'react-native';
 import {Colors} from '../constants/Colors';
 
 export const styles = StyleSheet.create({
+  modal: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
   image: {
   },
   thumb: {
diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
index 17674782..1b7311fa 100644
--- a/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
+++ b/app/client/mobile/src/message/imageAsset/ImageAsset.tsx
@@ -1,17 +1,19 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Animated, View, Image, useAnimatedValue } from 'react-native'
+import { Modal, Pressable, Animated, View, Image, useAnimatedValue } from 'react-native'
 import { Text } from 'react-native-paper'
 import { useImageAsset } from './useImageAsset.hook';
 import { MediaAsset } from '../../conversation/Conversation';
 import { styles } from './ImageAsset.styled'
+import {BlurView} from '@react-native-community/blur';
 
 export function ImageAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
   const { state, actions } = useImageAsset(topicId, asset);
-  const fadeAnim = useAnimatedValue(0);
+  const [modal, setModal] = useState(false);
+  const opacity = useAnimatedValue(0);
 
   useEffect(() => {
     if (state.loaded) {
-      Animated.timing(fadeAnim, {
+      Animated.timing(opacity, {
         toValue: 1,
         duration: 100,
         useNativeDriver: true,
@@ -22,15 +24,23 @@ export function ImageAsset({ topicId, asset }: { topicId: string, asset: MediaAs
   return (
     <View style={styles.image}>
       { state.thumbUrl && (
-        <Animated.Image
-          style={[styles.thumb,{opacity: fadeAnim,},]}
-          resizeMode="contain"
-          height={92}
-          width={92 * state.ratio}
-          source={{ uri: state.thumbUrl }}
-          onLoad={actions.loaded}
-        />
+        <Pressable onPress={()=>setModal(true)}>
+          <Animated.Image
+            style={[styles.thumb,{opacity},]}
+            resizeMode="contain"
+            height={92}
+            width={92 * state.ratio}
+            source={{ uri: state.thumbUrl }}
+            onLoad={actions.loaded}
+          />
+        </Pressable>
       )}
+      <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={() => setModal(false)}>
+        <View style={styles.modal}>
+          <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
+<View style={{ width: 200, height: 200, backgroundColor: 'yellow' }} />
+        </View>
+      </Modal>
     </View>
   );
 }