react-native-gesture-image-viewer 2.1.3 → 2.2.0

package/src/useGestureViewerPaging.web.ts

@@ -0,0 +1,410 @@
+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,
+  syncPendingIndex,
+  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;
+      }
+
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const runtime = webScrollRuntimeRef.current;
+      const pendingState = resolveWebScrollFinalState({
+        dataLength,
+        enableLoop,
+        lastSettledPhysicalIndex: runtime.lastSettledPhysicalIndex,
+        offsetX,
+        pageWidth: width + itemSpacing,
+      });
+
+      if (pendingState) {
+        syncPendingIndex(pendingState.logicalIndex);
+      }
+
+      syncProgrammaticActorFromManager();
+      beginWebUserInteraction();
+      scheduleWebScrollSettle(offsetX);
+    },
+    [
+      beginWebUserInteraction,
+      dataLength,
+      enableHorizontalSwipe,
+      enableLoop,
+      itemSpacing,
+      scheduleWebScrollSettle,
+      syncPendingIndex,
+      syncProgrammaticActorFromManager,
+      width,
+    ],
+  );
+
+  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/utils/index.ts

@@ -1,4 +1,8 @@
-import { FlatList as RNFlatList, ScrollView as RNScrollView } from 'react-native';
+import {
+  FlatList as RNFlatList,
+  ScrollView as RNScrollView,
+  type PlatformOSType,
+} from 'react-native';
 import {
   FlatList as GestureFlatList,
   ScrollView as GestureScrollView,
@@ -31,6 +35,18 @@ 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 }) =>
   ({

package/src/utils/tapZoom.ts

@@ -0,0 +1,44 @@
+import type { SharedValue } from 'react-native-reanimated';
+import { Easing, withTiming } from 'react-native-reanimated';
+
+export const applyTapZoomAtPoint = ({
+  x,
+  y,
+  width,
+  height,
+  maxZoomScale,
+  scale,
+  translateX,
+  translateY,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  maxZoomScale: number;
+  scale: SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+}) => {
+  'worklet';
+
+  const nextScale = scale.value > 1 ? 1 : maxZoomScale;
+  const timingConfig = {
+    duration: 300,
+    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+  };
+
+  if (nextScale > 1) {
+    const centerX = x - width / 2;
+    const centerY = y - height / 2;
+
+    // NOTE 확대로 밀려난 거리만큼 반대로 이동해서 탭 지점을 제자리에 유지
+    translateX.value = withTiming(-centerX * (nextScale - 1), timingConfig);
+    translateY.value = withTiming(-centerY * (nextScale - 1), timingConfig);
+  } else {
+    translateX.value = withTiming(0, timingConfig);
+    translateY.value = withTiming(0, timingConfig);
+  }
+
+  scale.value = withTiming(nextScale, timingConfig);
+};

package/src/utils/webScroll.ts

@@ -0,0 +1,96 @@
+export const getWebScrollPhysicalIndex = (offsetX: number, pageWidth: number): number => {
+  if (!Number.isFinite(offsetX) || !Number.isFinite(pageWidth) || pageWidth <= 0) {
+    return 0;
+  }
+
+  return Math.max(0, Math.round(offsetX / pageWidth));
+};
+
+export const resolveWebScrollFinalState = ({
+  dataLength,
+  enableLoop,
+  lastSettledPhysicalIndex,
+  offsetX,
+  pageWidth,
+}: {
+  offsetX: number;
+  pageWidth: number;
+  lastSettledPhysicalIndex: number;
+  dataLength: number;
+  enableLoop: boolean;
+}): { logicalIndex: number; rawPhysicalIndex: number; settledPhysicalIndex: number } | null => {
+  if (
+    dataLength <= 0 ||
+    !Number.isFinite(offsetX) ||
+    !Number.isFinite(pageWidth) ||
+    pageWidth <= 0
+  ) {
+    return null;
+  }
+
+  const maxPhysicalIndex = enableLoop && dataLength > 1 ? dataLength + 1 : dataLength - 1;
+  const rawPhysicalIndex = getWebScrollPhysicalIndex(offsetX, pageWidth);
+
+  if (enableLoop && dataLength > 1) {
+    const isWrappingBackward = lastSettledPhysicalIndex === 1 && rawPhysicalIndex >= dataLength;
+    const isWrappingForward = lastSettledPhysicalIndex === dataLength && rawPhysicalIndex <= 1;
+
+    if (isWrappingBackward || rawPhysicalIndex === 0) {
+      return {
+        logicalIndex: dataLength - 1,
+        rawPhysicalIndex,
+        settledPhysicalIndex: dataLength,
+      };
+    }
+
+    if (isWrappingForward || rawPhysicalIndex >= dataLength + 1) {
+      return {
+        logicalIndex: 0,
+        rawPhysicalIndex,
+        settledPhysicalIndex: 1,
+      };
+    }
+  }
+
+  const targetPhysicalIndex = Math.max(0, Math.min(maxPhysicalIndex, rawPhysicalIndex));
+
+  if (enableLoop && dataLength > 1) {
+    return {
+      logicalIndex: targetPhysicalIndex - 1,
+      rawPhysicalIndex,
+      settledPhysicalIndex: targetPhysicalIndex,
+    };
+  }
+
+  return {
+    logicalIndex: targetPhysicalIndex,
+    rawPhysicalIndex,
+    settledPhysicalIndex: targetPhysicalIndex,
+  };
+};
+
+export const getWebAutoPlayTargetPhysicalIndex = ({
+  currentIndex,
+  dataLength,
+  enableLoop,
+}: {
+  currentIndex: number;
+  dataLength: number;
+  enableLoop: boolean;
+}): number | null => {
+  if (dataLength <= 1) {
+    return null;
+  }
+
+  if (enableLoop && currentIndex === dataLength - 1) {
+    return dataLength + 1;
+  }
+
+  const nextIndex = currentIndex + 1;
+
+  if (nextIndex >= dataLength) {
+    return null;
+  }
+
+  return enableLoop ? nextIndex + 1 : nextIndex;
+};