react-native-gesture-image-viewer 2.3.3 → 2.5.0

package/src/useGestureViewerPaging.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 import type {
@@ -8,6 +8,7 @@ import type {
 import { getLoopAdjustedIndex } from './utils';
 
 export function useGestureViewerPaging({
+  adjustedInitialIndex,
   autoPlay,
   autoPlayInterval,
   currentIndex,
@@ -23,6 +24,12 @@ export function useGestureViewerPaging({
   syncPendingIndex,
   width,
 }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
+  const [activeListIndex, setActiveListIndex] = useState(adjustedInitialIndex);
+
+  useEffect(() => {
+    setActiveListIndex(adjustedInitialIndex);
+  }, [adjustedInitialIndex, dataLength]);
+
   useEffect(() => {
     if (
       !autoPlay ||
@@ -69,24 +76,30 @@ export function useGestureViewerPaging({
 
       const { contentOffset } = event.nativeEvent;
       const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
+      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(
+        scrollIndex,
+        dataLength,
+        enableLoop,
+      );
 
       const isLoopHandled = manager?.handleMomentumScrollEnd(scrollIndex);
 
-      if (isLoopHandled) {
+      if (realIndex < 0 || realIndex >= dataLength) {
         return;
       }
 
-      const { realIndex, needsJump, jumpToIndex } = getLoopAdjustedIndex(
-        scrollIndex,
-        dataLength,
-        enableLoop,
-      );
+      if (isLoopHandled) {
+        syncCurrentIndex(realIndex);
+        setActiveListIndex(jumpToIndex ?? scrollIndex);
+        return;
+      }
 
       if (needsJump && jumpToIndex !== undefined) {
         scrollTo(jumpToIndex, false);
       }
 
       syncCurrentIndex(realIndex);
+      setActiveListIndex(jumpToIndex ?? scrollIndex);
     },
     [
       dataLength,
@@ -120,6 +133,7 @@ export function useGestureViewerPaging({
   }, [manager]);
 
   return {
+    activeListIndex,
     onMomentumScrollEnd,
     onScroll,
     onScrollBeginDrag,

package/src/useGestureViewerPaging.types.ts

@@ -8,6 +8,8 @@ export type UseGestureViewerPagingArgs = {
   adjustedInitialIndex: number;
   autoPlay: boolean;
   autoPlayInterval: number;
+  contentHeight: SharedValue<number>;
+  contentWidth: SharedValue<number>;
   currentIndex: number;
   dataLength: number;
   enableDoubleTapZoom: boolean;
@@ -34,6 +36,7 @@ export type WebClickTarget = {
 };
 
 export type UseGestureViewerPagingResult = {
+  activeListIndex: number;
   onMomentumScrollEnd?: ScrollViewProps['onMomentumScrollEnd'];
   onScroll?: ScrollViewProps['onScroll'];
   onScrollBeginDrag?: ScrollViewProps['onScrollBeginDrag'];

package/src/useGestureViewerPaging.web.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, type MouseEvent } from 'react';
+import { useCallback, useEffect, useRef, useState, type MouseEvent } from 'react';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 import type {
@@ -30,6 +30,8 @@ export function useGestureViewerPaging({
   adjustedInitialIndex,
   autoPlay,
   autoPlayInterval,
+  contentHeight,
+  contentWidth,
   currentIndex,
   dataLength,
   enableDoubleTapZoom,
@@ -50,18 +52,26 @@ export function useGestureViewerPaging({
   translateY,
   width,
 }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
+  const [activeListIndex, setActiveListIndex] = useState(adjustedInitialIndex);
+  const pageStride = width + itemSpacing;
   const webSingleTapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const webScrollRuntimeRef = useRef<WebScrollRuntime>({
     actor: 'idle',
     isAutoplayPausedByUser: false,
     lastSettledPhysicalIndex: adjustedInitialIndex,
-    latestOffsetX: adjustedInitialIndex * (width + itemSpacing),
+    latestOffsetX: adjustedInitialIndex * pageStride,
     latestRawPhysicalIndex: adjustedInitialIndex,
     lastProgrammaticScrollVersion: 0,
     settleTimer: null,
     resumeAutoplayTimer: null,
   });
+  const previousPagingLayoutRef = useRef<{
+    adjustedInitialIndex: number;
+    dataLength: number;
+    manager: typeof manager;
+    pageStride: number;
+  } | null>(null);
 
   const clearWebSingleTapTimer = useCallback(() => {
     if (webSingleTapTimerRef.current) {
@@ -187,6 +197,7 @@ export function useGestureViewerPaging({
       runtime.latestOffsetX = settledPhysicalIndex * (width + itemSpacing);
       runtime.actor = 'idle';
       manager?.cancelPendingLoopTransition();
+      setActiveListIndex(settledPhysicalIndex);
       syncCurrentIndex(logicalIndex);
 
       if (settledByActor === 'user') {
@@ -223,12 +234,35 @@ export function useGestureViewerPaging({
 
   useEffect(() => {
     const runtime = webScrollRuntimeRef.current;
+    const previousLayout = previousPagingLayoutRef.current;
+    const shouldResetToInitialIndex =
+      previousLayout === null ||
+      previousLayout.adjustedInitialIndex !== adjustedInitialIndex ||
+      previousLayout.dataLength !== dataLength ||
+      previousLayout.manager !== manager;
+    const didPageStrideChange = previousLayout !== null && previousLayout.pageStride !== pageStride;
+
+    previousPagingLayoutRef.current = {
+      adjustedInitialIndex,
+      dataLength,
+      manager,
+      pageStride,
+    };
+
+    if (!shouldResetToInitialIndex && !didPageStrideChange) {
+      return;
+    }
 
     runtime.actor = 'idle';
     runtime.isAutoplayPausedByUser = false;
-    runtime.lastSettledPhysicalIndex = adjustedInitialIndex;
-    runtime.latestOffsetX = adjustedInitialIndex * (width + itemSpacing);
-    runtime.latestRawPhysicalIndex = adjustedInitialIndex;
+
+    if (shouldResetToInitialIndex) {
+      runtime.lastSettledPhysicalIndex = adjustedInitialIndex;
+      setActiveListIndex(adjustedInitialIndex);
+    }
+
+    runtime.latestOffsetX = runtime.lastSettledPhysicalIndex * pageStride;
+    runtime.latestRawPhysicalIndex = runtime.lastSettledPhysicalIndex;
     runtime.lastProgrammaticScrollVersion = manager?.getProgrammaticScrollVersion() ?? 0;
     clearWebSettleTimer();
     clearWebAutoplayResumeTimer();
@@ -236,9 +270,9 @@ export function useGestureViewerPaging({
     adjustedInitialIndex,
     clearWebAutoplayResumeTimer,
     clearWebSettleTimer,
-    itemSpacing,
+    dataLength,
     manager,
-    width,
+    pageStride,
   ]);
 
   useEffect(() => {
@@ -387,6 +421,8 @@ export function useGestureViewerPaging({
         scheduleWebAutoplayResume();
 
         applyTapZoomAtPoint({
+          contentHeight: contentHeight.get(),
+          contentWidth: contentWidth.get(),
           x: resolvedX,
           y: resolvedY,
           width,
@@ -412,6 +448,8 @@ export function useGestureViewerPaging({
     },
     [
       clearWebSingleTapTimer,
+      contentHeight,
+      contentWidth,
       enableDoubleTapZoom,
       height,
       maxZoomScale,
@@ -426,6 +464,7 @@ export function useGestureViewerPaging({
   );
 
   return {
+    activeListIndex,
     onMomentumScrollEnd,
     onScroll,
     onScrollBeginDrag,

package/src/utils/index.ts

@@ -47,39 +47,92 @@ export const shouldUseNativeScrollGesture = (
   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;
-  }) => {
-    'worklet';
-
-    if (scale <= 1) {
-      return {
-        translateX,
-        translateY,
-      };
-    }
+export const clampIndex = (index: number | undefined, dataLength: number): number => {
+  if (dataLength <= 0) {
+    return 0;
+  }
+
+  const candidateIndex = index ?? 0;
+
+  if (!Number.isFinite(candidateIndex)) {
+    return 0;
+  }
+
+  return Math.min(Math.max(Math.trunc(candidateIndex), 0), dataLength - 1);
+};
+
+export const resolveGeometrySyncTranslationMode = (
+  previousIndex: number | null,
+  nextIndex: number,
+  scale: number,
+): 'constrain' | 'none' | 'reset' => {
+  if (previousIndex !== null && previousIndex !== nextIndex) {
+    return 'reset';
+  }
+
+  return scale > 1 ? 'constrain' : 'none';
+};
+
+const isValidDimension = (value: number): boolean => {
+  'worklet';
+
+  return Number.isFinite(value) && value > 0;
+};
 
-    const maxTranslateX = (width * scale - width) / 2;
-    const maxTranslateY = (height * scale - height) / 2;
+const clampTranslation = (value: number, max: number): number => {
+  'worklet';
 
+  if (max <= 0) {
+    return 0;
+  }
+
+  const clamped = Math.max(-max, Math.min(max, value));
+
+  return clamped === 0 ? 0 : clamped;
+};
+
+export const clampTranslationToBounds = ({
+  width,
+  height,
+  contentWidth,
+  contentHeight,
+  scale,
+  translateX,
+  translateY,
+}: {
+  width: number;
+  height: number;
+  contentWidth?: number;
+  contentHeight?: number;
+  translateX: number;
+  translateY: number;
+  scale: number;
+}) => {
+  'worklet';
+
+  if (scale <= 1) {
     return {
-      translateX: Math.max(-maxTranslateX, Math.min(maxTranslateX, translateX)),
-      translateY: Math.max(-maxTranslateY, Math.min(maxTranslateY, translateY)),
+      translateX,
+      translateY,
     };
-  };
+  }
 
-export const createLoopData = <T>(dataRef: React.RefObject<T[]>, enableLoop: boolean): T[] => {
-  const data = dataRef.current;
+  const baseContentWidth =
+    contentWidth !== undefined && isValidDimension(contentWidth) ? contentWidth : width;
+  const baseContentHeight =
+    contentHeight !== undefined && isValidDimension(contentHeight) ? contentHeight : height;
 
-  if (!enableLoop || !data?.length || data.length <= 1) {
+  const maxTranslateX = Math.max(0, (baseContentWidth * scale - width) / 2);
+  const maxTranslateY = Math.max(0, (baseContentHeight * scale - height) / 2);
+
+  return {
+    translateX: clampTranslation(translateX, maxTranslateX),
+    translateY: clampTranslation(translateY, maxTranslateY),
+  };
+};
+
+export const createLoopData = <T>(data: T[], enableLoop: boolean): T[] => {
+  if (!enableLoop || data.length <= 1) {
     return data;
   }
 
@@ -93,6 +146,12 @@ export const createLoopData = <T>(dataRef: React.RefObject<T[]>, enableLoop: boo
   return [lastItem, ...data, firstItem];
 };
 
+export const getLoopPhysicalIndex = (
+  logicalIndex: number,
+  dataLength: number,
+  enableLoop: boolean,
+): number => (enableLoop && dataLength > 1 ? logicalIndex + 1 : logicalIndex);
+
 export const getLoopAdjustedIndex = (
   scrollIndex: number,
   originalDataLength: number,

package/src/utils/tapZoom.ts

@@ -1,11 +1,62 @@
 import type { SharedValue } from 'react-native-reanimated';
 import { Easing, withTiming } from 'react-native-reanimated';
 
+import { clampTranslationToBounds } from '.';
+
+export const getTapZoomTarget = ({
+  x,
+  y,
+  width,
+  height,
+  contentWidth,
+  contentHeight,
+  maxZoomScale,
+  scale,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  contentWidth?: number;
+  contentHeight?: number;
+  maxZoomScale: number;
+  scale: number;
+}) => {
+  'worklet';
+
+  const nextScale = scale > 1 ? 1 : maxZoomScale;
+
+  if (nextScale <= 1) {
+    return {
+      scale: nextScale,
+      translateX: 0,
+      translateY: 0,
+    };
+  }
+
+  const centerX = x - width / 2;
+  const centerY = y - height / 2;
+  return {
+    scale: nextScale,
+    ...clampTranslationToBounds({
+      contentHeight,
+      contentWidth,
+      height,
+      scale: nextScale,
+      translateX: -centerX * (nextScale - 1),
+      translateY: -centerY * (nextScale - 1),
+      width,
+    }),
+  };
+};
+
 export const applyTapZoomAtPoint = ({
   x,
   y,
   width,
   height,
+  contentWidth,
+  contentHeight,
   maxZoomScale,
   scale,
   translateX,
@@ -15,6 +66,8 @@ export const applyTapZoomAtPoint = ({
   y: number;
   width: number;
   height: number;
+  contentWidth?: number;
+  contentHeight?: number;
   maxZoomScale: number;
   scale: SharedValue<number>;
   translateX: SharedValue<number>;
@@ -22,23 +75,23 @@ export const applyTapZoomAtPoint = ({
 }) => {
   'worklet';
 
-  const nextScale = scale.get() > 1 ? 1 : maxZoomScale;
+  const target = getTapZoomTarget({
+    contentHeight,
+    contentWidth,
+    height,
+    maxZoomScale,
+    scale: scale.get(),
+    width,
+    x,
+    y,
+  });
   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.set(withTiming(-centerX * (nextScale - 1), timingConfig));
-    translateY.set(withTiming(-centerY * (nextScale - 1), timingConfig));
-  } else {
-    translateX.set(withTiming(0, timingConfig));
-    translateY.set(withTiming(0, timingConfig));
-  }
+  translateX.set(withTiming(target.translateX, timingConfig));
+  translateY.set(withTiming(target.translateY, timingConfig));
 
-  scale.set(withTiming(nextScale, timingConfig));
+  scale.set(withTiming(target.scale, timingConfig));
 };