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

package/src/useGestureViewer.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { InteractionManager, Platform, useWindowDimensions } from 'react-native';
+import { InteractionManager, Platform, type View, useWindowDimensions } from 'react-native';
 import { Gesture, type GestureType } from 'react-native-gesture-handler';
 import {
   Easing,
@@ -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,
@@ -62,10 +64,19 @@ 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 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;
+  }, []);
 
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
@@ -98,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(() => {
@@ -138,12 +156,25 @@ export const useGestureViewer = <ItemT, LC>({
     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) {
@@ -157,23 +188,13 @@ 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?.();
@@ -206,7 +227,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 () => {
@@ -216,6 +240,12 @@ export const useGestureViewer = <ItemT, LC>({
   }, [id]);
 
   useEffect(() => {
+    return registry.subscribeToActiveTrigger(id, setActiveTriggerNode);
+  }, [id]);
+
+  useEffect(() => {
+    pendingIndexRef.current = initialIndex;
+
     if (!manager) {
       return;
     }
@@ -289,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;
@@ -331,32 +373,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);
@@ -366,23 +417,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 handleDismiss = useCallback(() => {
+    onDismissStart?.();
+
+    const dismissTargetIndex = pendingIndexRef.current;
+    const indexedTriggerNode = registry.getIndexedTriggerNode(id, dismissTargetIndex);
+
+    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;
+
+        if (isValidTriggerRect(currentTriggerRect)) {
+          animateDismissToRect(currentTriggerRect);
+          return;
+        }
+
+        if (isValidTriggerRect(triggerRectRef.current)) {
+          animateDismissToRect(triggerRectRef.current);
+          return;
+        }
+
+        dismissWithoutTrigger();
+      });
+      return;
+    }
+
+    if (isValidTriggerRect(triggerRectRef.current)) {
+      animateDismissToRect(triggerRectRef.current);
+      return;
+    }
+
+    dismissWithoutTrigger();
+  }, [animateDismissToRect, dismissWithoutTrigger, id, isValidTriggerRect, onDismissStart]);
 
   const dismissGesture = useMemo(() => {
     const canDismiss = !isZoomed && dismissOptions.enabled;
@@ -399,7 +489,14 @@ export const useGestureViewer = <ItemT, LC>({
         translateY.value = event.translationY / dismissOptions.resistance;
       })
       .onEnd((event) => {
-        if (canDismiss && event.translationY > dismissOptions.threshold) {
+        if (
+          canDismiss &&
+          shouldDismissByDirection(
+            event.translationY,
+            dismissOptions.threshold,
+            dismissOptions.direction,
+          )
+        ) {
           scheduleOnRN(handleDismiss);
           return;
         }
@@ -571,6 +668,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()
@@ -591,9 +722,14 @@ 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(() => ({
@@ -617,38 +753,40 @@ export const useGestureViewer = <ItemT, LC>({
       return { opacity: baseOpacity };
     }
 
-    const dismissOpacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
+    const dismissDistance = getDismissDistance(translateY.value, 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,
-      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,
@@ -662,7 +800,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

@@ -20,6 +20,7 @@ export function useGestureViewerPaging({
   manager,
   scrollTo,
   syncCurrentIndex,
+  syncPendingIndex,
   width,
 }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
   useEffect(() => {
@@ -99,14 +100,29 @@ export function useGestureViewerPaging({
     ],
   );
 
+  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: undefined,
+    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,17 +19,23 @@ 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;
+  syncPendingIndex: (nextIndex: number) => void;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
   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;
 };