react-native-gesture-image-viewer 2.1.1 → 2.1.3

package/src/useGestureViewer.ts

@@ -5,7 +5,7 @@ import {
   type NativeSyntheticEvent,
   useWindowDimensions,
 } from 'react-native';
-import { Gesture } from 'react-native-gesture-handler';
+import { Gesture, type GestureType } from 'react-native-gesture-handler';
 import {
   Easing,
   interpolate,
@@ -16,6 +16,7 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
+
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerProps, TriggerRect } from './types';
@@ -56,6 +57,8 @@ export const useGestureViewer = <ItemT, LC>({
   const width = customWidth || screenWidth;
   const height = customHeight || screenHeight;
 
+  const dismissGestureRef = useRef<GestureType>(undefined);
+
   const [isZoomed, setIsZoomed] = useState(false);
   const [isRotated, setIsRotated] = useState(false);
   const [isPinching, setIsPinching] = useState(false);
@@ -82,25 +85,29 @@ export const useGestureViewer = <ItemT, LC>({
   const triggerTranslateY = useSharedValue(0);
   const triggerOpacity = useSharedValue(1);
 
+  const lastFocalX = useSharedValue(0);
+  const lastFocalY = useSharedValue(0);
+
   const dataLength = data?.length || 0;
 
   const animationConfig = useMemo(
     () => ({
       duration: triggerAnimation?.duration ?? 300,
-      easing: triggerAnimation?.easing ?? Easing.bezier(0.25, 0.1, 0.25, 1.0),
+      easing: triggerAnimation?.easing ?? Easing.bezier(0.25, 0.1, 0.25, 1),
       reduceMotion: triggerAnimation?.reduceMotion,
     }),
     [triggerAnimation?.duration, triggerAnimation?.easing, triggerAnimation?.reduceMotion],
   );
 
-  const dismissOptions = useMemo(() => {
-    return {
+  const dismissOptions = useMemo(
+    () => ({
       enabled: dismiss?.enabled ?? true,
-      threshold: dismiss?.threshold ?? 80,
-      resistance: dismiss?.resistance ?? 2,
       fadeBackdrop: dismiss?.fadeBackdrop ?? true,
-    };
-  }, [dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop]);
+      resistance: dismiss?.resistance ?? 2,
+      threshold: dismiss?.threshold ?? 80,
+    }),
+    [dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop],
+  );
 
   const adjustedInitialIndex = useMemo(() => {
     if (enableLoop && dataLength > 1) {
@@ -110,7 +117,10 @@ export const useGestureViewer = <ItemT, LC>({
     return initialIndex;
   }, [enableLoop, dataLength, initialIndex]);
 
-  const constrainTranslation = useMemo(() => createBoundsConstraint({ width, height }), [width, height]);
+  const constrainTranslation = useMemo(
+    () => createBoundsConstraint({ height, width }),
+    [width, height],
+  );
 
   const scrollTo = useCallback(
     (index: number, animated: boolean) => {
@@ -236,7 +246,16 @@ export const useGestureViewer = <ItemT, LC>({
     return () => {
       runAfterInteractions?.cancel();
     };
-  }, [adjustedInitialIndex, translateY, backdropOpacity, translateX, scale, startScale, rotation, scrollTo]);
+  }, [
+    adjustedInitialIndex,
+    translateY,
+    backdropOpacity,
+    translateX,
+    scale,
+    startScale,
+    rotation,
+    scrollTo,
+  ]);
 
   useEffect(() => {
     if (
@@ -265,7 +284,16 @@ export const useGestureViewer = <ItemT, LC>({
     }, intervalMs);
 
     return () => clearInterval(interval);
-  }, [autoPlay, autoPlayInterval, manager, dataLength, currentIndex, enableLoop, isZoomed, isRotated]);
+  }, [
+    autoPlay,
+    autoPlayInterval,
+    manager,
+    dataLength,
+    currentIndex,
+    enableLoop,
+    isZoomed,
+    isRotated,
+  ]);
 
   useEffect(() => {
     onAnimationCompleteRef.current = triggerAnimation?.onAnimationComplete;
@@ -317,7 +345,7 @@ export const useGestureViewer = <ItemT, LC>({
 
     if (node && typeof node.measure === 'function') {
       node.measure((_x, _y, width, height, pageX, pageY) => {
-        triggerRectRef.current = { x: pageX, y: pageY, width, height };
+        triggerRectRef.current = { height, width, x: pageX, y: pageY };
         triggerOpacity.value = 0;
         setShouldStartTriggerAnimation(true);
         registry.clearTriggerNode(id);
@@ -335,7 +363,10 @@ export const useGestureViewer = <ItemT, LC>({
     if (triggerRectRef.current) {
       const endX = triggerRectRef.current.x + triggerRectRef.current.width / 2 - width / 2;
       const endY = triggerRectRef.current.y + triggerRectRef.current.height / 2 - height / 2;
-      const endScale = Math.min(triggerRectRef.current.width / width, triggerRectRef.current.height / height);
+      const endScale = Math.min(
+        triggerRectRef.current.width / width,
+        triggerRectRef.current.height / height,
+      );
 
       triggerScale.value = withTiming(endScale, animationConfig);
       triggerTranslateX.value = withTiming(endX, animationConfig);
@@ -369,7 +400,7 @@ export const useGestureViewer = <ItemT, LC>({
         return;
       }
 
-      const contentOffset = event.nativeEvent.contentOffset;
+      const { contentOffset } = event.nativeEvent;
       const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
 
       const isLoopHandled = manager?.handleMomentumScrollEnd(scrollIndex);
@@ -378,7 +409,11 @@ export const useGestureViewer = <ItemT, LC>({
         return;
       }
 
-      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(scrollIndex, dataLength, enableLoop);
+      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(
+        scrollIndex,
+        dataLength,
+        enableLoop,
+      );
 
       if (needsJump && jumpToIndex !== undefined) {
         scrollTo(jumpToIndex, false);
@@ -428,6 +463,7 @@ export const useGestureViewer = <ItemT, LC>({
       .activeCursor('grabbing')
       .activeOffsetY([-10, 10])
       .failOffsetX([-10, 10])
+      .withRef(dismissGestureRef)
       .enabled(canDismiss)
       .onUpdate((event) => {
         translateY.value = event.translationY / dismissOptions.resistance;
@@ -439,212 +475,230 @@ export const useGestureViewer = <ItemT, LC>({
         }
 
         translateY.value = withSpring(0, {
-          stiffness: 600,
           damping: 50,
+          energyThreshold: 6e-9,
           mass: 4,
           overshootClamping: false,
-          energyThreshold: 6e-9,
+          stiffness: 600,
         });
       });
   }, [translateY, dismissOptions, handleDismiss, isZoomed]);
 
-  const zoomPinchGesture = useMemo(() => {
-    return Gesture.Pinch()
-      .enabled(enablePinchZoom)
-      .onTouchesDown((event) => {
-        if (event.numberOfTouches === 2) {
-          scheduleOnRN(setIsPinching, true);
-        }
-      })
-      .onBegin(() => {
-        startScale.value = scale.value;
-        initialTranslateX.value = translateX.value;
-        initialTranslateY.value = translateY.value;
-      })
-      .onUpdate((event) => {
-        const newScale = startScale.value * event.scale;
+  const zoomPinchGesture = useMemo(
+    () =>
+      Gesture.Pinch()
+        .enabled(enablePinchZoom)
+        .onTouchesDown((event) => {
+          if (event.numberOfTouches === 2) {
+            scheduleOnRN(setIsPinching, true);
+          }
+        })
+        .onBegin((event) => {
+          startScale.value = scale.value;
+          initialTranslateX.value = translateX.value;
+          initialTranslateY.value = translateY.value;
+          lastFocalX.value = event.focalX;
+          lastFocalY.value = event.focalY;
+        })
+        .onUpdate((event) => {
+          const newScale = startScale.value * event.scale;
+
+          scale.value = newScale;
+
+          if (newScale <= 1) {
+            translateX.value = withTiming(0);
+            translateY.value = withTiming(0);
+            return;
+          }
+
+          const focalDeltaX = Math.abs(event.focalX - lastFocalX.value);
+          const focalDeltaY = Math.abs(event.focalY - lastFocalY.value);
+          const threshold = 50;
+
+          if (focalDeltaX < threshold && focalDeltaY < threshold) {
+            lastFocalX.value = event.focalX;
+            lastFocalY.value = event.focalY;
+          }
+
+          const deltaScale = newScale - startScale.value;
+          const centerX = lastFocalX.value - width / 2;
+          const centerY = lastFocalY.value - height / 2;
+
+          // NOTE 새로운 이동값 = 기존 이동값 - (중심점 거리 × 스케일 변화량) / 원래 스케일 (중심점이 화면 중심에서 멀수록, 확대 배율이 클수록 더 많이 이동)
+          const newTranslateX = initialTranslateX.value - (centerX * deltaScale) / startScale.value;
+          const newTranslateY = initialTranslateY.value - (centerY * deltaScale) / startScale.value;
+
+          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+            constrainTranslation({
+              scale: newScale,
+              translateX: newTranslateX,
+              translateY: newTranslateY,
+            });
 
-        scale.value = newScale;
-
-        if (event.numberOfPointers !== 2) {
-          return;
-        }
-
-        if (newScale <= 1) {
-          translateX.value = withTiming(0);
-          translateY.value = withTiming(0);
-          return;
-        }
-
-        const deltaScale = newScale - startScale.value;
-        const centerX = event.focalX - width / 2;
-        const centerY = event.focalY - height / 2;
-
-        // NOTE 새로운 이동값 = 기존 이동값 - (중심점 거리 × 스케일 변화량) / 원래 스케일 (중심점이 화면 중심에서 멀수록, 확대 배율이 클수록 더 많이 이동)
-        const newTranslateX = initialTranslateX.value - (centerX * deltaScale) / startScale.value;
-        const newTranslateY = initialTranslateY.value - (centerY * deltaScale) / startScale.value;
-
-        const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-          translateX: newTranslateX,
-          translateY: newTranslateY,
-          scale: newScale,
-        });
-
-        translateX.value = constrainedTranslateX;
-        translateY.value = constrainedTranslateY;
-      })
-      .onEnd(() => {
-        if (scale.value > maxZoomScale) {
-          scale.value = withTiming(maxZoomScale, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-
-          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-            translateX: translateX.value,
-            translateY: translateY.value,
-            scale: maxZoomScale,
-          });
+          translateX.value = constrainedTranslateX;
+          translateY.value = constrainedTranslateY;
+        })
+        .onEnd(() => {
+          if (scale.value > maxZoomScale) {
+            scale.value = withTiming(maxZoomScale, {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+
+            const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+              constrainTranslation({
+                scale: maxZoomScale,
+                translateX: translateX.value,
+                translateY: translateY.value,
+              });
+
+            translateX.value = withTiming(constrainedTranslateX);
+            translateY.value = withTiming(constrainedTranslateY);
+
+            return;
+          }
+
+          if (scale.value < 1) {
+            scale.value = withTiming(1, {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+            translateX.value = withTiming(0);
+            translateY.value = withTiming(0);
+            initialTranslateX.value = withTiming(0);
+            initialTranslateY.value = withTiming(0);
+            return;
+          }
+
+          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+            constrainTranslation({
+              scale: scale.value,
+              translateX: translateX.value,
+              translateY: translateY.value,
+            });
 
           translateX.value = withTiming(constrainedTranslateX);
           translateY.value = withTiming(constrainedTranslateY);
+        })
+        .onTouchesUp(() => {
+          scheduleOnRN(setIsPinching, false);
+        })
+        .onFinalize(() => {
+          scheduleOnRN(setIsPinching, false);
+        }),
+    [
+      scale,
+      enablePinchZoom,
+      maxZoomScale,
+      translateX,
+      translateY,
+      startScale,
+      initialTranslateX,
+      initialTranslateY,
+      width,
+      height,
+      constrainTranslation,
+      lastFocalX,
+      lastFocalY,
+    ],
+  );
 
-          return;
-        }
+  const zoomPanGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(enablePanWhenZoomed && isZoomed)
+        .activeCursor('grabbing')
+        .averageTouches(true)
+        .onBegin(() => {
+          initialTranslateX.value = translateX.value;
+          initialTranslateY.value = translateY.value;
+        })
+        .onUpdate((event) => {
+          if (scale.value > 1) {
+            const newTranslateX = initialTranslateX.value + event.translationX;
+            const newTranslateY = initialTranslateY.value + event.translationY;
+
+            const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+              constrainTranslation({
+                scale: scale.value,
+                translateX: newTranslateX,
+                translateY: newTranslateY,
+              });
+
+            translateX.value = constrainedTranslateX;
+            translateY.value = constrainedTranslateY;
+          }
+        }),
+    [
+      translateX,
+      translateY,
+      enablePanWhenZoomed,
+      isZoomed,
+      scale,
+      initialTranslateX,
+      initialTranslateY,
+      constrainTranslation,
+    ],
+  );
 
-        if (scale.value < 1) {
-          scale.value = withTiming(1, {
+  const doubleTapGesture = useMemo(
+    () =>
+      Gesture.Tap()
+        .enabled(enableDoubleTapZoom)
+        .numberOfTaps(2)
+        .onEnd((event) => {
+          const nextScale = scale.value > 1 ? 1 : maxZoomScale;
+
+          if (nextScale > 1) {
+            const centerX = event.x - width / 2;
+            const centerY = event.y - height / 2;
+
+            // NOTE 확대로 밀려난 거리만큼 반대로 이동해서 탭 지점을 제자리에 유지
+            translateX.value = withTiming(-centerX * (nextScale - 1), {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+            translateY.value = withTiming(-centerY * (nextScale - 1), {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+          } else {
+            translateX.value = withTiming(0, {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+            translateY.value = withTiming(0, {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+          }
+
+          scale.value = withTiming(nextScale, {
             duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
+            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
           });
-          translateX.value = withTiming(0);
-          translateY.value = withTiming(0);
-          initialTranslateX.value = withTiming(0);
-          initialTranslateY.value = withTiming(0);
-          return;
-        }
-
-        const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-          translateX: translateX.value,
-          translateY: translateY.value,
-          scale: scale.value,
-        });
-
-        translateX.value = withTiming(constrainedTranslateX);
-        translateY.value = withTiming(constrainedTranslateY);
-      })
-      .onTouchesUp(() => {
-        scheduleOnRN(setIsPinching, false);
-      })
-      .onFinalize(() => {
-        scheduleOnRN(setIsPinching, false);
-      });
-  }, [
-    scale,
-    enablePinchZoom,
-    maxZoomScale,
-    translateX,
-    translateY,
-    startScale,
-    initialTranslateX,
-    initialTranslateY,
-    width,
-    height,
-    constrainTranslation,
-  ]);
-
-  const zoomPanGesture = useMemo(() => {
-    return Gesture.Pan()
-      .enabled(enablePanWhenZoomed && isZoomed)
-      .activeCursor('grabbing')
-      .averageTouches(true)
-      .onBegin(() => {
-        initialTranslateX.value = translateX.value;
-        initialTranslateY.value = translateY.value;
-      })
-      .onUpdate((event) => {
-        if (scale.value > 1) {
-          const newTranslateX = initialTranslateX.value + event.translationX;
-          const newTranslateY = initialTranslateY.value + event.translationY;
-
-          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-            translateX: newTranslateX,
-            translateY: newTranslateY,
-            scale: scale.value,
-          });
-
-          translateX.value = constrainedTranslateX;
-          translateY.value = constrainedTranslateY;
-        }
-      });
-  }, [
-    translateX,
-    translateY,
-    enablePanWhenZoomed,
-    isZoomed,
-    scale,
-    initialTranslateX,
-    initialTranslateY,
-    constrainTranslation,
-  ]);
-
-  const doubleTapGesture = useMemo(() => {
-    return Gesture.Tap()
-      .enabled(enableDoubleTapZoom)
-      .numberOfTaps(2)
-      .onEnd((event) => {
-        const nextScale = scale.value > 1 ? 1 : maxZoomScale;
-
-        if (nextScale > 1) {
-          const centerX = event.x - width / 2;
-          const centerY = event.y - height / 2;
+        }),
+    [scale, enableDoubleTapZoom, maxZoomScale, translateX, translateY, width, height],
+  );
 
-          // NOTE 확대로 밀려난 거리만큼 반대로 이동해서 탭 지점을 제자리에 유지
-          translateX.value = withTiming(-centerX * (nextScale - 1), {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-          translateY.value = withTiming(-centerY * (nextScale - 1), {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-        } else {
-          translateX.value = withTiming(0, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-          translateY.value = withTiming(0, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-        }
+  const zoomGesture = useMemo(
+    () => Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, doubleTapGesture)),
+    [zoomPinchGesture, zoomPanGesture, doubleTapGesture],
+  );
 
-        scale.value = withTiming(nextScale, {
-          duration: 300,
-          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-        });
-      });
-  }, [scale, enableDoubleTapZoom, maxZoomScale, translateX, translateY, width, height]);
-
-  const zoomGesture = useMemo(() => {
-    return Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, doubleTapGesture));
-  }, [zoomPinchGesture, zoomPanGesture, doubleTapGesture]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: triggerOpacity.value,
-      transform: [
-        { translateX: triggerTranslateX.value },
-        { translateY: triggerTranslateY.value },
-        { scale: triggerScale.value },
-
-        { translateY: translateY.value },
-        { translateX: translateX.value },
-        { scale: scale.value },
-        { rotate: `${rotation.value}deg` },
-      ],
-    };
-  });
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: triggerOpacity.value,
+    transform: [
+      { translateX: triggerTranslateX.value },
+      { translateY: triggerTranslateY.value },
+      { scale: triggerScale.value },
+
+      { translateY: translateY.value },
+      { translateX: translateX.value },
+      { scale: scale.value },
+      { rotate: `${rotation.value}deg` },
+    ],
+  }));
 
   const backdropStyle = useAnimatedStyle(() => {
     const baseOpacity = triggerOpacity.value;
@@ -658,24 +712,29 @@ export const useGestureViewer = <ItemT, LC>({
     return { opacity: baseOpacity * dismissOpacity };
   }, [dismissOptions.fadeBackdrop]);
 
+  const nativeScrollGesture = useMemo(() => {
+    return Gesture.Native().requireExternalGestureToFail(dismissGestureRef);
+  }, []);
+
   const onScrollBeginDrag = useCallback(() => {
     manager?.handleScrollBeginDrag();
   }, [manager]);
 
   return {
+    animatedStyle,
+    backdropStyle,
     dataLength,
-    listRef,
-    isZoomed,
-    isRotated,
-    isPinching,
     dismissGesture,
-    zoomGesture,
+    handleDismiss,
+    isPinching,
+    isRotated,
 
+    isZoomed,
+    listRef,
+    nativeScrollGesture,
     onMomentumScrollEnd,
-    onScrollBeginDrag,
-    handleDismiss,
 
-    animatedStyle,
-    backdropStyle,
+    onScrollBeginDrag,
+    zoomGesture,
   };
 };

package/src/useGestureViewerController.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
+
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerController } from './types';

package/src/useGestureViewerEvent.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerEventCallback, GestureViewerEventType } from './types';
@@ -71,7 +72,10 @@ export function useGestureViewerEvent<T extends GestureViewerEventType>(
   callback?: GestureViewerEventCallback<T>,
 ) {
   const id = typeof idOrEventType === 'string' && callback ? idOrEventType : 'default';
-  const eventType = typeof idOrEventType === 'string' && callback ? (eventTypeOrCallback as T) : (idOrEventType as T);
+  const eventType =
+    typeof idOrEventType === 'string' && callback
+      ? (eventTypeOrCallback as T)
+      : (idOrEventType as T);
   const finalCallback = callback || (eventTypeOrCallback as GestureViewerEventCallback<T>);
 
   useEffect(() => {

package/src/useGestureViewerState.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useSyncExternalStore } from 'react';
+
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerState } from './types';