react-native-gesture-image-viewer 2.3.3 → 3.0.0-beta.0

package/lib/module/useGestureViewer.js

@@ -1,17 +1,27 @@
 "use strict";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, useWindowDimensions } from 'react-native';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
 import { Gesture } from 'react-native-gesture-handler';
-import { Easing, interpolate, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { Easing, cancelAnimation, interpolate, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
+import { PAGE_SPRING_CONFIG, SWIPE_THRESHOLD_RATIO, SWIPE_VELOCITY_THRESHOLD } from "./gestureViewerAnimation.js";
+import { normalizeHorizontalSwipeThreshold } from "./gestureViewerPaging.js";
 import { registry } from "./GestureViewerRegistry.js";
-import { scheduleInitialScroll } from "./scheduleInitialScroll.js";
-import { useGestureViewerPaging } from './useGestureViewerPaging';
-import { createBoundsConstraint, createScrollAction } from "./utils/index.js";
+import { resolveGestureViewerRenderWindow } from "./gestureViewerRenderWindow.js";
+import { enableNativeTapGestures } from './platformTapGestures';
+import { getLogicalIndex, getPageStride, getVirtualIndexForLogicalIndex, normalizePageSpacing, clampIndex, resolveNavigation, shouldRunNavigationDuringTransition } from "./renderWindow.js";
+import { useGestureViewerManagerBridge } from "./useGestureViewerManagerBridge.js";
+import { useGestureViewerPaging } from "./useGestureViewerPaging.js";
+import { useWebClickHandler } from './useWebClickHandler';
+import { useWebSingleTapTimer } from './useWebSingleTapTimer';
+import { createBoundsConstraint } from "./utils/index.js";
 import { getDismissDistance, shouldDismissByDirection } from "./utils/dismiss.js";
 import { applyTapZoomAtPoint } from "./utils/tapZoom.js";
 import { calculateFocalPointTranslation, shouldAcceptFocalPoint } from "./utils/zoom.js";
+const isValidTriggerRect = rect => {
+  return !!rect && rect.width > 0 && rect.height > 0;
+};
 export const useGestureViewer = ({
   data,
   initialIndex = 0,
@@ -21,11 +31,12 @@ export const useGestureViewer = ({
   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,
@@ -39,42 +50,59 @@ export const useGestureViewer = ({
   } = 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(undefined);
   const [isZoomed, setIsZoomed] = useState(false);
   const [isRotated, setIsRotated] = useState(false);
   const [isPinching, setIsPinching] = useState(false);
   const [shouldStartTriggerAnimation, setShouldStartTriggerAnimation] = useState(false);
-  const [manager, setManager] = useState(null);
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const [activeTriggerNode, setActiveTriggerNode] = useState(null);
-  const listRef = useRef(null);
+  const [currentIndex, setCurrentIndex] = useState(initialCurrentIndex);
+  const [centerVirtualIndex, setCenterVirtualIndex] = useState(initialCurrentIndex);
+  const [activeTriggerNode, setActiveTriggerNode] = useState(() => registry.getActiveTriggerNode(id));
+  const [isTriggerOpening, setIsTriggerOpening] = useState(() => !!registry.getActiveTriggerNode(id));
   const triggerRectRef = useRef(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 => {
-    return !!rect && rect.width > 0 && rect.height > 0;
-  }, []);
+  const dataLengthRef = useRef(dataLength);
+  const enableLoopRef = useRef(enableLoop);
+  const managerRef = useRef(null);
+  const isZoomedRef = useRef(isZoomed);
+  const isRotatedRef = useRef(isRotated);
+  const isPinchingRef = useRef(isPinching);
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
   const startScale = useSharedValue(1);
   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 {
+    clearPendingWebSingleTap,
+    scheduleWebSingleTap
+  } = useWebSingleTapTimer();
   const animationConfig = useMemo(() => ({
     duration: triggerAnimation?.duration ?? 300,
     easing: triggerAnimation?.easing ?? Easing.bezier(0.25, 0.1, 0.25, 1),
@@ -87,20 +115,22 @@ export const useGestureViewer = ({
     resistance: dismiss?.resistance ?? 2,
     threshold: dismiss?.threshold ?? 80
   }), [dismiss?.direction, dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop]);
-  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, animated) => {
-    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));
@@ -110,111 +140,240 @@ export const useGestureViewer = ({
     scale.set(withTiming(1));
     rotation.set(0);
   }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
-  const syncPendingIndex = useCallback(nextIndex => {
-    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 => {
+    pendingIndexRef.current = nextIndex;
+    currentIndexRef.current = nextIndex;
+    setCurrentIndex(nextIndex);
+    managerRef.current?.notifyStateChange();
+  }, []);
+  const commitVirtualIndexOnly = useCallback(nextVirtualIndex => {
+    const nextLogicalIndex = getLogicalIndex(nextVirtualIndex, dataLengthRef.current, enableLoopRef.current);
+    if (nextLogicalIndex === null) {
       return;
     }
-    pendingIndexRef.current = nextIndex;
-  }, [dataLength]);
-  const syncCurrentIndex = useCallback(nextIndex => {
-    if (!manager || nextIndex < 0 || nextIndex >= dataLength) {
+    centerVirtualIndexRef.current = nextVirtualIndex;
+    setCenterVirtualIndex(nextVirtualIndex);
+    commitCurrentIndex(nextLogicalIndex);
+  }, [commitCurrentIndex]);
+  const {
+    animateToVirtualPage,
+    horizontalPagingGesture,
+    isPageTransitioningRef,
+    pageTransitionLocked,
+    snapToVirtualPage,
+    visualPage
+  } = useGestureViewerPaging({
+    centerVirtualIndex,
+    clearPendingWebSingleTap,
+    commitVirtualIndexOnly,
+    currentIndex,
+    dataLength,
+    enableLoop,
+    horizontalSwipeDistanceThresholdRatio,
+    horizontalSwipeEnabled,
+    horizontalSwipeVelocityThreshold,
+    initialPage: initialCurrentIndex,
+    isPinching,
+    isRotated,
+    isTriggerOpening,
+    isZoomed,
+    pageStride,
+    width
+  });
+  const navigateToIndex = useCallback((targetIndex, options, preferredDirection) => {
+    const resolution = resolveNavigation({
+      currentIndex: currentIndexRef.current,
+      dataLength: dataLengthRef.current,
+      enableLoop: enableLoopRef.current,
+      preferredDirection,
+      targetIndex
+    });
+    if (resolution.kind === 'noop') {
       return;
     }
-    pendingIndexRef.current = nextIndex;
-    const managerCurrentIndex = manager.getState().currentIndex;
-    if (nextIndex === managerCurrentIndex) {
+    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);
+    if (targetVirtualIndex === null) {
+      return;
+    }
+    if (resolution.kind !== 'step' || options?.animated === false) {
+      resetTransformStateImmediately();
+      snapToVirtualPage(targetVirtualIndex);
       return;
     }
-    manager.setCurrentIndex(nextIndex);
-    manager.notifyStateChange();
     resetTransformState();
-  }, [dataLength, manager, resetTransformState]);
+    animateToVirtualPage(targetVirtualIndex);
+  }, [animateToVirtualPage, isPageTransitioningRef, resetTransformStateImmediately, resetTransformState, snapToVirtualPage]);
+  const navigateByDirection = useCallback(direction => {
+    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, prevScale) => {
     managerRef.current?.emitZoomChange(currentScale, prevScale);
   }, []);
   const emitRotationChange = useCallback((currentRotation, prevRotation) => {
     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;
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, managerInstance => {
-      setManager(managerInstance);
-      unsubscribe = managerInstance?.subscribe(state => {
-        pendingIndexRef.current = state.currentIndex;
-        setCurrentIndex(state.currentIndex);
-      });
+    return registry.subscribeToActiveTrigger(id, node => {
+      setActiveTriggerNode(node);
+      if (node) {
+        setIsTriggerOpening(true);
+      }
     });
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribe?.();
-    };
   }, [id]);
   useEffect(() => {
-    return registry.subscribeToActiveTrigger(id, setActiveTriggerNode);
-  }, [id]);
+    dataRef.current = data;
+  }, [data]);
   useEffect(() => {
-    pendingIndexRef.current = initialIndex;
-    if (!manager) {
-      return;
-    }
-    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();
-  }, [dataLength, enableHorizontalSwipe, initialIndex, manager, width, itemSpacing, maxZoomScale, enableLoop, scale, height, resetTransformState, translateX, translateY, rotation]);
+    isZoomedRef.current = isZoomed;
+  }, [isZoomed]);
   useEffect(() => {
-    if (!manager || !listRef.current) {
-      return;
-    }
-    manager.setListRef(listRef.current);
-  }, [manager]);
+    isRotatedRef.current = isRotated;
+  }, [isRotated]);
   useEffect(() => {
-    translateY.set(0);
-    translateX.set(0);
-    scale.set(1);
-    backdropOpacity.set(1);
-    startScale.set(1);
-    rotation.set(0);
-    if (adjustedInitialIndex <= 0 || !listRef.current) {
-      return;
-    }
-    return scheduleInitialScroll(() => {
-      scrollTo(adjustedInitialIndex, false);
-    });
-  }, [adjustedInitialIndex, translateY, backdropOpacity, translateX, scale, startScale, rotation, scrollTo]);
+    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();
+    }
+    if (shouldResetTransform) {
+      resetTransformState();
+    }
+  }, [commitCurrentIndex, dataLength, enableLoop, initialIndex, isPageTransitioningRef, resetTransformState, snapToVirtualPage]);
   useEffect(() => {
-    dataRef.current = data;
-  }, [data]);
-  useEffect(() => {
-    managerRef.current = manager;
-  }, [manager]);
+    return () => {
+      triggerRectRef.current = null;
+      clearPendingWebSingleTap();
+    };
+  }, [clearPendingWebSingleTap]);
   useEffect(() => {
-    onSingleTapRef.current = onSingleTap;
-  }, [onSingleTap]);
+    if (!autoPlay || dataLength <= 1 || isTriggerOpening || isZoomed || isRotated || isPinching || !enableLoop && currentIndex >= dataLength - 1) {
+      return;
+    }
+    const interval = Math.max(250, Math.floor(autoPlayInterval || 0));
+    if (!Number.isFinite(interval)) {
+      return;
+    }
+    const timer = setInterval(() => {
+      if (isPageTransitioningRef.current || isZoomedRef.current || isRotatedRef.current || isPinchingRef.current) {
+        return;
+      }
+      const nextIndex = currentIndexRef.current >= dataLengthRef.current - 1 ? enableLoopRef.current ? 0 : null : currentIndexRef.current + 1;
+      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) {
       const startX = triggerRectRef.current.x + triggerRectRef.current.width / 2 - width / 2;
@@ -226,7 +385,7 @@ export const useGestureViewer = ({
       triggerOpacity.set(0);
       triggerScale.set(withTiming(1, animationConfig, finished => {
         if (finished) {
-          scheduleOnRN(onAnimationComplete);
+          scheduleOnRN(finishTriggerOpening);
         }
       }));
       triggerTranslateX.set(withTiming(0, animationConfig));
@@ -238,9 +397,15 @@ export const useGestureViewer = ({
       }));
       setShouldStartTriggerAnimation(false);
     }
-  }, [shouldStartTriggerAnimation, animationConfig, width, height, triggerOpacity, triggerScale, triggerTranslateX, triggerTranslateY, onAnimationComplete]);
+  }, [shouldStartTriggerAnimation, animationConfig, width, height, triggerOpacity, triggerScale, triggerTranslateX, triggerTranslateY, 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;
     }
     activeTriggerNode.measure((_x, _y, measuredWidth, measuredHeight, pageX, pageY) => {
@@ -251,6 +416,8 @@ export const useGestureViewer = ({
         y: pageY
       };
       if (!isValidTriggerRect(nextTriggerRect)) {
+        setIsTriggerOpening(false);
+        triggerOpacity.set(1);
         registry.clearActiveTriggerNode(id);
         return;
       }
@@ -259,12 +426,7 @@ export const useGestureViewer = ({
       setShouldStartTriggerAnimation(true);
       registry.clearActiveTriggerNode(id);
     });
-  }, [activeTriggerNode, id, isValidTriggerRect, triggerOpacity]);
-  useEffect(() => {
-    return () => {
-      triggerRectRef.current = null;
-    };
-  }, []);
+  }, [activeTriggerNode, id, triggerOpacity]);
   const animateDismissToRect = useCallback(rect => {
     const endX = rect.x + rect.width / 2 - width / 2;
     const endY = rect.y + rect.height / 2 - height / 2;
@@ -284,6 +446,9 @@ export const useGestureViewer = ({
     }
   }, [onDismiss]);
   const handleDismiss = useCallback(() => {
+    if (isPageTransitioningRef.current) {
+      return;
+    }
     onDismissStart?.();
     const dismissTargetIndex = pendingIndexRef.current;
     const indexedTriggerNode = registry.getIndexedTriggerNode(id, dismissTargetIndex);
@@ -312,30 +477,98 @@ export const useGestureViewer = ({
       return;
     }
     dismissWithoutTrigger();
-  }, [animateDismissToRect, dismissWithoutTrigger, id, isValidTriggerRect, onDismissStart]);
+  }, [animateDismissToRect, dismissWithoutTrigger, id, isPageTransitioningRef, onDismissStart]);
   const dismissGesture = useMemo(() => {
-    const canDismiss = !isZoomed && dismissOptions.enabled;
+    const canDismiss = !isTriggerOpening && !isZoomed && dismissOptions.enabled;
     return Gesture.Pan().minDistance(10).averageTouches(true).activeCursor('grabbing').activeOffsetY([-10, 10]).failOffsetX([-10, 10]).withRef(dismissGestureRef).enabled(canDismiss).onUpdate(event => {
+      if (pageTransitionLocked.get()) {
+        return;
+      }
       translateY.set(event.translationY / dismissOptions.resistance);
     }).onEnd(event => {
+      if (pageTransitionLocked.get()) {
+        translateY.set(withSpring(0, PAGE_SPRING_CONFIG));
+        return;
+      }
       if (canDismiss && shouldDismissByDirection(event.translationY, dismissOptions.threshold, dismissOptions.direction)) {
         scheduleOnRN(handleDismiss);
         return;
       }
-      translateY.set(withSpring(0, {
-        damping: 50,
-        energyThreshold: 6e-9,
-        mass: 4,
-        overshootClamping: false,
-        stiffness: 600
-      }));
+      translateY.set(withSpring(0, PAGE_SPRING_CONFIG));
     });
-  }, [translateY, dismissOptions, handleDismiss, isZoomed]);
+  }, [translateY, dismissOptions, handleDismiss, isTriggerOpening, isZoomed, pageTransitionLocked]);
+  const getCurrentTapTarget = useCallback(() => {
+    const index = pendingIndexRef.current;
+    if (index < 0 || index >= dataRef.current.length || !(index in dataRef.current)) {
+      return null;
+    }
+    return {
+      index,
+      item: dataRef.current[index]
+    };
+  }, []);
+  const isWebInteractionLocked = useCallback(() => isPageTransitioningRef.current || pageTransitionLocked.get(), [isPageTransitioningRef, pageTransitionLocked]);
+  const emitSingleTap = useCallback((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).onEnd((event, success) => {
+    if (!success || pageTransitionLocked.get()) {
+      return;
+    }
+    scheduleOnRN(emitSingleTap, event.x, event.y);
+  }), [emitSingleTap, pageTransitionLocked]);
+  const doubleTapGesture = useMemo(() => Gesture.Tap().enabled(enableDoubleTapZoom && enableNativeTapGestures).numberOfTaps(2).onEnd(event => {
+    if (pageTransitionLocked.get()) {
+      return;
+    }
+    applyTapZoomAtPoint({
+      x: event.x,
+      y: event.y,
+      width,
+      height,
+      maxZoomScale,
+      scale,
+      translateX,
+      translateY
+    });
+  }), [enableDoubleTapZoom, height, maxZoomScale, pageTransitionLocked, scale, translateX, translateY, width]);
+  const tapGesture = useMemo(() => Gesture.Exclusive(doubleTapGesture, singleTapGesture), [doubleTapGesture, singleTapGesture]);
   const zoomPinchGesture = useMemo(() => Gesture.Pinch().enabled(enablePinchZoom).onTouchesDown(event => {
+    if (pageTransitionLocked.get()) {
+      return;
+    }
     if (event.numberOfTouches === 2) {
       scheduleOnRN(setIsPinching, true);
     }
   }).onStart(event => {
+    if (pageTransitionLocked.get()) {
+      return;
+    }
     startScale.set(scale.get());
     initialTranslateX.set(translateX.get());
     initialTranslateY.set(translateY.get());
@@ -345,6 +578,9 @@ export const useGestureViewer = ({
     lastFocalY.set(event.focalY);
     hasActiveFocal.set(false);
   }).onUpdate(event => {
+    if (pageTransitionLocked.get()) {
+      return;
+    }
     const initialScale = startScale.get();
     const newScale = initialScale * event.scale;
     scale.set(newScale);
@@ -398,6 +634,9 @@ export const useGestureViewer = ({
     translateX.set(constrainedTranslateX);
     translateY.set(constrainedTranslateY);
   }).onEnd(() => {
+    if (pageTransitionLocked.get()) {
+      return;
+    }
     const currentScale = scale.get();
     if (currentScale > maxZoomScale) {
       scale.set(withTiming(maxZoomScale, {
@@ -443,11 +682,17 @@ export const useGestureViewer = ({
   }).onFinalize(() => {
     hasActiveFocal.set(false);
     scheduleOnRN(setIsPinching, false);
-  }), [scale, enablePinchZoom, maxZoomScale, translateX, translateY, startScale, initialTranslateX, initialTranslateY, width, height, constrainTranslation, lastFocalX, lastFocalY, startFocalX, startFocalY, hasActiveFocal]);
+  }), [scale, enablePinchZoom, maxZoomScale, translateX, translateY, startScale, initialTranslateX, initialTranslateY, width, height, constrainTranslation, lastFocalX, lastFocalY, startFocalX, startFocalY, hasActiveFocal, pageTransitionLocked]);
   const zoomPanGesture = useMemo(() => Gesture.Pan().enabled(enablePanWhenZoomed && isZoomed).activeCursor('grabbing').averageTouches(true).onBegin(() => {
+    if (pageTransitionLocked.get()) {
+      return;
+    }
     initialTranslateX.set(translateX.get());
     initialTranslateY.set(translateY.get());
   }).onUpdate(event => {
+    if (pageTransitionLocked.get()) {
+      return;
+    }
     const currentScale = scale.get();
     if (currentScale > 1) {
       const newTranslateX = initialTranslateX.get() + event.translationX;
@@ -463,50 +708,22 @@ export const useGestureViewer = ({
       translateX.set(constrainedTranslateX);
       translateY.set(constrainedTranslateY);
     }
-  }), [translateX, translateY, enablePanWhenZoomed, isZoomed, scale, initialTranslateX, initialTranslateY, constrainTranslation]);
-  const emitSingleTap = useCallback((x, y) => {
-    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]);
+  }), [translateX, translateY, enablePanWhenZoomed, isZoomed, scale, initialTranslateX, initialTranslateY, constrainTranslation, pageTransitionLocked]);
   const zoomGesture = useMemo(() => Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, tapGesture)), [zoomPinchGesture, 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: [{
@@ -538,53 +755,22 @@ export const useGestureViewer = ({
       opacity: baseOpacity * dismissOpacity
     };
   }, [dismissOptions.direction, dismissOptions.fadeBackdrop]);
-  const nativeScrollGesture = useMemo(() => {
-    return Gesture.Native().requireExternalGestureToFail(dismissGestureRef);
-  }, []);
-  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,
     backdropStyle,
+    centerVirtualIndex: renderCenterVirtualIndex,
+    currentIndex: renderCurrentIndex,
     dataLength,
     dismissGesture,
     handleDismiss,
+    horizontalPagingGesture,
     isPinching,
     isRotated,
     isZoomed,
-    listRef,
-    nativeScrollGesture,
     onWebClick,
-    onMomentumScrollEnd,
-    onScroll,
-    onScrollBeginDrag,
+    pageStride,
+    renderWindowSlots,
+    visualPage,
     zoomGesture
   };
 };