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

package/src/useGestureViewerController.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
+
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerController } from './types';

package/src/useGestureViewerEvent.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerEventCallback, GestureViewerEventType } from './types';
@@ -71,7 +72,10 @@ export function useGestureViewerEvent<T extends GestureViewerEventType>(
   callback?: GestureViewerEventCallback<T>,
 ) {
   const id = typeof idOrEventType === 'string' && callback ? idOrEventType : 'default';
-  const eventType = typeof idOrEventType === 'string' && callback ? (eventTypeOrCallback as T) : (idOrEventType as T);
+  const eventType =
+    typeof idOrEventType === 'string' && callback
+      ? (eventTypeOrCallback as T)
+      : (idOrEventType as T);
   const finalCallback = callback || (eventTypeOrCallback as GestureViewerEventCallback<T>);
 
   useEffect(() => {

package/src/useGestureViewerPaging.ts

@@ -0,0 +1,112 @@
+import { useCallback, useEffect } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+import type {
+  UseGestureViewerPagingArgs,
+  UseGestureViewerPagingResult,
+} from './useGestureViewerPaging.types';
+import { getLoopAdjustedIndex } from './utils';
+
+export function useGestureViewerPaging({
+  autoPlay,
+  autoPlayInterval,
+  currentIndex,
+  dataLength,
+  enableHorizontalSwipe,
+  enableLoop,
+  isRotated,
+  isZoomed,
+  itemSpacing,
+  manager,
+  scrollTo,
+  syncCurrentIndex,
+  width,
+}: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
+  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);
+
+    return () => clearInterval(interval);
+  }, [
+    autoPlay,
+    autoPlayInterval,
+    currentIndex,
+    dataLength,
+    enableLoop,
+    isRotated,
+    isZoomed,
+    manager,
+  ]);
+
+  const onMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!enableHorizontalSwipe) {
+        return;
+      }
+
+      const { contentOffset } = event.nativeEvent;
+      const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
+
+      const isLoopHandled = manager?.handleMomentumScrollEnd(scrollIndex);
+
+      if (isLoopHandled) {
+        return;
+      }
+
+      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(
+        scrollIndex,
+        dataLength,
+        enableLoop,
+      );
+
+      if (needsJump && jumpToIndex !== undefined) {
+        scrollTo(jumpToIndex, false);
+      }
+
+      syncCurrentIndex(realIndex);
+    },
+    [
+      dataLength,
+      enableHorizontalSwipe,
+      enableLoop,
+      itemSpacing,
+      manager,
+      scrollTo,
+      syncCurrentIndex,
+      width,
+    ],
+  );
+
+  const onScrollBeginDrag = useCallback(() => {
+    manager?.handleScrollBeginDrag();
+  }, [manager]);
+
+  return {
+    onMomentumScrollEnd,
+    onScroll: undefined,
+    onScrollBeginDrag,
+    onWebDoubleClick: undefined,
+  };
+}

package/src/useGestureViewerPaging.types.ts

@@ -0,0 +1,34 @@
+import type { ScrollViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type GestureViewerManager from './GestureViewerManager';
+
+export type UseGestureViewerPagingArgs = {
+  adjustedInitialIndex: number;
+  autoPlay: boolean;
+  autoPlayInterval: number;
+  currentIndex: number;
+  dataLength: number;
+  enableDoubleTapZoom: boolean;
+  enableHorizontalSwipe: boolean;
+  enableLoop: boolean;
+  height: number;
+  isRotated: boolean;
+  isZoomed: boolean;
+  itemSpacing: number;
+  manager: GestureViewerManager | null;
+  maxZoomScale: number;
+  scale: SharedValue<number>;
+  scrollTo: (index: number, animated: boolean) => void;
+  syncCurrentIndex: (nextIndex: number) => void;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+  width: number;
+};
+
+export type UseGestureViewerPagingResult = {
+  onMomentumScrollEnd?: ScrollViewProps['onMomentumScrollEnd'];
+  onScroll?: ScrollViewProps['onScroll'];
+  onScrollBeginDrag?: ScrollViewProps['onScrollBeginDrag'];
+  onWebDoubleClick?: (event: any) => void;
+};

package/src/useGestureViewerPaging.web.ts

@@ -0,0 +1,390 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+import type {
+  UseGestureViewerPagingArgs,
+  UseGestureViewerPagingResult,
+} from './useGestureViewerPaging.types';
+import { applyTapZoomAtPoint } from './utils/tapZoom';
+import {
+  getWebAutoPlayTargetPhysicalIndex,
+  getWebScrollPhysicalIndex,
+  resolveWebScrollFinalState,
+} from './utils/webScroll';
+
+type WebScrollActor = 'idle' | 'user' | 'autoplay';
+
+type WebScrollRuntime = {
+  actor: WebScrollActor;
+  isAutoplayPausedByUser: boolean;
+  lastSettledPhysicalIndex: number;
+  latestOffsetX: number;
+  latestRawPhysicalIndex: number;
+  lastProgrammaticScrollVersion: number;
+  settleTimer: ReturnType<typeof setTimeout> | null;
+  resumeAutoplayTimer: ReturnType<typeof setTimeout> | null;
+};
+
+export function useGestureViewerPaging({
+  adjustedInitialIndex,
+  autoPlay,
+  autoPlayInterval,
+  currentIndex,
+  dataLength,
+  enableDoubleTapZoom,
+  enableHorizontalSwipe,
+  enableLoop,
+  height,
+  isRotated,
+  isZoomed,
+  itemSpacing,
+  manager,
+  maxZoomScale,
+  scale,
+  scrollTo,
+  syncCurrentIndex,
+  translateX,
+  translateY,
+  width,
+}: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
+  const webScrollRuntimeRef = useRef<WebScrollRuntime>({
+    actor: 'idle',
+    isAutoplayPausedByUser: false,
+    lastSettledPhysicalIndex: adjustedInitialIndex,
+    latestOffsetX: adjustedInitialIndex * (width + itemSpacing),
+    latestRawPhysicalIndex: adjustedInitialIndex,
+    lastProgrammaticScrollVersion: 0,
+    settleTimer: null,
+    resumeAutoplayTimer: null,
+  });
+
+  const clearWebSettleTimer = useCallback(() => {
+    const runtime = webScrollRuntimeRef.current;
+
+    if (runtime.settleTimer) {
+      clearTimeout(runtime.settleTimer);
+      runtime.settleTimer = null;
+    }
+  }, []);
+
+  const clearWebAutoplayResumeTimer = useCallback(() => {
+    const runtime = webScrollRuntimeRef.current;
+
+    if (runtime.resumeAutoplayTimer) {
+      clearTimeout(runtime.resumeAutoplayTimer);
+      runtime.resumeAutoplayTimer = null;
+    }
+  }, []);
+
+  const scheduleWebAutoplayResume = useCallback(() => {
+    const runtime = webScrollRuntimeRef.current;
+
+    clearWebAutoplayResumeTimer();
+    runtime.resumeAutoplayTimer = setTimeout(() => {
+      runtime.isAutoplayPausedByUser = false;
+      runtime.resumeAutoplayTimer = null;
+    }, 800);
+  }, [clearWebAutoplayResumeTimer]);
+
+  const pauseWebAutoplayWithoutPagingInteraction = useCallback(() => {
+    const runtime = webScrollRuntimeRef.current;
+
+    runtime.isAutoplayPausedByUser = true;
+    runtime.actor = 'idle';
+    clearWebAutoplayResumeTimer();
+  }, [clearWebAutoplayResumeTimer]);
+
+  const beginWebUserInteraction = useCallback(
+    (force = false) => {
+      const runtime = webScrollRuntimeRef.current;
+
+      if (!force && runtime.actor === 'autoplay') {
+        return;
+      }
+
+      runtime.actor = 'user';
+      runtime.isAutoplayPausedByUser = true;
+      clearWebAutoplayResumeTimer();
+    },
+    [clearWebAutoplayResumeTimer],
+  );
+
+  const beginWebAutoplayScroll = useCallback(() => {
+    const runtime = webScrollRuntimeRef.current;
+
+    runtime.actor = 'autoplay';
+    runtime.isAutoplayPausedByUser = false;
+    runtime.lastProgrammaticScrollVersion = manager?.getProgrammaticScrollVersion() ?? 0;
+    clearWebAutoplayResumeTimer();
+  }, [clearWebAutoplayResumeTimer, manager]);
+
+  const syncProgrammaticActorFromManager = useCallback(() => {
+    const runtime = webScrollRuntimeRef.current;
+    const nextVersion = manager?.getProgrammaticScrollVersion() ?? 0;
+
+    if (nextVersion === runtime.lastProgrammaticScrollVersion) {
+      return;
+    }
+
+    runtime.actor = 'autoplay';
+    runtime.isAutoplayPausedByUser = false;
+    runtime.lastProgrammaticScrollVersion = nextVersion;
+    clearWebAutoplayResumeTimer();
+  }, [clearWebAutoplayResumeTimer, manager]);
+
+  const finalizeWebScroll = useCallback(
+    (offsetX: number, source: 'scroll' | 'momentum' = 'scroll') => {
+      if (!enableHorizontalSwipe || dataLength <= 0) {
+        return;
+      }
+
+      const runtime = webScrollRuntimeRef.current;
+      const settledByActor = runtime.actor;
+
+      clearWebSettleTimer();
+      runtime.latestOffsetX = offsetX;
+
+      const settledState = resolveWebScrollFinalState({
+        dataLength,
+        enableLoop,
+        lastSettledPhysicalIndex: runtime.lastSettledPhysicalIndex,
+        offsetX,
+        pageWidth: width + itemSpacing,
+      });
+
+      if (!settledState) {
+        return;
+      }
+
+      const { logicalIndex, rawPhysicalIndex, settledPhysicalIndex } = settledState;
+
+      if (source === 'scroll' && runtime.latestRawPhysicalIndex !== rawPhysicalIndex) {
+        return;
+      }
+
+      if (rawPhysicalIndex !== settledPhysicalIndex) {
+        const crossedLoopBoundary =
+          enableLoop &&
+          dataLength > 1 &&
+          (rawPhysicalIndex === 0 || rawPhysicalIndex === dataLength + 1);
+
+        scrollTo(settledPhysicalIndex, !crossedLoopBoundary);
+      }
+
+      runtime.lastSettledPhysicalIndex = settledPhysicalIndex;
+      runtime.latestOffsetX = settledPhysicalIndex * (width + itemSpacing);
+      runtime.actor = 'idle';
+      manager?.cancelPendingLoopTransition();
+      syncCurrentIndex(logicalIndex);
+
+      if (settledByActor === 'user') {
+        scheduleWebAutoplayResume();
+      }
+    },
+    [
+      clearWebSettleTimer,
+      dataLength,
+      enableHorizontalSwipe,
+      enableLoop,
+      itemSpacing,
+      manager,
+      scheduleWebAutoplayResume,
+      scrollTo,
+      syncCurrentIndex,
+      width,
+    ],
+  );
+
+  const scheduleWebScrollSettle = useCallback(
+    (offsetX: number) => {
+      const runtime = webScrollRuntimeRef.current;
+
+      runtime.latestOffsetX = offsetX;
+      runtime.latestRawPhysicalIndex = getWebScrollPhysicalIndex(offsetX, width + itemSpacing);
+      clearWebSettleTimer();
+      runtime.settleTimer = setTimeout(() => {
+        finalizeWebScroll(runtime.latestOffsetX, 'scroll');
+      }, 180);
+    },
+    [clearWebSettleTimer, finalizeWebScroll, itemSpacing, width],
+  );
+
+  useEffect(() => {
+    const runtime = webScrollRuntimeRef.current;
+
+    runtime.actor = 'idle';
+    runtime.isAutoplayPausedByUser = false;
+    runtime.lastSettledPhysicalIndex = adjustedInitialIndex;
+    runtime.latestOffsetX = adjustedInitialIndex * (width + itemSpacing);
+    runtime.latestRawPhysicalIndex = adjustedInitialIndex;
+    runtime.lastProgrammaticScrollVersion = manager?.getProgrammaticScrollVersion() ?? 0;
+    clearWebSettleTimer();
+    clearWebAutoplayResumeTimer();
+  }, [
+    adjustedInitialIndex,
+    clearWebAutoplayResumeTimer,
+    clearWebSettleTimer,
+    itemSpacing,
+    manager,
+    width,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      clearWebSettleTimer();
+      clearWebAutoplayResumeTimer();
+    };
+  }, [clearWebAutoplayResumeTimer, clearWebSettleTimer]);
+
+  useEffect(() => {
+    if (
+      !autoPlay ||
+      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;
+      }
+
+      const runtime = webScrollRuntimeRef.current;
+
+      if (runtime.actor !== 'idle' || runtime.isAutoplayPausedByUser || runtime.settleTimer) {
+        return;
+      }
+
+      const targetPhysicalIndex = getWebAutoPlayTargetPhysicalIndex({
+        currentIndex,
+        dataLength,
+        enableLoop,
+      });
+
+      if (targetPhysicalIndex === null) {
+        return;
+      }
+
+      beginWebAutoplayScroll();
+      runtime.latestOffsetX = targetPhysicalIndex * (width + itemSpacing);
+      scrollTo(targetPhysicalIndex, true);
+      scheduleWebScrollSettle(runtime.latestOffsetX);
+    }, intervalMs);
+
+    return () => clearInterval(interval);
+  }, [
+    autoPlay,
+    autoPlayInterval,
+    beginWebAutoplayScroll,
+    currentIndex,
+    dataLength,
+    enableLoop,
+    isRotated,
+    isZoomed,
+    itemSpacing,
+    scheduleWebScrollSettle,
+    scrollTo,
+    width,
+  ]);
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!enableHorizontalSwipe) {
+        return;
+      }
+
+      syncProgrammaticActorFromManager();
+      beginWebUserInteraction();
+      scheduleWebScrollSettle(event.nativeEvent.contentOffset.x);
+    },
+    [
+      beginWebUserInteraction,
+      enableHorizontalSwipe,
+      scheduleWebScrollSettle,
+      syncProgrammaticActorFromManager,
+    ],
+  );
+
+  const onMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!enableHorizontalSwipe) {
+        return;
+      }
+
+      finalizeWebScroll(event.nativeEvent.contentOffset.x, 'momentum');
+    },
+    [enableHorizontalSwipe, finalizeWebScroll],
+  );
+
+  const onScrollBeginDrag = useCallback(() => {
+    beginWebUserInteraction(true);
+    clearWebSettleTimer();
+    manager?.handleScrollBeginDrag();
+  }, [beginWebUserInteraction, clearWebSettleTimer, manager]);
+
+  const onWebDoubleClick = useCallback(
+    (event: any) => {
+      if (!enableDoubleTapZoom || event?.nativeEvent?.detail !== 2) {
+        return;
+      }
+
+      pauseWebAutoplayWithoutPagingInteraction();
+      scheduleWebAutoplayResume();
+
+      const nativeEvent = event?.nativeEvent;
+      const eventTarget = event?.currentTarget ?? nativeEvent?.currentTarget ?? nativeEvent?.target;
+      let locationX = nativeEvent?.locationX;
+      let locationY = nativeEvent?.locationY;
+
+      if (
+        (!Number.isFinite(locationX) || !Number.isFinite(locationY)) &&
+        typeof eventTarget?.getBoundingClientRect === 'function' &&
+        Number.isFinite(nativeEvent?.clientX) &&
+        Number.isFinite(nativeEvent?.clientY)
+      ) {
+        const rect = eventTarget.getBoundingClientRect();
+
+        locationX = nativeEvent.clientX - rect.left;
+        locationY = nativeEvent.clientY - rect.top;
+      }
+
+      applyTapZoomAtPoint({
+        x: Number.isFinite(locationX) ? locationX : width / 2,
+        y: Number.isFinite(locationY) ? locationY : height / 2,
+        width,
+        height,
+        maxZoomScale,
+        scale,
+        translateX,
+        translateY,
+      });
+    },
+    [
+      enableDoubleTapZoom,
+      height,
+      maxZoomScale,
+      pauseWebAutoplayWithoutPagingInteraction,
+      scheduleWebAutoplayResume,
+      scale,
+      translateX,
+      translateY,
+      width,
+    ],
+  );
+
+  return {
+    onMomentumScrollEnd,
+    onScroll,
+    onScrollBeginDrag,
+    onWebDoubleClick,
+  };
+}

package/src/useGestureViewerState.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useSyncExternalStore } from 'react';
+
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerState } from './types';
 

package/src/utils/index.ts

@@ -1,13 +1,25 @@
-import { FlatList as RNFlatList, ScrollView as RNScrollView } from 'react-native';
-import { FlatList as GestureFlatList, ScrollView as GestureScrollView } from 'react-native-gesture-handler';
+import {
+  FlatList as RNFlatList,
+  ScrollView as RNScrollView,
+  type PlatformOSType,
+} from 'react-native';
+import {
+  FlatList as GestureFlatList,
+  ScrollView as GestureScrollView,
+} from 'react-native-gesture-handler';
+
 import type { FlatListComponent, ScrollViewComponent } from '../types';
+
 import { FlashList } from './FlashList';
 
-export const isScrollViewLike = (component: React.ComponentType<any>): component is ScrollViewComponent => {
-  return component === RNScrollView || component === GestureScrollView;
-};
+export const isScrollViewLike = (
+  component: React.ComponentType<any>,
+): component is ScrollViewComponent =>
+  component === RNScrollView || component === GestureScrollView;
 
-export const isFlatListLike = (component: React.ComponentType<any>): component is FlatListComponent<any> => {
+export const isFlatListLike = (
+  component: React.ComponentType<any>,
+): component is FlatListComponent<any> => {
   if (component === RNFlatList || component === GestureFlatList || isFlashListLike(component)) {
     return true;
   }
@@ -23,9 +35,29 @@ export const isFlashListLike = (component: React.ComponentType<any>): boolean =>
   return component?.displayName === 'FlashList' || component?.name === 'FlashList';
 };
 
+/**
+ * iOS needs the extra Native gesture wrapper so the dismiss pan can resolve before the scrollable claims touches.
+ * We intentionally skip Android because the same require-to-fail relation regressed horizontal paging there,
+ * and we also avoid wrapping RNGH-provided scrollables to prevent double-applying Gesture.Native() to components that already participate in RNGH.
+ */
+export const shouldUseNativeScrollGesture = (
+  platformOS: PlatformOSType,
+  component: React.ComponentType<any>,
+): boolean => {
+  return platformOS === 'ios' && component !== GestureScrollView && component !== GestureFlatList;
+};
+
 export const createBoundsConstraint =
   ({ width, height }: { width: number; height: number }) =>
-  ({ scale, translateX, translateY }: { translateX: number; translateY: number; scale: number }) => {
+  ({
+    scale,
+    translateX,
+    translateY,
+  }: {
+    translateX: number;
+    translateY: number;
+    scale: number;
+  }) => {
     'worklet';
 
     if (scale <= 1) {
@@ -51,7 +83,7 @@ export const createLoopData = <T>(dataRef: React.RefObject<T[]>, enableLoop: boo
     return data;
   }
 
-  const lastItem = data[data.length - 1];
+  const lastItem = data.at(-1);
   const firstItem = data[0];
 
   if (lastItem === undefined || firstItem === undefined) {
@@ -67,32 +99,32 @@ export const getLoopAdjustedIndex = (
   enableLoop: boolean,
 ): { realIndex: number; needsJump: boolean; jumpToIndex?: number } => {
   if (!enableLoop || originalDataLength <= 1) {
-    return { realIndex: scrollIndex, needsJump: false };
+    return { needsJump: false, realIndex: scrollIndex };
   }
 
   if (scrollIndex === 0) {
     return {
-      realIndex: originalDataLength - 1,
-      needsJump: true,
       jumpToIndex: originalDataLength,
+      needsJump: true,
+      realIndex: originalDataLength - 1,
     };
   } else if (scrollIndex === originalDataLength + 1) {
     return {
-      realIndex: 0,
-      needsJump: true,
       jumpToIndex: 1,
+      needsJump: true,
+      realIndex: 0,
     };
   }
 
-  return { realIndex: scrollIndex - 1, needsJump: false };
+  return { needsJump: false, realIndex: scrollIndex - 1 };
 };
 
 export const createScrollAction = (listRef: any, width: number) => ({
   scrollTo: (index: number, animated: boolean) => {
     if (listRef?.scrollToIndex) {
-      listRef.scrollToIndex({ index, animated });
+      listRef.scrollToIndex({ animated, index });
     } else if (listRef?.scrollTo) {
-      listRef.scrollTo({ x: index * width, animated });
+      listRef.scrollTo({ animated, x: index * width });
     }
   },
 });