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

package/src/useGestureViewerController.ts

@@ -11,7 +11,7 @@ import type { GestureViewerController } from './types';
  * @returns Methods for controlling the viewer
  *
  * **Available methods:**
- * - `goToIndex(index: number)` - Navigate to specific index (0 to totalCount-1)
+ * - `goToIndex(index: number, options?: { animated?: boolean })` - Navigate to specific index (0 to totalCount-1)
  * - `goToPrevious()` - Navigate to previous item
  * - `goToNext()` - Navigate to next item
  * - `zoomIn(multiplier?: number)` - Zoom in (default: 0.25)
@@ -58,8 +58,8 @@ export const useGestureViewerController = (id = 'default'): GestureViewerControl
 
   return useMemo<GestureViewerController>(
     () => ({
-      goToIndex: (index) => {
-        managerRef.current?.goToIndex(index);
+      goToIndex: (index, options) => {
+        managerRef.current?.goToIndex(index, options);
       },
       goToPrevious: () => {
         managerRef.current?.goToPrevious();

package/src/useGestureViewerManagerBridge.ts

@@ -0,0 +1,118 @@
+import { useEffect, useState, type RefObject } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type GestureViewerManager from './GestureViewerManager';
+import type { GestureViewerNavigationOptions } from './GestureViewerManager';
+import { registry } from './GestureViewerRegistry';
+
+type UseGestureViewerManagerBridgeOptions = {
+  currentIndexRef: RefObject<number>;
+  dataLengthRef: RefObject<number>;
+  goToIndex: (index: number, options?: GestureViewerNavigationOptions) => void;
+  goToNext: () => void;
+  goToPrevious: () => void;
+  hasRotationChangeListeners: SharedValue<boolean>;
+  hasZoomChangeListeners: SharedValue<boolean>;
+  height: number;
+  id: string;
+  managerRef: RefObject<GestureViewerManager | null>;
+  maxZoomScale: number;
+  rotation: SharedValue<number>;
+  scale: SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+  width: number;
+};
+
+/**
+ * Owns the registry-to-manager bridge side effects for one viewer instance.
+ */
+export function useGestureViewerManagerBridge({
+  currentIndexRef,
+  dataLengthRef,
+  goToIndex,
+  goToNext,
+  goToPrevious,
+  hasRotationChangeListeners,
+  hasZoomChangeListeners,
+  height,
+  id,
+  managerRef,
+  maxZoomScale,
+  rotation,
+  scale,
+  translateX,
+  translateY,
+  width,
+}: UseGestureViewerManagerBridgeOptions) {
+  const [manager, setManager] = useState<GestureViewerManager | null>(null);
+
+  useEffect(() => {
+    return registry.subscribeToManager(id, (managerInstance) => {
+      managerRef.current = managerInstance;
+      setManager(managerInstance);
+    });
+  }, [id, managerRef]);
+
+  useEffect(() => {
+    if (!manager) {
+      return;
+    }
+
+    manager.setWidth(width);
+    manager.setHeight(height);
+    manager.setZoomSharedValues(scale, translateX, translateY, maxZoomScale);
+    manager.setRotation(rotation);
+  }, [height, manager, maxZoomScale, rotation, scale, translateX, translateY, width]);
+
+  useEffect(() => {
+    if (!manager) {
+      hasZoomChangeListeners.set(false);
+      hasRotationChangeListeners.set(false);
+      return;
+    }
+
+    return manager.subscribeToEventListenerPresence((eventType, hasListeners) => {
+      if (eventType === 'zoomChange') {
+        hasZoomChangeListeners.set(hasListeners);
+        return;
+      }
+
+      if (eventType === 'rotationChange') {
+        hasRotationChangeListeners.set(hasListeners);
+      }
+    });
+  }, [hasRotationChangeListeners, hasZoomChangeListeners, manager]);
+
+  useEffect(() => {
+    if (!manager) {
+      return;
+    }
+
+    manager.setStateReader(() => ({
+      currentIndex: currentIndexRef.current,
+      totalCount: dataLengthRef.current,
+    }));
+    manager.notifyStateChange();
+
+    return () => {
+      manager.setStateReader(null);
+    };
+  }, [currentIndexRef, dataLengthRef, manager]);
+
+  useEffect(() => {
+    if (!manager) {
+      return;
+    }
+
+    manager.setNavigationAdapter({
+      goToIndex,
+      goToNext,
+      goToPrevious,
+    });
+
+    return () => {
+      manager.setNavigationAdapter(null);
+    };
+  }, [goToIndex, goToNext, goToPrevious, manager]);
+}

package/src/useGestureViewerPaging.ts

@@ -1,144 +1,338 @@
-import { useCallback, useEffect, useState } from 'react';
-import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { useCallback, useMemo, useRef } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  cancelAnimation,
+  type SharedValue,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
-import type {
-  UseGestureViewerPagingArgs,
-  UseGestureViewerPagingResult,
-} from './useGestureViewerPaging.types';
-import { getLoopAdjustedIndex } from './utils';
+import {
+  EDGE_RESISTANCE,
+  PAGE_SPRING_CONFIG,
+  PAGE_TRANSITION_CONFIG,
+} from './gestureViewerAnimation';
+import {
+  applyHorizontalEdgeResistance,
+  resolveHorizontalPagingTarget,
+  resolveHorizontalSwipeDirection,
+} from './gestureViewerPaging';
 
+type UseGestureViewerPagingOptions = {
+  centerVirtualIndex: number;
+  clearPendingWebSingleTap: () => void;
+  commitVirtualIndexOnly: (targetVirtualIndex: number) => void;
+  currentIndex: number;
+  dataLength: number;
+  enableLoop: boolean;
+  horizontalSwipeDistanceThresholdRatio: number;
+  horizontalSwipeEnabled: boolean;
+  horizontalSwipeVelocityThreshold: number;
+  initialPage: number;
+  isPinching: boolean;
+  isRotated: boolean;
+  isTriggerOpening: boolean;
+  isZoomed: boolean;
+  pageStride: number;
+  suppressNativeTap: SharedValue<boolean>;
+  width: number;
+};
+
+/**
+ * Owns horizontal paging shared values, transition state, and paging commands.
+ */
 export function useGestureViewerPaging({
-  adjustedInitialIndex,
-  autoPlay,
-  autoPlayInterval,
+  centerVirtualIndex,
+  clearPendingWebSingleTap,
+  commitVirtualIndexOnly,
   currentIndex,
   dataLength,
-  enableHorizontalSwipe,
   enableLoop,
+  horizontalSwipeDistanceThresholdRatio,
+  horizontalSwipeEnabled,
+  horizontalSwipeVelocityThreshold,
+  initialPage,
+  isPinching,
   isRotated,
+  isTriggerOpening,
   isZoomed,
-  itemSpacing,
-  manager,
-  scrollTo,
-  syncCurrentIndex,
-  syncPendingIndex,
+  pageStride,
+  suppressNativeTap,
   width,
-}: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
-  const [activeListIndex, setActiveListIndex] = useState(adjustedInitialIndex);
-  const activeResetItemSpacing = adjustedInitialIndex > 0 ? itemSpacing : 0;
-  const activeResetWidth = adjustedInitialIndex > 0 ? width : 0;
-
-  useEffect(() => {
-    setActiveListIndex(adjustedInitialIndex);
-  }, [adjustedInitialIndex, activeResetItemSpacing, activeResetWidth, dataLength]);
-
-  useEffect(() => {
-    if (
-      !autoPlay ||
-      !manager ||
-      dataLength <= 1 ||
-      isZoomed ||
-      isRotated ||
-      (!enableLoop && currentIndex === dataLength - 1)
-    ) {
-      return;
-    }
-
-    const intervalMs = Math.max(250, Math.floor(autoPlayInterval || 0));
-
-    if (!Number.isFinite(intervalMs)) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (isZoomed || isRotated) {
-        return;
-      }
-
-      manager.goToNext();
-    }, intervalMs);
+}: UseGestureViewerPagingOptions) {
+  const visualPage = useSharedValue(initialPage);
+  const pagingStartPage = useSharedValue(initialPage);
+  const pagingAnimationActive = useSharedValue(false);
+  const pagingGestureActive = useSharedValue(false);
+  const pageTransitionLocked = useSharedValue(false);
+  const isPageTransitioningRef = useRef(false);
 
-    return () => clearInterval(interval);
-  }, [
-    autoPlay,
-    autoPlayInterval,
-    currentIndex,
-    dataLength,
-    enableLoop,
-    isRotated,
-    isZoomed,
-    manager,
-  ]);
+  const setPageTransitioning = useCallback(
+    (nextTransitioning: boolean) => {
+      isPageTransitioningRef.current = nextTransitioning;
+      pageTransitionLocked.set(nextTransitioning);
 
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableHorizontalSwipe) {
-        return;
+      if (nextTransitioning) {
+        clearPendingWebSingleTap();
       }
+    },
+    [clearPendingWebSingleTap, pageTransitionLocked],
+  );
 
-      const { contentOffset } = event.nativeEvent;
-      const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
-      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(
-        scrollIndex,
-        dataLength,
-        enableLoop,
-      );
+  const clearPagingFlags = useCallback(() => {
+    pagingAnimationActive.set(false);
+    pagingGestureActive.set(false);
+  }, [pagingAnimationActive, pagingGestureActive]);
 
-      const isLoopHandled = manager?.handleMomentumScrollEnd(scrollIndex);
+  const cancelPagingInteraction = useCallback(() => {
+    clearPendingWebSingleTap();
+    cancelAnimation(visualPage);
+    clearPagingFlags();
+    setPageTransitioning(false);
+  }, [clearPendingWebSingleTap, clearPagingFlags, setPageTransitioning, visualPage]);
 
-      if (realIndex < 0 || realIndex >= dataLength) {
-        return;
-      }
+  const snapToVirtualPage = useCallback(
+    (targetVirtualIndex: number) => {
+      clearPendingWebSingleTap();
+      cancelAnimation(visualPage);
+      clearPagingFlags();
+      visualPage.set(targetVirtualIndex);
+      commitVirtualIndexOnly(targetVirtualIndex);
+      setPageTransitioning(false);
+    },
+    [
+      clearPendingWebSingleTap,
+      clearPagingFlags,
+      commitVirtualIndexOnly,
+      setPageTransitioning,
+      visualPage,
+    ],
+  );
 
-      if (isLoopHandled) {
-        syncCurrentIndex(realIndex);
-        setActiveListIndex(jumpToIndex ?? scrollIndex);
-        return;
-      }
+  const completeAnimatedVirtualPage = useCallback(
+    (targetVirtualIndex: number) => {
+      commitVirtualIndexOnly(targetVirtualIndex);
+      setPageTransitioning(false);
+    },
+    [commitVirtualIndexOnly, setPageTransitioning],
+  );
 
-      if (needsJump && jumpToIndex !== undefined) {
-        scrollTo(jumpToIndex, false);
-      }
+  const cancelAnimatedVirtualPage = useCallback(() => {
+    setPageTransitioning(false);
+  }, [setPageTransitioning]);
+
+  const animateToVirtualPage = useCallback(
+    (targetVirtualIndex: number) => {
+      cancelAnimation(visualPage);
+      clearPagingFlags();
+      pagingAnimationActive.set(true);
+      setPageTransitioning(true);
+      visualPage.set(
+        withTiming(targetVirtualIndex, PAGE_TRANSITION_CONFIG, (finished) => {
+          pagingAnimationActive.set(false);
+
+          if (finished) {
+            scheduleOnRN(completeAnimatedVirtualPage, targetVirtualIndex);
+            return;
+          }
 
-      syncCurrentIndex(realIndex);
-      setActiveListIndex(jumpToIndex ?? scrollIndex);
+          scheduleOnRN(cancelAnimatedVirtualPage);
+        }),
+      );
     },
     [
-      dataLength,
-      enableHorizontalSwipe,
-      enableLoop,
-      itemSpacing,
-      manager,
-      scrollTo,
-      syncCurrentIndex,
-      width,
+      cancelAnimatedVirtualPage,
+      clearPagingFlags,
+      completeAnimatedVirtualPage,
+      pagingAnimationActive,
+      setPageTransitioning,
+      visualPage,
     ],
   );
 
-  const onScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableHorizontalSwipe) {
+  const horizontalPagingGesture = useMemo(() => {
+    const canSwipe =
+      horizontalSwipeEnabled &&
+      dataLength > 1 &&
+      !isTriggerOpening &&
+      !isZoomed &&
+      !isRotated &&
+      !isPinching &&
+      pageStride > 0;
+    const settleToCenter = () => {
+      'worklet';
+      pagingAnimationActive.set(true);
+      visualPage.set(
+        withSpring(centerVirtualIndex, PAGE_SPRING_CONFIG, (finished) => {
+          pagingAnimationActive.set(false);
+
+          if (finished) {
+            scheduleOnRN(setPageTransitioning, false);
+          }
+        }),
+      );
+    };
+    const releasePagingForPinch = () => {
+      'worklet';
+      if (!pagingGestureActive.get()) {
         return;
       }
 
-      const { contentOffset } = event.nativeEvent;
-      const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
-      const { realIndex } = getLoopAdjustedIndex(scrollIndex, dataLength, enableLoop);
+      cancelAnimation(visualPage);
+      pagingAnimationActive.set(false);
+      pagingGestureActive.set(false);
+      pageTransitionLocked.set(false);
+      visualPage.set(withSpring(centerVirtualIndex, PAGE_SPRING_CONFIG));
+      scheduleOnRN(setPageTransitioning, false);
+    };
 
-      syncPendingIndex(realIndex);
-    },
-    [dataLength, enableHorizontalSwipe, enableLoop, itemSpacing, syncPendingIndex, width],
-  );
+    return Gesture.Pan()
+      .minDistance(10)
+      .maxPointers(1)
+      .averageTouches(true)
+      .activeCursor('grabbing')
+      .activeOffsetX([-10, 10])
+      .failOffsetY([-10, 10])
+      .enabled(canSwipe)
+      .onTouchesDown((event, stateManager) => {
+        if (event.numberOfTouches > 1) {
+          suppressNativeTap.set(true);
+          releasePagingForPinch();
+          stateManager.fail();
+        }
+      })
+      .onStart(() => {
+        if (pageTransitionLocked.get()) {
+          return;
+        }
+
+        // Pan enters BEGAN for ordinary taps, so lock paging only after swipe activation.
+        cancelAnimation(visualPage);
+        pagingAnimationActive.set(false);
+        pagingGestureActive.set(true);
+        pagingStartPage.set(visualPage.get());
+        suppressNativeTap.set(true);
+        scheduleOnRN(setPageTransitioning, true);
+      })
+      .onUpdate((event) => {
+        if (!pagingGestureActive.get()) {
+          return;
+        }
+
+        const dragPageDelta = -event.translationX / pageStride;
+        const basePage = pagingStartPage.get();
+        const nextPage = applyHorizontalEdgeResistance(
+          basePage + dragPageDelta,
+          currentIndex,
+          dataLength,
+          centerVirtualIndex,
+          enableLoop,
+          EDGE_RESISTANCE,
+        );
+
+        visualPage.set(nextPage);
+      })
+      .onEnd((event) => {
+        if (!pagingGestureActive.get()) {
+          return;
+        }
+
+        pagingGestureActive.set(false);
+
+        const direction = resolveHorizontalSwipeDirection(
+          event.translationX,
+          event.velocityX,
+          width,
+          horizontalSwipeDistanceThresholdRatio,
+          horizontalSwipeVelocityThreshold,
+        );
+
+        if (direction === 0) {
+          settleToCenter();
+          return;
+        }
+
+        const pagingTarget = resolveHorizontalPagingTarget(
+          centerVirtualIndex,
+          currentIndex,
+          dataLength,
+          direction,
+          enableLoop,
+        );
+
+        if (pagingTarget.kind === 'settle') {
+          settleToCenter();
+          return;
+        }
+
+        const targetVirtualIndex = pagingTarget.targetVirtualIndex;
 
-  const onScrollBeginDrag = useCallback(() => {
-    manager?.handleScrollBeginDrag();
-  }, [manager]);
+        pagingAnimationActive.set(true);
+        visualPage.set(
+          withTiming(targetVirtualIndex, PAGE_TRANSITION_CONFIG, (finished) => {
+            pagingAnimationActive.set(false);
+
+            if (finished) {
+              scheduleOnRN(completeAnimatedVirtualPage, targetVirtualIndex);
+              return;
+            }
+
+            scheduleOnRN(cancelAnimatedVirtualPage);
+          }),
+        );
+      })
+      .onFinalize(() => {
+        if (pagingAnimationActive.get()) {
+          return;
+        }
+
+        if (!pagingGestureActive.get()) {
+          return;
+        }
+
+        pagingGestureActive.set(false);
+
+        if (Math.abs(visualPage.get() - centerVirtualIndex) > 0.001) {
+          settleToCenter();
+          return;
+        }
+
+        scheduleOnRN(setPageTransitioning, false);
+      });
+  }, [
+    cancelAnimatedVirtualPage,
+    centerVirtualIndex,
+    completeAnimatedVirtualPage,
+    currentIndex,
+    dataLength,
+    enableLoop,
+    horizontalSwipeDistanceThresholdRatio,
+    horizontalSwipeEnabled,
+    horizontalSwipeVelocityThreshold,
+    isTriggerOpening,
+    isPinching,
+    isRotated,
+    isZoomed,
+    pageTransitionLocked,
+    pageStride,
+    pagingAnimationActive,
+    pagingGestureActive,
+    pagingStartPage,
+    setPageTransitioning,
+    suppressNativeTap,
+    visualPage,
+    width,
+  ]);
 
   return {
-    activeListIndex,
-    onMomentumScrollEnd,
-    onScroll,
-    onScrollBeginDrag,
-    onWebClick: undefined,
+    animateToVirtualPage,
+    cancelPagingInteraction,
+    horizontalPagingGesture,
+    isPageTransitioningRef,
+    pageTransitionLocked,
+    snapToVirtualPage,
+    visualPage,
   };
 }

package/src/useWebClickHandler.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type { ScheduleWebSingleTap } from './useWebSingleTapTimer';
+
+export type WebTapTarget<ItemT> = {
+  index: number;
+  item: ItemT;
+};
+
+export type WebClickEvent = {
+  clientX: number;
+  clientY: number;
+  currentTarget: {
+    getBoundingClientRect: () => {
+      left: number;
+      top: number;
+    };
+  };
+  detail: number;
+};
+
+export type WebClickHandler = (event: WebClickEvent) => void;
+
+export type EmitSingleTap<ItemT> = (x: number, y: number, tapTarget?: WebTapTarget<ItemT>) => void;
+
+export type WebClickHandlerConfig<ItemT> = {
+  clearPendingWebSingleTap: () => void;
+  emitSingleTap: EmitSingleTap<ItemT>;
+  enableDoubleTapZoom: boolean;
+  getCurrentTapTarget: () => WebTapTarget<ItemT> | null;
+  height: number;
+  isInteractionLocked: () => boolean;
+  maxZoomScale: number;
+  scale: SharedValue<number>;
+  scheduleWebSingleTap: ScheduleWebSingleTap;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+  width: number;
+};
+
+export function useWebClickHandler<ItemT>(_config: WebClickHandlerConfig<ItemT>): WebClickHandler {
+  return useCallback(() => {}, []);
+}