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

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, 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>,
@@ -131,6 +128,35 @@ 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 syncCurrentIndex = useCallback(
+    (nextIndex: number) => {
+      if (!manager || nextIndex < 0 || nextIndex >= dataLength) {
+        return;
+      }
+
+      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) {
@@ -200,6 +226,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 +241,7 @@ export const useGestureViewer = <ItemT, LC>({
     enableLoop,
     scale,
     height,
+    resetTransformState,
     translateX,
     translateY,
     rotation,
@@ -257,44 +285,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]);
@@ -394,66 +384,6 @@ export const useGestureViewer = <ItemT, LC>({
     triggerOpacity,
   ]);
 
-  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);
-      }
-
-      const currentIndex = manager?.getState()?.currentIndex;
-
-      if (realIndex !== currentIndex && realIndex >= 0 && realIndex < dataLength) {
-        if (manager) {
-          manager.setCurrentIndex(realIndex);
-          manager.notifyStateChange();
-        }
-
-        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,
-    ],
-  );
-
   const dismissGesture = useMemo(() => {
     const canDismiss = !isZoomed && dismissOptions.enabled;
 
@@ -644,41 +574,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 +626,29 @@ 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,
+      translateX,
+      translateY,
+      width,
+    });
 
   return {
     animatedStyle,
@@ -732,7 +662,9 @@ export const useGestureViewer = <ItemT, LC>({
     isZoomed,
     listRef,
     nativeScrollGesture,
+    onWebDoubleClick,
     onMomentumScrollEnd,
+    onScroll,
 
     onScrollBeginDrag,
     zoomGesture,

package/src/useGestureViewerPaging.ts

@@ -0,0 +1,112 @@
+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,
+  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 onScrollBeginDrag = useCallback(() => {
+    manager?.handleScrollBeginDrag();
+  }, [manager]);
+
+  return {
+    onMomentumScrollEnd,
+    onScroll: undefined,
+    onScrollBeginDrag,
+    onWebDoubleClick: undefined,
+  };
+}

package/src/useGestureViewerPaging.types.ts

@@ -0,0 +1,34 @@
+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;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+  width: number;
+};
+
+export type UseGestureViewerPagingResult = {
+  onMomentumScrollEnd?: ScrollViewProps['onMomentumScrollEnd'];
+  onScroll?: ScrollViewProps['onScroll'];
+  onScrollBeginDrag?: ScrollViewProps['onScrollBeginDrag'];
+  onWebDoubleClick?: (event: any) => void;
+};