@chem-po/react-native 0.0.24 → 0.0.25

package/src/components/image/ImageViewModal.tsx

@@ -1,8 +1,9 @@
 import { useScreen } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { Animated, Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'
 import { LoadingLogo } from '../loading/Loading'
 
 interface ImageViewModalProps {
@@ -17,18 +18,15 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose,
   const screenHeight = useScreen(s => s.height)
   const [imageSize, setImageSize] = useState({ width: screenWidth / 2, height: screenHeight / 2 })
 
-  // Animated values for zoom and pan
-  const scale = useRef(new Animated.Value(1)).current
-  const translateX = useRef(new Animated.Value(0)).current
-  const translateY = useRef(new Animated.Value(0)).current
+  // Shared values for zoom and pan (reanimated)
+  const scale = useSharedValue(1)
+  const translateX = useSharedValue(0)
+  const translateY = useSharedValue(0)
 
-  // Gesture state
-  const savedScale = useRef(1)
-  const savedTranslateX = useRef(0)
-  const savedTranslateY = useRef(0)
-  const currentScale = useRef(1)
-  const currentTranslateX = useRef(0)
-  const currentTranslateY = useRef(0)
+  // Saved state for gesture handling
+  const savedScale = useSharedValue(1)
+  const savedTranslateX = useSharedValue(0)
+  const savedTranslateY = useSharedValue(0)
 
   const { height, width } = useMemo(() => {
     if (loading) return imageSize
@@ -51,121 +49,116 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose,
 
   // Reset zoom and pan when modal opens/closes
   const resetTransform = useCallback(() => {
-    scale.setValue(1)
-    translateX.setValue(0)
-    translateY.setValue(0)
-    savedScale.current = 1
-    savedTranslateX.current = 0
-    savedTranslateY.current = 0
-    currentScale.current = 1
-    currentTranslateX.current = 0
-    currentTranslateY.current = 0
-  }, [scale, translateX, translateY])
+    scale.value = 1
+    translateX.value = 0
+    translateY.value = 0
+    savedScale.value = 1
+    savedTranslateX.value = 0
+    savedTranslateY.value = 0
+  }, [scale, translateX, translateY, savedScale, savedTranslateX, savedTranslateY])
 
   // Reset when modal closes or src changes
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen || !src) {
       resetTransform()
     }
   }, [isOpen, src, resetTransform])
 
-  // Pan gesture
+  // Pan gesture with worklet
   const panGesture = Gesture.Pan()
     .onUpdate(event => {
+      'worklet'
       // Only allow panning if zoomed in
-      if (savedScale.current > 1) {
-        const newTranslateX = savedTranslateX.current + event.translationX
-        const newTranslateY = savedTranslateY.current + event.translationY
+      if (savedScale.value > 1) {
+        const newTranslateX = savedTranslateX.value + event.translationX
+        const newTranslateY = savedTranslateY.value + event.translationY
 
         // Calculate bounds to prevent panning too far
-        const maxTranslateX = (width * savedScale.current - width) / 2
-        const maxTranslateY = (height * savedScale.current - height) / 2
+        const maxTranslateX = (width * savedScale.value - width) / 2
+        const maxTranslateY = (height * savedScale.value - height) / 2
 
         const boundedTranslateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
         const boundedTranslateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
 
-        translateX.setValue(boundedTranslateX)
-        translateY.setValue(boundedTranslateY)
-        currentTranslateX.current = boundedTranslateX
-        currentTranslateY.current = boundedTranslateY
+        translateX.value = boundedTranslateX
+        translateY.value = boundedTranslateY
       }
     })
     .onEnd(() => {
-      savedTranslateX.current = currentTranslateX.current
-      savedTranslateY.current = currentTranslateY.current
+      'worklet'
+      savedTranslateX.value = translateX.value
+      savedTranslateY.value = translateY.value
     })
 
-  // Pinch gesture
+  // Pinch gesture with worklet
   const pinchGesture = Gesture.Pinch()
     .onUpdate(event => {
-      const newScale = savedScale.current * event.scale
+      'worklet'
+      const newScale = savedScale.value * event.scale
       // Limit zoom between 1x and 5x
       const boundedScale = Math.max(1, Math.min(5, newScale))
-      scale.setValue(boundedScale)
-      currentScale.current = boundedScale
+      scale.value = boundedScale
 
       // If zooming out to 1x, reset position
       if (boundedScale <= 1) {
-        translateX.setValue(0)
-        translateY.setValue(0)
-        currentTranslateX.current = 0
-        currentTranslateY.current = 0
+        translateX.value = 0
+        translateY.value = 0
       }
     })
     .onEnd(() => {
-      savedScale.current = currentScale.current
+      'worklet'
+      savedScale.value = scale.value
       // If scale is close to 1, snap back to 1
-      if (savedScale.current < 1.1) {
-        Animated.parallel([
-          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
-          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
-          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
-        ]).start()
-        savedScale.current = 1
-        savedTranslateX.current = 0
-        savedTranslateY.current = 0
-        currentScale.current = 1
-        currentTranslateX.current = 0
-        currentTranslateY.current = 0
+      if (savedScale.value < 1.1) {
+        scale.value = withSpring(1)
+        translateX.value = withSpring(0)
+        translateY.value = withSpring(0)
+        savedScale.value = 1
+        savedTranslateX.value = 0
+        savedTranslateY.value = 0
       } else {
-        savedTranslateX.current = currentTranslateX.current
-        savedTranslateY.current = currentTranslateY.current
+        savedTranslateX.value = translateX.value
+        savedTranslateY.value = translateY.value
       }
     })
 
-  // Double tap to zoom
+  // Double tap to zoom with worklet
   const doubleTapGesture = Gesture.Tap()
     .numberOfTaps(2)
     .onEnd(() => {
-      if (savedScale.current > 1) {
+      'worklet'
+      if (savedScale.value > 1) {
         // Zoom out
-        Animated.parallel([
-          Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
-          Animated.spring(translateX, { toValue: 0, useNativeDriver: true }),
-          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
-        ]).start()
-        savedScale.current = 1
-        savedTranslateX.current = 0
-        savedTranslateY.current = 0
-        currentScale.current = 1
-        currentTranslateX.current = 0
-        currentTranslateY.current = 0
+        scale.value = withSpring(1)
+        translateX.value = withSpring(0)
+        translateY.value = withSpring(0)
+        savedScale.value = 1
+        savedTranslateX.value = 0
+        savedTranslateY.value = 0
       } else {
         // Zoom in to 2x
-        Animated.spring(scale, { toValue: 2, useNativeDriver: true }).start()
-        savedScale.current = 2
-        currentScale.current = 2
+        scale.value = withSpring(2)
+        savedScale.value = 2
       }
     })
 
-  // Test simple single tap gesture
-
-  // Combine gestures - simplified approach
+  // Combine gestures
   const combinedGestures = Gesture.Race(
     doubleTapGesture,
     Gesture.Simultaneous(panGesture, pinchGesture),
   )
 
+  // Animated style using reanimated
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { scale: scale.value },
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+      ],
+    }
+  })
+
   if (!isOpen) {
     return null
   }
@@ -188,8 +181,8 @@ export const ImageViewModal: React.FC<ImageViewModalProps> = ({ isOpen, onClose,
                     width,
                     height,
                     opacity: loading ? 0 : 1,
-                    transform: [{ scale }, { translateX }, { translateY }],
                   },
+                  animatedStyle,
                 ]}>
                 <Image
                   source={src ? { uri: src } : undefined}