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

package/src/useGestureViewer.ts

@@ -17,6 +17,7 @@ import { registry } from './GestureViewerRegistry';
 import type { GestureViewerProps, TriggerRect } from './types';
 import { useGestureViewerPaging } from './useGestureViewerPaging';
 import { createBoundsConstraint, createScrollAction } from './utils';
+import { getDismissDistance, shouldDismissByDirection } from './utils/dismiss';
 import { applyTapZoomAtPoint } from './utils/tapZoom';
 
 type UseGestureViewerProps<ItemT, LC> = Omit<
@@ -34,6 +35,7 @@ export const useGestureViewer = <ItemT, LC>({
   data,
   initialIndex = 0,
   onDismiss,
+  onSingleTap,
   width: customWidth,
   dismiss,
   enableDoubleTapZoom = true,
@@ -68,6 +70,9 @@ export const useGestureViewer = <ItemT, LC>({
   const triggerRectRef = useRef<TriggerRect | null>(null);
   const pendingIndexRef = useRef(initialIndex);
   const onAnimationCompleteRef = useRef(triggerAnimation?.onAnimationComplete);
+  const onSingleTapRef = useRef(onSingleTap);
+  const dataRef = useRef(data);
+  const managerRef = useRef(manager);
 
   const isValidTriggerRect = useCallback((rect: TriggerRect | null): rect is TriggerRect => {
     return !!rect && rect.width > 0 && rect.height > 0;
@@ -104,12 +109,19 @@ export const useGestureViewer = <ItemT, LC>({
 
   const dismissOptions = useMemo(
     () => ({
+      direction: dismiss?.direction ?? 'down',
       enabled: dismiss?.enabled ?? true,
       fadeBackdrop: dismiss?.fadeBackdrop ?? true,
       resistance: dismiss?.resistance ?? 2,
       threshold: dismiss?.threshold ?? 80,
     }),
-    [dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop],
+    [
+      dismiss?.direction,
+      dismiss?.enabled,
+      dismiss?.threshold,
+      dismiss?.resistance,
+      dismiss?.fadeBackdrop,
+    ],
   );
 
   const adjustedInitialIndex = useMemo(() => {
@@ -135,13 +147,13 @@ export const useGestureViewer = <ItemT, LC>({
   );
 
   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;
+    translateX.set(withTiming(0));
+    translateY.set(withTiming(0));
+    initialTranslateX.set(withTiming(0));
+    initialTranslateY.set(withTiming(0));
+    startScale.set(withTiming(1));
+    scale.set(withTiming(1));
+    rotation.set(0);
   }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
 
   const syncPendingIndex = useCallback(
@@ -176,30 +188,20 @@ export const useGestureViewer = <ItemT, LC>({
     [dataLength, manager, resetTransformState],
   );
 
-  const emitZoomChange = useCallback(
-    (currentScale: number, prevScale: number | null) => {
-      if (manager) {
-        manager.emitZoomChange(currentScale, prevScale);
-      }
-    },
-    [manager],
-  );
+  const emitZoomChange = useCallback((currentScale: number, prevScale: number | null) => {
+    managerRef.current?.emitZoomChange(currentScale, prevScale);
+  }, []);
 
-  const emitRotationChange = useCallback(
-    (currentRotation: number, prevRotation: number | null) => {
-      if (manager) {
-        manager.emitRotationChange(currentRotation, prevRotation);
-      }
-    },
-    [manager],
-  );
+  const emitRotationChange = useCallback((currentRotation: number, prevRotation: number | null) => {
+    managerRef.current?.emitRotationChange(currentRotation, prevRotation);
+  }, []);
 
   const onAnimationComplete = useCallback(() => {
     onAnimationCompleteRef.current?.();
   }, []);
 
   useAnimatedReaction(
-    () => scale.value,
+    () => scale.get(),
     (currentScale, previousScale) => {
       if (currentScale !== previousScale) {
         scheduleOnRN(emitZoomChange, currentScale, previousScale);
@@ -210,7 +212,7 @@ export const useGestureViewer = <ItemT, LC>({
   );
 
   useAnimatedReaction(
-    () => rotation.value,
+    () => rotation.get(),
     (currentRotation, previousRotation) => {
       if (currentRotation !== previousRotation) {
         scheduleOnRN(emitRotationChange, currentRotation, previousRotation);
@@ -284,12 +286,12 @@ export const useGestureViewer = <ItemT, LC>({
   }, [manager]);
 
   useEffect(() => {
-    translateY.value = 0;
-    translateX.value = 0;
-    scale.value = 1;
-    backdropOpacity.value = 1;
-    startScale.value = 1;
-    rotation.value = 0;
+    translateY.set(0);
+    translateX.set(0);
+    scale.set(1);
+    backdropOpacity.set(1);
+    startScale.set(1);
+    rotation.set(0);
 
     if (adjustedInitialIndex <= 0 || !listRef.current) {
       return;
@@ -317,6 +319,18 @@ export const useGestureViewer = <ItemT, LC>({
     onAnimationCompleteRef.current = triggerAnimation?.onAnimationComplete;
   }, [triggerAnimation?.onAnimationComplete]);
 
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
+  useEffect(() => {
+    managerRef.current = manager;
+  }, [manager]);
+
+  useEffect(() => {
+    onSingleTapRef.current = onSingleTap;
+  }, [onSingleTap]);
+
   useEffect(() => {
     if (shouldStartTriggerAnimation && triggerRectRef.current) {
       const startX = triggerRectRef.current.x + triggerRectRef.current.width / 2 - width / 2;
@@ -326,23 +340,27 @@ export const useGestureViewer = <ItemT, LC>({
         triggerRectRef.current.height / height,
       );
 
-      triggerScale.value = initialScaleFromTrigger;
-      triggerTranslateX.value = startX;
-      triggerTranslateY.value = startY;
-      triggerOpacity.value = 0;
+      triggerScale.set(initialScaleFromTrigger);
+      triggerTranslateX.set(startX);
+      triggerTranslateY.set(startY);
+      triggerOpacity.set(0);
 
-      triggerScale.value = withTiming(1, animationConfig, (finished) => {
-        if (finished) {
-          scheduleOnRN(onAnimationComplete);
-        }
-      });
-      triggerTranslateX.value = withTiming(0, animationConfig);
-      triggerTranslateY.value = withTiming(0, animationConfig);
-      triggerOpacity.value = withTiming(1, {
-        duration: animationConfig.duration / 2,
-        easing: animationConfig.easing,
-        reduceMotion: animationConfig.reduceMotion,
-      });
+      triggerScale.set(
+        withTiming(1, animationConfig, (finished) => {
+          if (finished) {
+            scheduleOnRN(onAnimationComplete);
+          }
+        }),
+      );
+      triggerTranslateX.set(withTiming(0, animationConfig));
+      triggerTranslateY.set(withTiming(0, animationConfig));
+      triggerOpacity.set(
+        withTiming(1, {
+          duration: animationConfig.duration / 2,
+          easing: animationConfig.easing,
+          reduceMotion: animationConfig.reduceMotion,
+        }),
+      );
 
       setShouldStartTriggerAnimation(false);
     }
@@ -377,7 +395,7 @@ export const useGestureViewer = <ItemT, LC>({
       }
 
       triggerRectRef.current = nextTriggerRect;
-      triggerOpacity.value = 0;
+      triggerOpacity.set(0);
       setShouldStartTriggerAnimation(true);
       registry.clearActiveTriggerNode(id);
     });
@@ -395,14 +413,16 @@ export const useGestureViewer = <ItemT, LC>({
       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);
-      triggerTranslateY.value = withTiming(endY, animationConfig);
-      triggerOpacity.value = withTiming(0, animationConfig, (finished) => {
-        if (finished && onDismiss) {
-          scheduleOnRN(onDismiss);
-        }
-      });
+      triggerScale.set(withTiming(endScale, animationConfig));
+      triggerTranslateX.set(withTiming(endX, animationConfig));
+      triggerTranslateY.set(withTiming(endY, animationConfig));
+      triggerOpacity.set(
+        withTiming(0, animationConfig, (finished) => {
+          if (finished && onDismiss) {
+            scheduleOnRN(onDismiss);
+          }
+        }),
+      );
     },
     [
       animationConfig,
@@ -472,21 +492,30 @@ export const useGestureViewer = <ItemT, LC>({
       .withRef(dismissGestureRef)
       .enabled(canDismiss)
       .onUpdate((event) => {
-        translateY.value = event.translationY / dismissOptions.resistance;
+        translateY.set(event.translationY / dismissOptions.resistance);
       })
       .onEnd((event) => {
-        if (canDismiss && event.translationY > dismissOptions.threshold) {
+        if (
+          canDismiss &&
+          shouldDismissByDirection(
+            event.translationY,
+            dismissOptions.threshold,
+            dismissOptions.direction,
+          )
+        ) {
           scheduleOnRN(handleDismiss);
           return;
         }
 
-        translateY.value = withSpring(0, {
-          damping: 50,
-          energyThreshold: 6e-9,
-          mass: 4,
-          overshootClamping: false,
-          stiffness: 600,
-        });
+        translateY.set(
+          withSpring(0, {
+            damping: 50,
+            energyThreshold: 6e-9,
+            mass: 4,
+            overshootClamping: false,
+            stiffness: 600,
+          }),
+        );
       });
   }, [translateY, dismissOptions, handleDismiss, isZoomed]);
 
@@ -500,39 +529,44 @@ export const useGestureViewer = <ItemT, LC>({
           }
         })
         .onBegin((event) => {
-          startScale.value = scale.value;
-          initialTranslateX.value = translateX.value;
-          initialTranslateY.value = translateY.value;
-          lastFocalX.value = event.focalX;
-          lastFocalY.value = event.focalY;
+          startScale.set(scale.get());
+          initialTranslateX.set(translateX.get());
+          initialTranslateY.set(translateY.get());
+          lastFocalX.set(event.focalX);
+          lastFocalY.set(event.focalY);
         })
         .onUpdate((event) => {
-          const newScale = startScale.value * event.scale;
+          const initialScale = startScale.get();
+          const newScale = initialScale * event.scale;
 
-          scale.value = newScale;
+          scale.set(newScale);
 
           if (newScale <= 1) {
-            translateX.value = withTiming(0);
-            translateY.value = withTiming(0);
+            translateX.set(withTiming(0));
+            translateY.set(withTiming(0));
             return;
           }
 
-          const focalDeltaX = Math.abs(event.focalX - lastFocalX.value);
-          const focalDeltaY = Math.abs(event.focalY - lastFocalY.value);
+          const currentLastFocalX = lastFocalX.get();
+          const currentLastFocalY = lastFocalY.get();
+          const focalDeltaX = Math.abs(event.focalX - currentLastFocalX);
+          const focalDeltaY = Math.abs(event.focalY - currentLastFocalY);
           const threshold = 50;
 
           if (focalDeltaX < threshold && focalDeltaY < threshold) {
-            lastFocalX.value = event.focalX;
-            lastFocalY.value = event.focalY;
+            lastFocalX.set(event.focalX);
+            lastFocalY.set(event.focalY);
           }
 
-          const deltaScale = newScale - startScale.value;
-          const centerX = lastFocalX.value - width / 2;
-          const centerY = lastFocalY.value - height / 2;
+          const nextLastFocalX = lastFocalX.get();
+          const nextLastFocalY = lastFocalY.get();
+          const deltaScale = newScale - initialScale;
+          const centerX = nextLastFocalX - width / 2;
+          const centerY = nextLastFocalY - height / 2;
 
           // NOTE 새로운 이동값 = 기존 이동값 - (중심점 거리 × 스케일 변화량) / 원래 스케일 (중심점이 화면 중심에서 멀수록, 확대 배율이 클수록 더 많이 이동)
-          const newTranslateX = initialTranslateX.value - (centerX * deltaScale) / startScale.value;
-          const newTranslateY = initialTranslateY.value - (centerY * deltaScale) / startScale.value;
+          const newTranslateX = initialTranslateX.get() - (centerX * deltaScale) / initialScale;
+          const newTranslateY = initialTranslateY.get() - (centerY * deltaScale) / initialScale;
 
           const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
             constrainTranslation({
@@ -541,50 +575,56 @@ export const useGestureViewer = <ItemT, LC>({
               translateY: newTranslateY,
             });
 
-          translateX.value = constrainedTranslateX;
-          translateY.value = constrainedTranslateY;
+          translateX.set(constrainedTranslateX);
+          translateY.set(constrainedTranslateY);
         })
         .onEnd(() => {
-          if (scale.value > maxZoomScale) {
-            scale.value = withTiming(maxZoomScale, {
-              duration: 300,
-              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-            });
+          const currentScale = scale.get();
+
+          if (currentScale > maxZoomScale) {
+            scale.set(
+              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: translateX.get(),
+                translateY: translateY.get(),
               });
 
-            translateX.value = withTiming(constrainedTranslateX);
-            translateY.value = withTiming(constrainedTranslateY);
+            translateX.set(withTiming(constrainedTranslateX));
+            translateY.set(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);
+          if (currentScale < 1) {
+            scale.set(
+              withTiming(1, {
+                duration: 300,
+                easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+              }),
+            );
+            translateX.set(withTiming(0));
+            translateY.set(withTiming(0));
+            initialTranslateX.set(withTiming(0));
+            initialTranslateY.set(withTiming(0));
             return;
           }
 
           const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
             constrainTranslation({
-              scale: scale.value,
-              translateX: translateX.value,
-              translateY: translateY.value,
+              scale: currentScale,
+              translateX: translateX.get(),
+              translateY: translateY.get(),
             });
 
-          translateX.value = withTiming(constrainedTranslateX);
-          translateY.value = withTiming(constrainedTranslateY);
+          translateX.set(withTiming(constrainedTranslateX));
+          translateY.set(withTiming(constrainedTranslateY));
         })
         .onTouchesUp(() => {
           scheduleOnRN(setIsPinching, false);
@@ -616,23 +656,25 @@ export const useGestureViewer = <ItemT, LC>({
         .activeCursor('grabbing')
         .averageTouches(true)
         .onBegin(() => {
-          initialTranslateX.value = translateX.value;
-          initialTranslateY.value = translateY.value;
+          initialTranslateX.set(translateX.get());
+          initialTranslateY.set(translateY.get());
         })
         .onUpdate((event) => {
-          if (scale.value > 1) {
-            const newTranslateX = initialTranslateX.value + event.translationX;
-            const newTranslateY = initialTranslateY.value + event.translationY;
+          const currentScale = scale.get();
+
+          if (currentScale > 1) {
+            const newTranslateX = initialTranslateX.get() + event.translationX;
+            const newTranslateY = initialTranslateY.get() + event.translationY;
 
             const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
               constrainTranslation({
-                scale: scale.value,
+                scale: currentScale,
                 translateX: newTranslateX,
                 translateY: newTranslateY,
               });
 
-            translateX.value = constrainedTranslateX;
-            translateY.value = constrainedTranslateY;
+            translateX.set(constrainedTranslateX);
+            translateY.set(constrainedTranslateY);
           }
         }),
     [
@@ -647,6 +689,40 @@ export const useGestureViewer = <ItemT, LC>({
     ],
   );
 
+  const emitSingleTap = useCallback((x: number, y: number) => {
+    const index = pendingIndexRef.current;
+    const currentData = dataRef.current;
+
+    if (index < 0 || index >= currentData.length) {
+      return;
+    }
+
+    managerRef.current?.emitTap({ kind: 'single', x, y, index });
+
+    const item = currentData[index];
+
+    if (item === undefined) {
+      return;
+    }
+
+    onSingleTapRef.current?.({ x, y, index, item });
+  }, []);
+
+  const singleTapGesture = useMemo(
+    () =>
+      Gesture.Tap()
+        .enabled(Platform.OS !== 'web')
+        .numberOfTaps(1)
+        .onEnd((event, success) => {
+          if (!success) {
+            return;
+          }
+
+          scheduleOnRN(emitSingleTap, event.x, event.y);
+        }),
+    [emitSingleTap],
+  );
+
   const doubleTapGesture = useMemo(
     () =>
       Gesture.Tap()
@@ -667,65 +743,71 @@ export const useGestureViewer = <ItemT, LC>({
     [enableDoubleTapZoom, height, maxZoomScale, scale, translateX, translateY, width],
   );
 
+  const tapGesture = useMemo(
+    () => Gesture.Exclusive(doubleTapGesture, singleTapGesture),
+    [doubleTapGesture, singleTapGesture],
+  );
+
   const zoomGesture = useMemo(
-    () => Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, doubleTapGesture)),
-    [zoomPinchGesture, zoomPanGesture, doubleTapGesture],
+    () => Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, tapGesture)),
+    [zoomPinchGesture, zoomPanGesture, tapGesture],
   );
 
   const animatedStyle = useAnimatedStyle(() => ({
-    opacity: triggerOpacity.value,
+    opacity: triggerOpacity.get(),
     transform: [
-      { translateX: triggerTranslateX.value },
-      { translateY: triggerTranslateY.value },
-      { scale: triggerScale.value },
-
-      { translateY: translateY.value },
-      { translateX: translateX.value },
-      { scale: scale.value },
-      { rotate: `${rotation.value}deg` },
+      { translateX: triggerTranslateX.get() },
+      { translateY: triggerTranslateY.get() },
+      { scale: triggerScale.get() },
+
+      { translateY: translateY.get() },
+      { translateX: translateX.get() },
+      { scale: scale.get() },
+      { rotate: `${rotation.get()}deg` },
     ],
   }));
 
   const backdropStyle = useAnimatedStyle(() => {
-    const baseOpacity = triggerOpacity.value;
+    const baseOpacity = triggerOpacity.get();
 
-    if (!dismissOptions.fadeBackdrop || scale.value !== 1) {
+    if (!dismissOptions.fadeBackdrop || scale.get() !== 1) {
       return { opacity: baseOpacity };
     }
 
-    const dismissOpacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
+    const dismissDistance = getDismissDistance(translateY.get(), dismissOptions.direction);
+    const dismissOpacity = interpolate(dismissDistance, [0, 200], [1, 0], 'clamp');
 
     return { opacity: baseOpacity * dismissOpacity };
-  }, [dismissOptions.fadeBackdrop]);
+  }, [dismissOptions.direction, dismissOptions.fadeBackdrop]);
 
   const nativeScrollGesture = useMemo(() => {
     return Gesture.Native().requireExternalGestureToFail(dismissGestureRef);
   }, []);
 
-  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,
-    });
+  const { onMomentumScrollEnd, onScroll, onScrollBeginDrag, onWebClick } = useGestureViewerPaging({
+    adjustedInitialIndex,
+    autoPlay,
+    autoPlayInterval,
+    currentIndex,
+    dataLength,
+    enableDoubleTapZoom,
+    enableHorizontalSwipe,
+    enableLoop,
+    height,
+    isRotated,
+    isZoomed,
+    itemSpacing,
+    manager,
+    maxZoomScale,
+    onSingleTap: emitSingleTap,
+    scale,
+    scrollTo,
+    syncCurrentIndex,
+    syncPendingIndex,
+    translateX,
+    translateY,
+    width,
+  });
 
   return {
     animatedStyle,
@@ -739,7 +821,7 @@ export const useGestureViewer = <ItemT, LC>({
     isZoomed,
     listRef,
     nativeScrollGesture,
-    onWebDoubleClick,
+    onWebClick,
     onMomentumScrollEnd,
     onScroll,
 

package/src/useGestureViewerEvent.ts

@@ -8,7 +8,7 @@ import type { GestureViewerEventCallback, GestureViewerEventType } from './types
  * Hook for subscribing to GestureViewer events on the default instance.
  *
  * This hook allows you to listen to specific events from the default GestureViewer instance
- * (with ID 'default'), such as zoom changes or rotation changes. Events are automatically
+ * (with ID 'default'), such as zoom changes, rotation changes, or confirmed tap events. Events are automatically
  * throttled to prevent excessive callback invocations during gestures.
  *
  * @param eventType - The type of event to listen for
@@ -25,6 +25,13 @@ import type { GestureViewerEventCallback, GestureViewerEventType } from './types
  * useGestureViewerEvent('rotationChange', (data) => {
  *   console.log(`Rotation changed from ${data.previousRotation}° to ${data.rotation}°`);
  * });
+ *
+ * // Listen to confirmed single taps on the default instance (ID: 'default')
+ * useGestureViewerEvent('tap', (data) => {
+ *   if (data.kind === 'single') {
+ *     console.log(`Tapped item ${data.index} at (${data.x}, ${data.y})`);
+ *   }
+ * });
  * ```
  */
 export function useGestureViewerEvent<T extends GestureViewerEventType>(
@@ -53,6 +60,13 @@ export function useGestureViewerEvent<T extends GestureViewerEventType>(
  * useGestureViewerEvent('modal-viewer', 'rotationChange', (data) => {
  *   updateRotationIndicator(data.rotation);
  * });
+ *
+ * // Listen to confirmed single taps on a specific instance
+ * useGestureViewerEvent('gallery', 'tap', (data) => {
+ *   if (data.kind === 'single') {
+ *     console.log(`Gallery tap on item ${data.index}`);
+ *   }
+ * });
  * ```
  */
 export function useGestureViewerEvent<T extends GestureViewerEventType>(

package/src/useGestureViewerPaging.ts

@@ -123,6 +123,6 @@ export function useGestureViewerPaging({
     onMomentumScrollEnd,
     onScroll,
     onScrollBeginDrag,
-    onWebDoubleClick: undefined,
+    onWebClick: undefined,
   };
 }

package/src/useGestureViewerPaging.types.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import type { ScrollViewProps } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 
@@ -18,6 +19,7 @@ export type UseGestureViewerPagingArgs = {
   itemSpacing: number;
   manager: GestureViewerManager | null;
   maxZoomScale: number;
+  onSingleTap?: (x: number, y: number) => void;
   scale: SharedValue<number>;
   scrollTo: (index: number, animated: boolean) => void;
   syncCurrentIndex: (nextIndex: number) => void;
@@ -27,9 +29,13 @@ export type UseGestureViewerPagingArgs = {
   width: number;
 };
 
+export type WebClickTarget = {
+  getBoundingClientRect: () => { left: number; top: number };
+};
+
 export type UseGestureViewerPagingResult = {
   onMomentumScrollEnd?: ScrollViewProps['onMomentumScrollEnd'];
   onScroll?: ScrollViewProps['onScroll'];
   onScrollBeginDrag?: ScrollViewProps['onScrollBeginDrag'];
-  onWebDoubleClick?: (event: any) => void;
+  onWebClick?: (event: MouseEvent<WebClickTarget>) => void;
 };