commit 95c70c73a161eb97dac2d0ba802c8f55dda8494c
Author: Fantič <58391275+FantaFantic@users.noreply.github.com>
Date:   Mon Dec 18 15:30:01 2023 +0100

    re #10917: Zoomable Image, drag, zoom

diff --git a/src/components/item/ZoomableImage.tsx b/src/components/item/ZoomableImage.tsx
index 0a2e8de..1a98a77 100644
--- a/src/components/item/ZoomableImage.tsx
+++ b/src/components/item/ZoomableImage.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 
-import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay } from "native-base"
-import { PinchGestureHandler, PanGestureHandler, State } from "react-native-gesture-handler";
+import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay, HStack } from "native-base"
+import { PinchGestureHandler, PanGestureHandler, State, GestureHandlerRootView } from "react-native-gesture-handler";
 import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import Svg, { SvgXml, Path } from "react-native-svg";
 import { FullscreenIcon, ExitfullscreenIcon } from "../general/Icons";
@@ -14,6 +14,7 @@ export const ZoomableImage = (props: { size: number, imageUri: string, fullScree
     const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
     const [viewSize, setViewSize] = useState({ height: 0, width: 0 });
 
+    const imgRef = useRef<React.ReactElement>();
     const panRef = useRef<React.ReactElement>();
     const pinchRef = useRef<React.ReactElement>();
 
@@ -90,9 +91,12 @@ export const ZoomableImage = (props: { size: number, imageUri: string, fullScree
         };
     });
 
+    const zoomOut = () => {
+        translateX.value = 0;
+        translateY.value = 0;
+        scale.value = DEFAULT_SCALE;
+    }
 
-    console.log(viewSize)
-    console.log(fullScreenMode)
     return (
         <View>
             <Pressable onPress={() => setFullScreenMode(true)}>
@@ -100,33 +104,55 @@ export const ZoomableImage = (props: { size: number, imageUri: string, fullScree
             </Pressable>
 
             <Modal isOpen={fullScreenMode} onClose={() => setFullScreenMode(false)} size="full">
-                <Box
+                <View
                     flex={1}
                     justifyContent="center"
                     alignItems="center"
-                    backgroundColor="transparent" // Make the background transparent
+                    backgroundColor="white" // Make the background transparent
                 >
-                    <Pressable
-                        position="absolute"
-                        bottom={20}
-                        right={0}
-                        padding={2}
-                        zIndex={1000}
-                        onPress={() => setFullScreenMode(false)}
-                    >
-                        {/* Your close button (you can replace this with an icon) */}
-                        <Box style={{width: 70, height: 30, backgroundColor:"white", borderRadius: 10}} alignItems={"center"} justifyContent="center">
-                            <Text>Close</Text>
-                        </Box>
-                    </Pressable>
-                    <Image
-                        height={viewSize.height}
-                        width={viewSize.width}
-                        alt="image"
-                        source={{ uri: props.imageUri }}
-                        resizeMode={"contain"}
-                    />
-                </Box>
+                    <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, bottom: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
+                        <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={1} onPress={() => { zoomOut()}}>
+                            <ExitfullscreenIcon color="white" />
+                        </Pressable>
+                        <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
+                            <FullscreenIcon color="white" />
+                        </Pressable>
+
+                    </Flex>
+                    <GestureHandlerRootView>
+                        <PinchGestureHandler
+                            ref={pinchRef}
+                            // @ts-ignore
+                            onGestureEvent={onGestureEvent}
+                            simultaneousHandlers={[imgRef, panRef]}>
+                            <Animated.View style={[{ flex: 1 }, animatedStyle]}>
+                                <PanGestureHandler
+                                    ref={panRef}
+                                    simultaneousHandlers={[imgRef, pinchRef]}
+                                    onGestureEvent={onPanEvent}
+                                    onHandlerStateChange={(nativeEvent: any) => {
+                                        if (nativeEvent.state === State.END) {
+                                            console.log(nativeEvent)
+                                        }
+                                    }}
+                                >
+                                    <Animated.View style={[{
+                                        flex: 1,
+                                    }]}>
+                                        <Image
+                                            ref={imgRef}
+                                            height={viewSize.height}
+                                            width={viewSize.width}
+                                            alt="image"
+                                            source={{ uri: props.imageUri }}
+                                            resizeMode={"contain"}
+                                        />
+                                    </Animated.View>
+                                </PanGestureHandler>
+                            </Animated.View>
+                        </PinchGestureHandler >
+                    </GestureHandlerRootView>
+                </View>
             </Modal>
         </View>
         // <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
