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

package/src/useGestureViewer.ts

@@ -1,10 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  InteractionManager,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  useWindowDimensions,
-} from 'react-native';
+import { InteractionManager, Platform, type View, useWindowDimensions } from 'react-native';
 import { Gesture, type GestureType } from 'react-native-gesture-handler';
 import {
   Easing,
@@ -20,7 +15,9 @@ import { scheduleOnRN } from 'react-native-worklets';
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerProps, TriggerRect } from './types';
-import { createBoundsConstraint, createScrollAction, getLoopAdjustedIndex } from './utils';
+import { useGestureViewerPaging } from './useGestureViewerPaging';
+import { createBoundsConstraint, createScrollAction } from './utils';
+import { applyTapZoomAtPoint } from './utils/tapZoom';
 
 type UseGestureViewerProps<ItemT, LC> = Omit<
   GestureViewerProps<ItemT, LC>,
@@ -65,11 +62,17 @@ export const useGestureViewer = <ItemT, LC>({
   const [shouldStartTriggerAnimation, setShouldStartTriggerAnimation] = useState(false);
   const [manager, setManager] = useState<GestureViewerManager | null>(null);
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [activeTriggerNode, setActiveTriggerNode] = useState<View | null>(null);
 
   const listRef = useRef<any>(null);
   const triggerRectRef = useRef<TriggerRect | null>(null);
+  const pendingIndexRef = useRef(initialIndex);
   const onAnimationCompleteRef = useRef(triggerAnimation?.onAnimationComplete);
 
+  const isValidTriggerRect = useCallback((rect: TriggerRect | null): rect is TriggerRect => {
+    return !!rect && rect.width > 0 && rect.height > 0;
+  }, []);
+
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
   const startScale = useSharedValue(1);
@@ -131,6 +134,48 @@ export const useGestureViewer = <ItemT, LC>({
     [width, itemSpacing],
   );
 
+  const resetTransformState = useCallback(() => {
+    translateX.value = withTiming(0);
+    translateY.value = withTiming(0);
+    initialTranslateX.value = withTiming(0);
+    initialTranslateY.value = withTiming(0);
+    startScale.value = withTiming(1);
+    scale.value = withTiming(1);
+    rotation.value = 0;
+  }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
+
+  const syncPendingIndex = useCallback(
+    (nextIndex: number) => {
+      if (nextIndex < 0 || nextIndex >= dataLength) {
+        return;
+      }
+
+      pendingIndexRef.current = nextIndex;
+    },
+    [dataLength],
+  );
+
+  const syncCurrentIndex = useCallback(
+    (nextIndex: number) => {
+      if (!manager || nextIndex < 0 || nextIndex >= dataLength) {
+        return;
+      }
+
+      pendingIndexRef.current = nextIndex;
+
+      const managerCurrentIndex = manager.getState().currentIndex;
+
+      if (nextIndex === managerCurrentIndex) {
+        return;
+      }
+
+      manager.setCurrentIndex(nextIndex);
+      manager.notifyStateChange();
+      resetTransformState();
+    },
+    [dataLength, manager, resetTransformState],
+  );
+
   const emitZoomChange = useCallback(
     (currentScale: number, prevScale: number | null) => {
       if (manager) {
@@ -180,7 +225,10 @@ export const useGestureViewer = <ItemT, LC>({
 
     const unsubscribeFromRegistry = registry.subscribeToManager(id, (managerInstance) => {
       setManager(managerInstance);
-      unsubscribe = managerInstance?.subscribe((state) => setCurrentIndex(state.currentIndex));
+      unsubscribe = managerInstance?.subscribe((state) => {
+        pendingIndexRef.current = state.currentIndex;
+        setCurrentIndex(state.currentIndex);
+      });
     });
 
     return () => {
@@ -190,6 +238,12 @@ export const useGestureViewer = <ItemT, LC>({
   }, [id]);
 
   useEffect(() => {
+    return registry.subscribeToActiveTrigger(id, setActiveTriggerNode);
+  }, [id]);
+
+  useEffect(() => {
+    pendingIndexRef.current = initialIndex;
+
     if (!manager) {
       return;
     }
@@ -200,6 +254,7 @@ export const useGestureViewer = <ItemT, LC>({
     manager.setWidth(width + itemSpacing);
     manager.setHeight(height);
     manager.setZoomSharedValues(scale, translateX, translateY, maxZoomScale);
+    manager.setResetTransformCallback(resetTransformState);
     manager.setRotation(rotation);
     manager.setEnableLoop(enableLoop);
     manager.notifyStateChange();
@@ -214,6 +269,7 @@ export const useGestureViewer = <ItemT, LC>({
     enableLoop,
     scale,
     height,
+    resetTransformState,
     translateX,
     translateY,
     rotation,
@@ -257,44 +313,6 @@ export const useGestureViewer = <ItemT, LC>({
     scrollTo,
   ]);
 
-  useEffect(() => {
-    if (
-      !autoPlay ||
-      !manager ||
-      dataLength <= 1 ||
-      isZoomed ||
-      isRotated ||
-      (!enableLoop && currentIndex === dataLength - 1)
-    ) {
-      return;
-    }
-
-    const intervalMs = Math.max(250, Math.floor(autoPlayInterval || 0));
-
-    if (!Number.isFinite(intervalMs)) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (isZoomed || isRotated) {
-        return;
-      }
-
-      manager.goToNext();
-    }, intervalMs);
-
-    return () => clearInterval(interval);
-  }, [
-    autoPlay,
-    autoPlayInterval,
-    manager,
-    dataLength,
-    currentIndex,
-    enableLoop,
-    isZoomed,
-    isRotated,
-  ]);
-
   useEffect(() => {
     onAnimationCompleteRef.current = triggerAnimation?.onAnimationComplete;
   }, [triggerAnimation?.onAnimationComplete]);
@@ -341,32 +359,41 @@ export const useGestureViewer = <ItemT, LC>({
   ]);
 
   useEffect(() => {
-    const node = registry.getTriggerNode(id);
-
-    if (node && typeof node.measure === 'function') {
-      node.measure((_x, _y, width, height, pageX, pageY) => {
-        triggerRectRef.current = { height, width, x: pageX, y: pageY };
-        triggerOpacity.value = 0;
-        setShouldStartTriggerAnimation(true);
-        registry.clearTriggerNode(id);
-      });
+    if (!activeTriggerNode || typeof activeTriggerNode.measure !== 'function') {
+      return;
     }
 
+    activeTriggerNode.measure((_x, _y, measuredWidth, measuredHeight, pageX, pageY) => {
+      const nextTriggerRect = {
+        height: measuredHeight,
+        width: measuredWidth,
+        x: pageX,
+        y: pageY,
+      } satisfies TriggerRect;
+
+      if (!isValidTriggerRect(nextTriggerRect)) {
+        registry.clearActiveTriggerNode(id);
+        return;
+      }
+
+      triggerRectRef.current = nextTriggerRect;
+      triggerOpacity.value = 0;
+      setShouldStartTriggerAnimation(true);
+      registry.clearActiveTriggerNode(id);
+    });
+  }, [activeTriggerNode, id, isValidTriggerRect, triggerOpacity]);
+
+  useEffect(() => {
     return () => {
       triggerRectRef.current = null;
     };
-  }, [id, triggerOpacity]);
+  }, []);
 
-  const handleDismiss = useCallback(() => {
-    onDismissStart?.();
-
-    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 animateDismissToRect = useCallback(
+    (rect: TriggerRect) => {
+      const endX = rect.x + rect.width / 2 - width / 2;
+      const endY = rect.y + rect.height / 2 - height / 2;
+      const endScale = Math.min(rect.width / width, rect.height / height);
 
       triggerScale.value = withTiming(endScale, animationConfig);
       triggerTranslateX.value = withTiming(endX, animationConfig);
@@ -376,83 +403,62 @@ export const useGestureViewer = <ItemT, LC>({
           scheduleOnRN(onDismiss);
         }
       });
-      return;
-    }
+    },
+    [
+      animationConfig,
+      height,
+      onDismiss,
+      triggerOpacity,
+      triggerScale,
+      triggerTranslateX,
+      triggerTranslateY,
+      width,
+    ],
+  );
 
+  const dismissWithoutTrigger = useCallback(() => {
     if (onDismiss) {
       scheduleOnRN(onDismiss);
     }
-  }, [
-    animationConfig,
-    onDismiss,
-    onDismissStart,
-    width,
-    height,
-    triggerTranslateX,
-    triggerScale,
-    triggerTranslateY,
-    triggerOpacity,
-  ]);
+  }, [onDismiss]);
 
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableHorizontalSwipe) {
-        return;
-      }
-
-      const { contentOffset } = event.nativeEvent;
-      const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
+  const handleDismiss = useCallback(() => {
+    onDismissStart?.();
 
-      const isLoopHandled = manager?.handleMomentumScrollEnd(scrollIndex);
+    const dismissTargetIndex = pendingIndexRef.current;
+    const indexedTriggerNode = registry.getIndexedTriggerNode(id, dismissTargetIndex);
 
-      if (isLoopHandled) {
-        return;
-      }
+    if (indexedTriggerNode && typeof indexedTriggerNode.measure === 'function') {
+      indexedTriggerNode.measure((_x, _y, measuredWidth, measuredHeight, pageX, pageY) => {
+        const currentTriggerRect = {
+          height: measuredHeight,
+          width: measuredWidth,
+          x: pageX,
+          y: pageY,
+        } satisfies TriggerRect;
 
-      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(
-        scrollIndex,
-        dataLength,
-        enableLoop,
-      );
+        if (isValidTriggerRect(currentTriggerRect)) {
+          animateDismissToRect(currentTriggerRect);
+          return;
+        }
 
-      if (needsJump && jumpToIndex !== undefined) {
-        scrollTo(jumpToIndex, false);
-      }
+        if (isValidTriggerRect(triggerRectRef.current)) {
+          animateDismissToRect(triggerRectRef.current);
+          return;
+        }
 
-      const currentIndex = manager?.getState()?.currentIndex;
+        dismissWithoutTrigger();
+      });
+      return;
+    }
 
-      if (realIndex !== currentIndex && realIndex >= 0 && realIndex < dataLength) {
-        if (manager) {
-          manager.setCurrentIndex(realIndex);
-          manager.notifyStateChange();
-        }
+    if (isValidTriggerRect(triggerRectRef.current)) {
+      animateDismissToRect(triggerRectRef.current);
+      return;
+    }
 
-        translateX.value = withTiming(0);
-        translateY.value = withTiming(0);
-        initialTranslateX.value = withTiming(0);
-        initialTranslateY.value = withTiming(0);
-        startScale.value = withTiming(1);
-        scale.value = withTiming(1);
-        rotation.value = 0;
-      }
-    },
-    [
-      scrollTo,
-      manager,
-      dataLength,
-      width,
-      itemSpacing,
-      enableHorizontalSwipe,
-      enableLoop,
-      translateX,
-      translateY,
-      scale,
-      initialTranslateX,
-      initialTranslateY,
-      startScale,
-      rotation,
-    ],
-  );
+    dismissWithoutTrigger();
+  }, [animateDismissToRect, dismissWithoutTrigger, id, isValidTriggerRect, onDismissStart]);
 
   const dismissGesture = useMemo(() => {
     const canDismiss = !isZoomed && dismissOptions.enabled;
@@ -644,41 +650,21 @@ export const useGestureViewer = <ItemT, LC>({
   const doubleTapGesture = useMemo(
     () =>
       Gesture.Tap()
-        .enabled(enableDoubleTapZoom)
+        .enabled(enableDoubleTapZoom && Platform.OS !== 'web')
         .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),
+          applyTapZoomAtPoint({
+            x: event.x,
+            y: event.y,
+            width,
+            height,
+            maxZoomScale,
+            scale,
+            translateX,
+            translateY,
           });
         }),
-    [scale, enableDoubleTapZoom, maxZoomScale, translateX, translateY, width, height],
+    [enableDoubleTapZoom, height, maxZoomScale, scale, translateX, translateY, width],
   );
 
   const zoomGesture = useMemo(
@@ -716,9 +702,30 @@ export const useGestureViewer = <ItemT, LC>({
     return Gesture.Native().requireExternalGestureToFail(dismissGestureRef);
   }, []);
 
-  const onScrollBeginDrag = useCallback(() => {
-    manager?.handleScrollBeginDrag();
-  }, [manager]);
+  const { onMomentumScrollEnd, onScroll, onScrollBeginDrag, onWebDoubleClick } =
+    useGestureViewerPaging({
+      adjustedInitialIndex,
+      autoPlay,
+      autoPlayInterval,
+      currentIndex,
+      dataLength,
+      enableDoubleTapZoom,
+      enableHorizontalSwipe,
+      enableLoop,
+      height,
+      isRotated,
+      isZoomed,
+      itemSpacing,
+      manager,
+      maxZoomScale,
+      scale,
+      scrollTo,
+      syncCurrentIndex,
+      syncPendingIndex,
+      translateX,
+      translateY,
+      width,
+    });
 
   return {
     animatedStyle,
@@ -732,7 +739,9 @@ export const useGestureViewer = <ItemT, LC>({
     isZoomed,
     listRef,
     nativeScrollGesture,
+    onWebDoubleClick,
     onMomentumScrollEnd,
+    onScroll,
 
     onScrollBeginDrag,
     zoomGesture,

package/src/useGestureViewerPaging.ts

@@ -0,0 +1,128 @@
+import { useCallback, useEffect } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+import type {
+  UseGestureViewerPagingArgs,
+  UseGestureViewerPagingResult,
+} from './useGestureViewerPaging.types';
+import { getLoopAdjustedIndex } from './utils';
+
+export function useGestureViewerPaging({
+  autoPlay,
+  autoPlayInterval,
+  currentIndex,
+  dataLength,
+  enableHorizontalSwipe,
+  enableLoop,
+  isRotated,
+  isZoomed,
+  itemSpacing,
+  manager,
+  scrollTo,
+  syncCurrentIndex,
+  syncPendingIndex,
+  width,
+}: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
+  useEffect(() => {
+    if (
+      !autoPlay ||
+      !manager ||
+      dataLength <= 1 ||
+      isZoomed ||
+      isRotated ||
+      (!enableLoop && currentIndex === dataLength - 1)
+    ) {
+      return;
+    }
+
+    const intervalMs = Math.max(250, Math.floor(autoPlayInterval || 0));
+
+    if (!Number.isFinite(intervalMs)) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      if (isZoomed || isRotated) {
+        return;
+      }
+
+      manager.goToNext();
+    }, intervalMs);
+
+    return () => clearInterval(interval);
+  }, [
+    autoPlay,
+    autoPlayInterval,
+    currentIndex,
+    dataLength,
+    enableLoop,
+    isRotated,
+    isZoomed,
+    manager,
+  ]);
+
+  const onMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!enableHorizontalSwipe) {
+        return;
+      }
+
+      const { contentOffset } = event.nativeEvent;
+      const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
+
+      const isLoopHandled = manager?.handleMomentumScrollEnd(scrollIndex);
+
+      if (isLoopHandled) {
+        return;
+      }
+
+      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(
+        scrollIndex,
+        dataLength,
+        enableLoop,
+      );
+
+      if (needsJump && jumpToIndex !== undefined) {
+        scrollTo(jumpToIndex, false);
+      }
+
+      syncCurrentIndex(realIndex);
+    },
+    [
+      dataLength,
+      enableHorizontalSwipe,
+      enableLoop,
+      itemSpacing,
+      manager,
+      scrollTo,
+      syncCurrentIndex,
+      width,
+    ],
+  );
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!enableHorizontalSwipe) {
+        return;
+      }
+
+      const { contentOffset } = event.nativeEvent;
+      const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
+      const { realIndex } = getLoopAdjustedIndex(scrollIndex, dataLength, enableLoop);
+
+      syncPendingIndex(realIndex);
+    },
+    [dataLength, enableHorizontalSwipe, enableLoop, itemSpacing, syncPendingIndex, width],
+  );
+
+  const onScrollBeginDrag = useCallback(() => {
+    manager?.handleScrollBeginDrag();
+  }, [manager]);
+
+  return {
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollBeginDrag,
+    onWebDoubleClick: undefined,
+  };
+}

package/src/useGestureViewerPaging.types.ts

@@ -0,0 +1,35 @@
+import type { ScrollViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type GestureViewerManager from './GestureViewerManager';
+
+export type UseGestureViewerPagingArgs = {
+  adjustedInitialIndex: number;
+  autoPlay: boolean;
+  autoPlayInterval: number;
+  currentIndex: number;
+  dataLength: number;
+  enableDoubleTapZoom: boolean;
+  enableHorizontalSwipe: boolean;
+  enableLoop: boolean;
+  height: number;
+  isRotated: boolean;
+  isZoomed: boolean;
+  itemSpacing: number;
+  manager: GestureViewerManager | null;
+  maxZoomScale: number;
+  scale: SharedValue<number>;
+  scrollTo: (index: number, animated: boolean) => void;
+  syncCurrentIndex: (nextIndex: number) => void;
+  syncPendingIndex: (nextIndex: number) => void;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+  width: number;
+};
+
+export type UseGestureViewerPagingResult = {
+  onMomentumScrollEnd?: ScrollViewProps['onMomentumScrollEnd'];
+  onScroll?: ScrollViewProps['onScroll'];
+  onScrollBeginDrag?: ScrollViewProps['onScrollBeginDrag'];
+  onWebDoubleClick?: (event: any) => void;
+};