react-native-gesture-image-viewer 2.4.0 → 3.0.0-beta.1

package/src/useGestureViewer.ts

@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, type View, useWindowDimensions } from 'react-native';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { type View, useWindowDimensions } from 'react-native';
 import { Gesture, type GestureType } from 'react-native-gesture-handler';
 import {
   Easing,
+  cancelAnimation,
   interpolate,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -12,28 +13,48 @@ import {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 
+import {
+  PAGE_SPRING_CONFIG,
+  SWIPE_THRESHOLD_RATIO,
+  SWIPE_VELOCITY_THRESHOLD,
+} from './gestureViewerAnimation';
 import type GestureViewerManager from './GestureViewerManager';
+import { normalizeHorizontalSwipeThreshold } from './gestureViewerPaging';
 import { registry } from './GestureViewerRegistry';
-import { scheduleInitialScroll } from './scheduleInitialScroll';
+import { resolveGestureViewerRenderWindow } from './gestureViewerRenderWindow';
+import { enableNativeTapGestures } from './platformTapGestures';
+import {
+  type NavigationOptions,
+  getLogicalIndex,
+  getPageStride,
+  getVirtualIndexForLogicalIndex,
+  normalizePageSpacing,
+  clampIndex,
+  resolveNavigation,
+  shouldRunNavigationDuringTransition,
+} from './renderWindow';
 import type { GestureViewerProps, TriggerRect } from './types';
+import { useGestureViewerManagerBridge } from './useGestureViewerManagerBridge';
 import { useGestureViewerPaging } from './useGestureViewerPaging';
-import { createBoundsConstraint, createScrollAction } from './utils';
+import { type EmitSingleTap, useWebClickHandler } from './useWebClickHandler';
+import { useWebSingleTapTimer } from './useWebSingleTapTimer';
+import { createBoundsConstraint } from './utils';
 import { getDismissDistance, shouldDismissByDirection } from './utils/dismiss';
 import { applyTapZoomAtPoint } from './utils/tapZoom';
 import { calculateFocalPointTranslation, shouldAcceptFocalPoint } from './utils/zoom';
 
-type UseGestureViewerProps<ItemT, LC> = Omit<
-  GestureViewerProps<ItemT, LC>,
-  | 'renderItem'
-  | 'renderContainer'
-  | 'ListComponent'
-  | 'listProps'
-  | 'containerStyle'
-  | 'backdropStyle'
-  | 'enableSnapMode'
+const NATIVE_TAP_MAX_DISTANCE = 10;
+
+const isValidTriggerRect = (rect: TriggerRect | null): rect is TriggerRect => {
+  return !!rect && rect.width > 0 && rect.height > 0;
+};
+
+type UseGestureViewerProps<ItemT> = Omit<
+  GestureViewerProps<ItemT>,
+  'renderItem' | 'renderContainer' | 'containerStyle' | 'backdropStyle'
 >;
 
-export const useGestureViewer = <ItemT, LC>({
+export const useGestureViewer = <ItemT>({
   data,
   initialIndex = 0,
   onDismiss,
@@ -42,21 +63,35 @@ export const useGestureViewer = <ItemT, LC>({
   dismiss,
   enableDoubleTapZoom = true,
   enablePinchZoom = true,
-  enableHorizontalSwipe = true,
+  horizontalSwipe,
   enablePanWhenZoomed = true,
   enableLoop = false,
   maxZoomScale = 2,
-  itemSpacing = 0,
+  pageSpacing = 0,
+  windowSize = 3,
   height: customHeight,
   id = 'default',
   onDismissStart,
   triggerAnimation,
   autoPlay = false,
   autoPlayInterval = 3000,
-}: UseGestureViewerProps<ItemT, LC>) => {
+}: UseGestureViewerProps<ItemT>) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const width = customWidth || screenWidth;
   const height = customHeight || screenHeight;
+  const dataLength = data?.length || 0;
+  const normalizedPageSpacing = normalizePageSpacing(pageSpacing);
+  const pageStride = getPageStride(width, normalizedPageSpacing);
+  const initialCurrentIndex = clampIndex(initialIndex, dataLength);
+  const horizontalSwipeEnabled = horizontalSwipe?.enabled ?? true;
+  const horizontalSwipeDistanceThresholdRatio = normalizeHorizontalSwipeThreshold(
+    horizontalSwipe?.distanceThresholdRatio,
+    SWIPE_THRESHOLD_RATIO,
+  );
+  const horizontalSwipeVelocityThreshold = normalizeHorizontalSwipeThreshold(
+    horizontalSwipe?.velocityThreshold,
+    SWIPE_VELOCITY_THRESHOLD,
+  );
 
   const dismissGestureRef = useRef<GestureType>(undefined);
 
@@ -64,21 +99,30 @@ export const useGestureViewer = <ItemT, LC>({
   const [isRotated, setIsRotated] = useState(false);
   const [isPinching, setIsPinching] = useState(false);
   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 [currentIndex, setCurrentIndex] = useState(initialCurrentIndex);
+  const [centerVirtualIndex, setCenterVirtualIndex] = useState(initialCurrentIndex);
+  const [activeTriggerNode, setActiveTriggerNode] = useState<View | null>(() =>
+    registry.getActiveTriggerNode(id),
+  );
+  const [isTriggerOpening, setIsTriggerOpening] = useState(
+    () => !!registry.getActiveTriggerNode(id),
+  );
 
-  const listRef = useRef<any>(null);
   const triggerRectRef = useRef<TriggerRect | null>(null);
-  const pendingIndexRef = useRef(initialIndex);
+  const pendingIndexRef = useRef(initialCurrentIndex);
+  const currentIndexRef = useRef(initialCurrentIndex);
+  const centerVirtualIndexRef = useRef(initialCurrentIndex);
+  const previousInitialIndexRef = useRef(initialIndex);
+  const hasResolvedInitialIndexRef = useRef(dataLength > 0);
   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 dataLengthRef = useRef(dataLength);
+  const enableLoopRef = useRef(enableLoop);
+  const managerRef = useRef<GestureViewerManager | null>(null);
+  const isZoomedRef = useRef(isZoomed);
+  const isRotatedRef = useRef(isRotated);
+  const isPinchingRef = useRef(isPinching);
 
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
@@ -87,22 +131,24 @@ export const useGestureViewer = <ItemT, LC>({
   const translateY = useSharedValue(0);
   const translateX = useSharedValue(0);
   const scale = useSharedValue(1);
-  const backdropOpacity = useSharedValue(1);
   const rotation = useSharedValue(0);
 
   const triggerScale = useSharedValue(1);
   const triggerTranslateX = useSharedValue(0);
   const triggerTranslateY = useSharedValue(0);
-  const triggerOpacity = useSharedValue(1);
+  const triggerOpacity = useSharedValue(activeTriggerNode ? 0 : 1);
+
+  const hasZoomChangeListeners = useSharedValue(false);
+  const hasRotationChangeListeners = useSharedValue(false);
 
   const lastFocalX = useSharedValue(0);
   const lastFocalY = useSharedValue(0);
   const startFocalX = useSharedValue(0);
   const startFocalY = useSharedValue(0);
   const hasActiveFocal = useSharedValue(false);
-
-  const dataLength = data?.length || 0;
-  const previousDataLengthRef = useRef(dataLength);
+  const nativeInteractionHadMultipleTouches = useSharedValue(false);
+  const suppressNativeTap = useSharedValue(false);
+  const { clearPendingWebSingleTap, scheduleWebSingleTap } = useWebSingleTapTimer();
 
   const animationConfig = useMemo(
     () => ({
@@ -130,28 +176,24 @@ export const useGestureViewer = <ItemT, LC>({
     ],
   );
 
-  const adjustedInitialIndex = useMemo(() => {
-    if (enableLoop && dataLength > 1) {
-      return initialIndex + 1;
-    }
-
-    return initialIndex;
-  }, [enableLoop, dataLength, initialIndex]);
+  const {
+    centerVirtualIndex: renderCenterVirtualIndex,
+    currentIndex: renderCurrentIndex,
+    slots: renderWindowSlots,
+  } = resolveGestureViewerRenderWindow({
+    centerVirtualIndex,
+    currentIndex,
+    data,
+    enableLoop,
+    isTriggerOpening,
+    windowSize,
+  });
 
   const constrainTranslation = useMemo(
     () => createBoundsConstraint({ height, width }),
     [width, height],
   );
 
-  const scrollTo = useCallback(
-    (index: number, animated: boolean) => {
-      const scrollAction = createScrollAction(listRef.current, width + itemSpacing);
-
-      return scrollAction.scrollTo(index, animated);
-    },
-    [width, itemSpacing],
-  );
-
   const resetTransformState = useCallback(() => {
     translateX.set(withTiming(0));
     translateY.set(withTiming(0));
@@ -162,38 +204,180 @@ export const useGestureViewer = <ItemT, LC>({
     rotation.set(0);
   }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
 
-  const syncPendingIndex = useCallback(
-    (nextIndex: number) => {
-      if (nextIndex < 0 || nextIndex >= dataLength) {
+  const resetTransformStateImmediately = useCallback(() => {
+    cancelAnimation(translateX);
+    cancelAnimation(translateY);
+    cancelAnimation(initialTranslateX);
+    cancelAnimation(initialTranslateY);
+    cancelAnimation(startScale);
+    cancelAnimation(scale);
+    cancelAnimation(rotation);
+    translateX.set(0);
+    translateY.set(0);
+    initialTranslateX.set(0);
+    initialTranslateY.set(0);
+    startScale.set(1);
+    scale.set(1);
+    rotation.set(0);
+  }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
+
+  const commitCurrentIndex = useCallback((nextIndex: number) => {
+    pendingIndexRef.current = nextIndex;
+    currentIndexRef.current = nextIndex;
+    setCurrentIndex(nextIndex);
+    managerRef.current?.notifyStateChange();
+  }, []);
+
+  const commitVirtualIndexOnly = useCallback(
+    (nextVirtualIndex: number) => {
+      const nextLogicalIndex = getLogicalIndex(
+        nextVirtualIndex,
+        dataLengthRef.current,
+        enableLoopRef.current,
+      );
+
+      if (nextLogicalIndex === null) {
         return;
       }
 
-      pendingIndexRef.current = nextIndex;
+      centerVirtualIndexRef.current = nextVirtualIndex;
+      setCenterVirtualIndex(nextVirtualIndex);
+      commitCurrentIndex(nextLogicalIndex);
     },
-    [dataLength],
+    [commitCurrentIndex],
   );
 
-  const syncCurrentIndex = useCallback(
-    (nextIndex: number) => {
-      if (!manager || nextIndex < 0 || nextIndex >= dataLength) {
+  const {
+    animateToVirtualPage,
+    horizontalPagingGesture,
+    isPageTransitioningRef,
+    pageTransitionLocked,
+    snapToVirtualPage,
+    visualPage,
+  } = useGestureViewerPaging({
+    centerVirtualIndex,
+    clearPendingWebSingleTap,
+    commitVirtualIndexOnly,
+    currentIndex,
+    dataLength,
+    enableLoop,
+    horizontalSwipeDistanceThresholdRatio,
+    horizontalSwipeEnabled,
+    horizontalSwipeVelocityThreshold,
+    initialPage: initialCurrentIndex,
+    isPinching,
+    isRotated,
+    isTriggerOpening,
+    isZoomed,
+    pageStride,
+    suppressNativeTap,
+    width,
+  });
+
+  const navigateToIndex = useCallback(
+    (targetIndex: number, options?: NavigationOptions, preferredDirection?: -1 | 1) => {
+      const resolution = resolveNavigation({
+        currentIndex: currentIndexRef.current,
+        dataLength: dataLengthRef.current,
+        enableLoop: enableLoopRef.current,
+        preferredDirection,
+        targetIndex,
+      });
+
+      if (resolution.kind === 'noop') {
         return;
       }
 
-      pendingIndexRef.current = nextIndex;
+      if (
+        isPageTransitioningRef.current &&
+        !shouldRunNavigationDuringTransition(resolution, options)
+      ) {
+        return;
+      }
+
+      const targetVirtualIndex =
+        resolution.kind === 'step'
+          ? centerVirtualIndexRef.current + resolution.direction
+          : getVirtualIndexForLogicalIndex(
+              resolution.targetIndex,
+              centerVirtualIndexRef.current,
+              dataLengthRef.current,
+              enableLoopRef.current,
+            );
 
-      const managerCurrentIndex = manager.getState().currentIndex;
+      if (targetVirtualIndex === null) {
+        return;
+      }
 
-      if (nextIndex === managerCurrentIndex) {
+      if (resolution.kind !== 'step' || options?.animated === false) {
+        resetTransformStateImmediately();
+        snapToVirtualPage(targetVirtualIndex);
         return;
       }
 
-      manager.setCurrentIndex(nextIndex);
-      manager.notifyStateChange();
       resetTransformState();
+      animateToVirtualPage(targetVirtualIndex);
     },
-    [dataLength, manager, resetTransformState],
+    [
+      animateToVirtualPage,
+      isPageTransitioningRef,
+      resetTransformStateImmediately,
+      resetTransformState,
+      snapToVirtualPage,
+    ],
   );
 
+  const navigateByDirection = useCallback(
+    (direction: -1 | 1) => {
+      const currentDataLength = dataLengthRef.current;
+
+      if (currentDataLength <= 0) {
+        return;
+      }
+
+      const nextIndex = currentIndexRef.current + direction;
+
+      if (nextIndex >= 0 && nextIndex < currentDataLength) {
+        navigateToIndex(nextIndex, undefined, direction);
+        return;
+      }
+
+      if (!enableLoopRef.current || currentDataLength <= 1) {
+        return;
+      }
+
+      navigateToIndex(direction === 1 ? 0 : currentDataLength - 1, undefined, direction);
+    },
+    [navigateToIndex],
+  );
+
+  const navigateToNext = useCallback(() => {
+    navigateByDirection(1);
+  }, [navigateByDirection]);
+
+  const navigateToPrevious = useCallback(() => {
+    navigateByDirection(-1);
+  }, [navigateByDirection]);
+
+  useGestureViewerManagerBridge({
+    currentIndexRef,
+    dataLengthRef,
+    goToIndex: navigateToIndex,
+    goToNext: navigateToNext,
+    goToPrevious: navigateToPrevious,
+    hasRotationChangeListeners,
+    hasZoomChangeListeners,
+    height,
+    id,
+    managerRef,
+    maxZoomScale,
+    rotation,
+    scale,
+    translateX,
+    translateY,
+    width,
+  });
+
   const emitZoomChange = useCallback((currentScale: number, prevScale: number | null) => {
     managerRef.current?.emitZoomChange(currentScale, prevScale);
   }, []);
@@ -202,146 +386,203 @@ export const useGestureViewer = <ItemT, LC>({
     managerRef.current?.emitRotationChange(currentRotation, prevRotation);
   }, []);
 
-  const onAnimationComplete = useCallback(() => {
+  const finishTriggerOpening = useCallback(() => {
+    setIsTriggerOpening(false);
     onAnimationCompleteRef.current?.();
   }, []);
 
   useAnimatedReaction(
     () => scale.get(),
     (currentScale, previousScale) => {
-      if (currentScale !== previousScale) {
+      if (currentScale !== previousScale && hasZoomChangeListeners.get()) {
         scheduleOnRN(emitZoomChange, currentScale, previousScale);
       }
 
-      scheduleOnRN(setIsZoomed, currentScale > 1);
+      const currentIsZoomed = currentScale > 1;
+      const previousIsZoomed = (previousScale ?? 1) > 1;
+
+      if (previousScale === null || currentIsZoomed !== previousIsZoomed) {
+        scheduleOnRN(setIsZoomed, currentIsZoomed);
+      }
     },
   );
 
   useAnimatedReaction(
     () => rotation.get(),
     (currentRotation, previousRotation) => {
-      if (currentRotation !== previousRotation) {
+      if (currentRotation !== previousRotation && hasRotationChangeListeners.get()) {
         scheduleOnRN(emitRotationChange, currentRotation, previousRotation);
       }
 
-      scheduleOnRN(setIsRotated, currentRotation % 360 !== 0);
+      const currentIsRotated = currentRotation % 360 !== 0;
+      const previousIsRotated = (previousRotation ?? 0) % 360 !== 0;
+
+      if (previousRotation === null || currentIsRotated !== previousIsRotated) {
+        scheduleOnRN(setIsRotated, currentIsRotated);
+      }
     },
   );
 
   useEffect(() => {
-    let unsubscribe: (() => void) | undefined;
+    return registry.subscribeToActiveTrigger(id, (node) => {
+      setActiveTriggerNode(node);
 
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, (managerInstance) => {
-      setManager(managerInstance);
-      unsubscribe = managerInstance?.subscribe((state) => {
-        pendingIndexRef.current = state.currentIndex;
-        setCurrentIndex(state.currentIndex);
-      });
+      if (node) {
+        setIsTriggerOpening(true);
+      }
     });
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribe?.();
-    };
   }, [id]);
 
   useEffect(() => {
-    return registry.subscribeToActiveTrigger(id, setActiveTriggerNode);
-  }, [id]);
+    dataRef.current = data;
+  }, [data]);
 
   useEffect(() => {
-    pendingIndexRef.current = initialIndex;
+    isZoomedRef.current = isZoomed;
+  }, [isZoomed]);
 
-    if (!manager) {
-      return;
+  useEffect(() => {
+    isRotatedRef.current = isRotated;
+  }, [isRotated]);
+
+  useEffect(() => {
+    isPinchingRef.current = isPinching;
+  }, [isPinching]);
+
+  useEffect(() => {
+    onSingleTapRef.current = onSingleTap;
+  }, [onSingleTap]);
+
+  useEffect(() => {
+    onAnimationCompleteRef.current = triggerAnimation?.onAnimationComplete;
+  }, [triggerAnimation?.onAnimationComplete]);
+
+  useLayoutEffect(() => {
+    const initialIndexChanged = previousInitialIndexRef.current !== initialIndex;
+    const shouldResolveInitialIndex =
+      initialIndexChanged || (!hasResolvedInitialIndexRef.current && dataLength > 0);
+
+    previousInitialIndexRef.current = initialIndex;
+    dataLengthRef.current = dataLength;
+    enableLoopRef.current = enableLoop;
+
+    hasResolvedInitialIndexRef.current = dataLength > 0;
+
+    const nextIndex = shouldResolveInitialIndex
+      ? clampIndex(initialIndex, dataLength)
+      : clampIndex(currentIndexRef.current, dataLength);
+
+    const nextVirtualIndex =
+      getVirtualIndexForLogicalIndex(
+        nextIndex,
+        centerVirtualIndexRef.current,
+        dataLength,
+        enableLoop,
+      ) ?? nextIndex;
+
+    const previousIndex = currentIndexRef.current;
+    const previousVirtualIndex = centerVirtualIndexRef.current;
+    const shouldSyncVirtualPage =
+      isPageTransitioningRef.current || previousVirtualIndex !== nextVirtualIndex;
+    const shouldResetTransform =
+      initialIndexChanged || previousIndex !== nextIndex || shouldSyncVirtualPage;
+
+    if (shouldSyncVirtualPage) {
+      snapToVirtualPage(nextVirtualIndex);
+
+      if (dataLength === 0) {
+        centerVirtualIndexRef.current = nextVirtualIndex;
+        setCenterVirtualIndex(nextVirtualIndex);
+      }
+    }
+
+    const shouldCommitIndexOutsidePaging = !shouldSyncVirtualPage || dataLength === 0;
+
+    if (shouldCommitIndexOutsidePaging && previousIndex !== nextIndex) {
+      commitCurrentIndex(nextIndex);
+    }
+
+    if (shouldCommitIndexOutsidePaging && previousIndex === nextIndex) {
+      managerRef.current?.notifyStateChange();
     }
 
-    manager.setDataLength(dataLength);
-    manager.setEnableHorizontalSwipe(enableHorizontalSwipe);
-    manager.setCurrentIndex(initialIndex);
-    manager.setWidth(width + itemSpacing);
-    manager.setHeight(height);
-    manager.setZoomSharedValues(scale, translateX, translateY, maxZoomScale);
-    manager.setResetTransformCallback(resetTransformState);
-    manager.setRotation(rotation);
-    manager.setEnableLoop(enableLoop);
-    manager.notifyStateChange();
+    if (shouldResetTransform) {
+      resetTransformState();
+    }
   }, [
+    commitCurrentIndex,
     dataLength,
-    enableHorizontalSwipe,
-    initialIndex,
-    manager,
-    width,
-    itemSpacing,
-    maxZoomScale,
     enableLoop,
-    scale,
-    height,
+    initialIndex,
+    isPageTransitioningRef,
     resetTransformState,
-    translateX,
-    translateY,
-    rotation,
+    snapToVirtualPage,
   ]);
 
   useEffect(() => {
-    if (!manager || !listRef.current) {
-      return;
-    }
-
-    manager.setListRef(listRef.current);
-  }, [manager]);
+    return () => {
+      triggerRectRef.current = null;
+      clearPendingWebSingleTap();
+    };
+  }, [clearPendingWebSingleTap]);
 
   useEffect(() => {
-    const hasDataLengthChanged = previousDataLengthRef.current !== dataLength;
-    const hasValidInitialIndex = initialIndex >= 0 && initialIndex < dataLength;
-
-    previousDataLengthRef.current = dataLength;
-    translateY.set(0);
-    translateX.set(0);
-    scale.set(1);
-    backdropOpacity.set(1);
-    startScale.set(1);
-    rotation.set(0);
-
     if (
-      !hasValidInitialIndex ||
-      (!hasDataLengthChanged && adjustedInitialIndex <= 0) ||
-      !listRef.current
+      !autoPlay ||
+      dataLength <= 1 ||
+      isTriggerOpening ||
+      isZoomed ||
+      isRotated ||
+      isPinching ||
+      (!enableLoop && currentIndex >= dataLength - 1)
     ) {
       return;
     }
 
-    return scheduleInitialScroll(() => {
-      scrollTo(adjustedInitialIndex, false);
-    });
-  }, [
-    adjustedInitialIndex,
-    dataLength,
-    initialIndex,
-    translateY,
-    backdropOpacity,
-    translateX,
-    scale,
-    startScale,
-    rotation,
-    scrollTo,
-  ]);
+    const interval = Math.max(250, Math.floor(autoPlayInterval || 0));
 
-  useEffect(() => {
-    onAnimationCompleteRef.current = triggerAnimation?.onAnimationComplete;
-  }, [triggerAnimation?.onAnimationComplete]);
+    if (!Number.isFinite(interval)) {
+      return;
+    }
 
-  useEffect(() => {
-    dataRef.current = data;
-  }, [data]);
+    const timer = setInterval(() => {
+      if (
+        isPageTransitioningRef.current ||
+        isZoomedRef.current ||
+        isRotatedRef.current ||
+        isPinchingRef.current
+      ) {
+        return;
+      }
 
-  useEffect(() => {
-    managerRef.current = manager;
-  }, [manager]);
+      const nextIndex =
+        currentIndexRef.current >= dataLengthRef.current - 1
+          ? enableLoopRef.current
+            ? 0
+            : null
+          : currentIndexRef.current + 1;
 
-  useEffect(() => {
-    onSingleTapRef.current = onSingleTap;
-  }, [onSingleTap]);
+      if (nextIndex === null) {
+        return;
+      }
+
+      navigateToIndex(nextIndex);
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [
+    autoPlay,
+    autoPlayInterval,
+    currentIndex,
+    dataLength,
+    enableLoop,
+    isPinching,
+    isRotated,
+    isTriggerOpening,
+    isZoomed,
+    isPageTransitioningRef,
+    navigateToIndex,
+  ]);
 
   useEffect(() => {
     if (shouldStartTriggerAnimation && triggerRectRef.current) {
@@ -360,7 +601,7 @@ export const useGestureViewer = <ItemT, LC>({
       triggerScale.set(
         withTiming(1, animationConfig, (finished) => {
           if (finished) {
-            scheduleOnRN(onAnimationComplete);
+            scheduleOnRN(finishTriggerOpening);
           }
         }),
       );
@@ -385,11 +626,18 @@ export const useGestureViewer = <ItemT, LC>({
     triggerScale,
     triggerTranslateX,
     triggerTranslateY,
-    onAnimationComplete,
+    finishTriggerOpening,
   ]);
 
   useEffect(() => {
-    if (!activeTriggerNode || typeof activeTriggerNode.measure !== 'function') {
+    if (!activeTriggerNode) {
+      return;
+    }
+
+    if (typeof activeTriggerNode.measure !== 'function') {
+      setIsTriggerOpening(false);
+      triggerOpacity.set(1);
+      registry.clearActiveTriggerNode(id);
       return;
     }
 
@@ -402,6 +650,8 @@ export const useGestureViewer = <ItemT, LC>({
       } satisfies TriggerRect;
 
       if (!isValidTriggerRect(nextTriggerRect)) {
+        setIsTriggerOpening(false);
+        triggerOpacity.set(1);
         registry.clearActiveTriggerNode(id);
         return;
       }
@@ -411,13 +661,7 @@ export const useGestureViewer = <ItemT, LC>({
       setShouldStartTriggerAnimation(true);
       registry.clearActiveTriggerNode(id);
     });
-  }, [activeTriggerNode, id, isValidTriggerRect, triggerOpacity]);
-
-  useEffect(() => {
-    return () => {
-      triggerRectRef.current = null;
-    };
-  }, []);
+  }, [activeTriggerNode, id, triggerOpacity]);
 
   const animateDismissToRect = useCallback(
     (rect: TriggerRect) => {
@@ -455,6 +699,10 @@ export const useGestureViewer = <ItemT, LC>({
   }, [onDismiss]);
 
   const handleDismiss = useCallback(() => {
+    if (isPageTransitioningRef.current) {
+      return;
+    }
+
     onDismissStart?.();
 
     const dismissTargetIndex = pendingIndexRef.current;
@@ -490,23 +738,59 @@ export const useGestureViewer = <ItemT, LC>({
     }
 
     dismissWithoutTrigger();
-  }, [animateDismissToRect, dismissWithoutTrigger, id, isValidTriggerRect, onDismissStart]);
+  }, [animateDismissToRect, dismissWithoutTrigger, id, isPageTransitioningRef, onDismissStart]);
 
   const dismissGesture = useMemo(() => {
-    const canDismiss = !isZoomed && dismissOptions.enabled;
+    const canDismiss = !isTriggerOpening && !isPinching && !isZoomed && dismissOptions.enabled;
+    const resetDismissTranslation = () => {
+      'worklet';
+      cancelAnimation(translateY);
+      translateY.set(0);
+    };
 
     return Gesture.Pan()
       .minDistance(10)
+      .maxPointers(1)
       .averageTouches(true)
       .activeCursor('grabbing')
       .activeOffsetY([-10, 10])
       .failOffsetX([-10, 10])
       .withRef(dismissGestureRef)
       .enabled(canDismiss)
+      .onTouchesDown((event, stateManager) => {
+        if (event.numberOfTouches === 1) {
+          nativeInteractionHadMultipleTouches.set(false);
+          return;
+        }
+
+        if (event.numberOfTouches > 1) {
+          nativeInteractionHadMultipleTouches.set(true);
+          suppressNativeTap.set(true);
+          resetDismissTranslation();
+          stateManager.fail();
+        }
+      })
+      .onStart(() => {
+        suppressNativeTap.set(true);
+      })
       .onUpdate((event) => {
+        if (nativeInteractionHadMultipleTouches.get() || pageTransitionLocked.get()) {
+          return;
+        }
+
         translateY.set(event.translationY / dismissOptions.resistance);
       })
       .onEnd((event) => {
+        if (nativeInteractionHadMultipleTouches.get()) {
+          resetDismissTranslation();
+          return;
+        }
+
+        if (pageTransitionLocked.get()) {
+          resetDismissTranslation();
+          return;
+        }
+
         if (
           canDismiss &&
           shouldDismissByDirection(
@@ -519,17 +803,141 @@ export const useGestureViewer = <ItemT, LC>({
           return;
         }
 
-        translateY.set(
-          withSpring(0, {
-            damping: 50,
-            energyThreshold: 6e-9,
-            mass: 4,
-            overshootClamping: false,
-            stiffness: 600,
-          }),
-        );
+        translateY.set(withSpring(0, PAGE_SPRING_CONFIG));
+      })
+      .onFinalize((_event, success) => {
+        if ((!success || nativeInteractionHadMultipleTouches.get()) && scale.get() <= 1) {
+          resetDismissTranslation();
+        }
       });
-  }, [translateY, dismissOptions, handleDismiss, isZoomed]);
+  }, [
+    dismissOptions,
+    handleDismiss,
+    isPinching,
+    isTriggerOpening,
+    isZoomed,
+    nativeInteractionHadMultipleTouches,
+    pageTransitionLocked,
+    scale,
+    suppressNativeTap,
+    translateY,
+  ]);
+
+  const getCurrentTapTarget = useCallback((): { index: number; item: ItemT } | null => {
+    const index = pendingIndexRef.current;
+
+    if (index < 0 || index >= dataRef.current.length || !(index in dataRef.current)) {
+      return null;
+    }
+
+    return { index, item: dataRef.current[index] as ItemT };
+  }, []);
+
+  const isWebInteractionLocked = useCallback(
+    () => isPageTransitioningRef.current || pageTransitionLocked.get(),
+    [isPageTransitioningRef, pageTransitionLocked],
+  );
+
+  const emitSingleTap = useCallback<EmitSingleTap<ItemT>>(
+    (x, y, tapTarget) => {
+      if (isPageTransitioningRef.current) {
+        return;
+      }
+
+      const target = tapTarget ?? getCurrentTapTarget();
+
+      if (!target) {
+        return;
+      }
+
+      const { index: targetIndex, item: targetItem } = target;
+
+      if (targetIndex < 0) {
+        return;
+      }
+
+      managerRef.current?.emitTap({ kind: 'single', x, y, index: targetIndex });
+      onSingleTapRef.current?.({ x, y, index: targetIndex, item: targetItem });
+    },
+    [getCurrentTapTarget, isPageTransitioningRef],
+  );
+
+  const singleTapGesture = useMemo(
+    () =>
+      Gesture.Tap()
+        .enabled(enableNativeTapGestures)
+        .numberOfTaps(1)
+        .maxDistance(NATIVE_TAP_MAX_DISTANCE)
+        .onTouchesDown((event, stateManager) => {
+          if (event.numberOfTouches === 1) {
+            nativeInteractionHadMultipleTouches.set(false);
+            suppressNativeTap.set(false);
+            return;
+          }
+
+          nativeInteractionHadMultipleTouches.set(true);
+          suppressNativeTap.set(true);
+          stateManager.fail();
+        })
+        .onEnd((event, success) => {
+          if (!success || pageTransitionLocked.get() || suppressNativeTap.get()) {
+            return;
+          }
+
+          scheduleOnRN(emitSingleTap, event.x, event.y);
+        }),
+    [emitSingleTap, nativeInteractionHadMultipleTouches, pageTransitionLocked, suppressNativeTap],
+  );
+
+  const doubleTapGesture = useMemo(
+    () =>
+      Gesture.Tap()
+        .enabled(enableDoubleTapZoom && enableNativeTapGestures)
+        .numberOfTaps(2)
+        .maxDistance(NATIVE_TAP_MAX_DISTANCE)
+        .onTouchesDown((event, stateManager) => {
+          if (event.numberOfTouches === 1) {
+            return;
+          }
+
+          nativeInteractionHadMultipleTouches.set(true);
+          suppressNativeTap.set(true);
+          stateManager.fail();
+        })
+        .onEnd((event) => {
+          if (pageTransitionLocked.get() || suppressNativeTap.get()) {
+            return;
+          }
+
+          applyTapZoomAtPoint({
+            x: event.x,
+            y: event.y,
+            width,
+            height,
+            maxZoomScale,
+            scale,
+            translateX,
+            translateY,
+          });
+        }),
+    [
+      enableDoubleTapZoom,
+      height,
+      maxZoomScale,
+      nativeInteractionHadMultipleTouches,
+      pageTransitionLocked,
+      scale,
+      suppressNativeTap,
+      translateX,
+      translateY,
+      width,
+    ],
+  );
+
+  const tapGesture = useMemo(
+    () => Gesture.Exclusive(doubleTapGesture, singleTapGesture),
+    [doubleTapGesture, singleTapGesture],
+  );
 
   const zoomPinchGesture = useMemo(
     () =>
@@ -537,11 +945,29 @@ export const useGestureViewer = <ItemT, LC>({
         .enabled(enablePinchZoom)
         .onTouchesDown((event) => {
           if (event.numberOfTouches === 2) {
+            nativeInteractionHadMultipleTouches.set(true);
+            suppressNativeTap.set(true);
             scheduleOnRN(setIsPinching, true);
           }
         })
         .onStart((event) => {
-          startScale.set(scale.get());
+          if (pageTransitionLocked.get()) {
+            return;
+          }
+
+          const currentScale = scale.get();
+
+          nativeInteractionHadMultipleTouches.set(true);
+          suppressNativeTap.set(true);
+          startScale.set(currentScale);
+
+          if (currentScale <= 1) {
+            cancelAnimation(translateX);
+            cancelAnimation(translateY);
+            translateX.set(0);
+            translateY.set(0);
+          }
+
           initialTranslateX.set(translateX.get());
           initialTranslateY.set(translateY.get());
           startFocalX.set(event.focalX);
@@ -551,6 +977,10 @@ export const useGestureViewer = <ItemT, LC>({
           hasActiveFocal.set(false);
         })
         .onUpdate((event) => {
+          if (pageTransitionLocked.get()) {
+            return;
+          }
+
           const initialScale = startScale.get();
           const newScale = initialScale * event.scale;
 
@@ -612,6 +1042,10 @@ export const useGestureViewer = <ItemT, LC>({
           translateY.set(constrainedTranslateY);
         })
         .onEnd(() => {
+          if (pageTransitionLocked.get()) {
+            return;
+          }
+
           const currentScale = scale.get();
 
           if (currentScale > maxZoomScale) {
@@ -684,20 +1118,47 @@ export const useGestureViewer = <ItemT, LC>({
       startFocalX,
       startFocalY,
       hasActiveFocal,
+      nativeInteractionHadMultipleTouches,
+      pageTransitionLocked,
+      suppressNativeTap,
     ],
   );
 
   const zoomPanGesture = useMemo(
     () =>
       Gesture.Pan()
-        .enabled(enablePanWhenZoomed && isZoomed)
+        .enabled(enablePanWhenZoomed && !isPinching && isZoomed)
+        .maxPointers(1)
         .activeCursor('grabbing')
         .averageTouches(true)
+        .onTouchesDown((event, stateManager) => {
+          if (event.numberOfTouches === 1) {
+            nativeInteractionHadMultipleTouches.set(false);
+            return;
+          }
+
+          if (event.numberOfTouches > 1) {
+            nativeInteractionHadMultipleTouches.set(true);
+            suppressNativeTap.set(true);
+            stateManager.fail();
+          }
+        })
         .onBegin(() => {
+          if (nativeInteractionHadMultipleTouches.get() || pageTransitionLocked.get()) {
+            return;
+          }
+
           initialTranslateX.set(translateX.get());
           initialTranslateY.set(translateY.get());
         })
+        .onStart(() => {
+          suppressNativeTap.set(true);
+        })
         .onUpdate((event) => {
+          if (nativeInteractionHadMultipleTouches.get() || pageTransitionLocked.get()) {
+            return;
+          }
+
           const currentScale = scale.get();
 
           if (currentScale > 1) {
@@ -719,78 +1180,38 @@ export const useGestureViewer = <ItemT, LC>({
       translateX,
       translateY,
       enablePanWhenZoomed,
+      isPinching,
       isZoomed,
       scale,
       initialTranslateX,
       initialTranslateY,
       constrainTranslation,
+      nativeInteractionHadMultipleTouches,
+      pageTransitionLocked,
+      suppressNativeTap,
     ],
   );
 
-  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()
-        .enabled(enableDoubleTapZoom && Platform.OS !== 'web')
-        .numberOfTaps(2)
-        .onEnd((event) => {
-          applyTapZoomAtPoint({
-            x: event.x,
-            y: event.y,
-            width,
-            height,
-            maxZoomScale,
-            scale,
-            translateX,
-            translateY,
-          });
-        }),
-    [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, tapGesture)),
-    [zoomPinchGesture, zoomPanGesture, tapGesture],
+    () => Gesture.Exclusive(zoomPanGesture, tapGesture),
+    [zoomPanGesture, tapGesture],
   );
 
+  const onWebClick = useWebClickHandler({
+    clearPendingWebSingleTap,
+    emitSingleTap,
+    enableDoubleTapZoom,
+    getCurrentTapTarget,
+    height,
+    maxZoomScale,
+    scale,
+    scheduleWebSingleTap,
+    isInteractionLocked: isWebInteractionLocked,
+    translateX,
+    translateY,
+    width,
+  });
+
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: triggerOpacity.get(),
     transform: [
@@ -818,54 +1239,23 @@ export const useGestureViewer = <ItemT, LC>({
     return { opacity: baseOpacity * dismissOpacity };
   }, [dismissOptions.direction, dismissOptions.fadeBackdrop]);
 
-  const nativeScrollGesture = useMemo(() => {
-    return Gesture.Native().requireExternalGestureToFail(dismissGestureRef);
-  }, []);
-
-  const { activeListIndex, 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 {
-    activeListIndex,
     animatedStyle,
     backdropStyle,
+    centerVirtualIndex: renderCenterVirtualIndex,
+    currentIndex: renderCurrentIndex,
     dataLength,
     dismissGesture,
     handleDismiss,
+    horizontalPagingGesture,
     isPinching,
     isRotated,
-
     isZoomed,
-    listRef,
-    nativeScrollGesture,
     onWebClick,
-    onMomentumScrollEnd,
-    onScroll,
-
-    onScrollBeginDrag,
+    pageStride,
+    renderWindowSlots,
+    visualPage,
     zoomGesture,
+    zoomPinchGesture,
   };
 };