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

package/src/useGestureViewer.ts

@@ -1,11 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  InteractionManager,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  useWindowDimensions,
-} from 'react-native';
-import { Gesture } from 'react-native-gesture-handler';
+import { InteractionManager, Platform, useWindowDimensions } from 'react-native';
+import { Gesture, type GestureType } from 'react-native-gesture-handler';
 import {
   Easing,
   interpolate,
@@ -16,10 +11,13 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
+
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerProps, TriggerRect } from './types';
-import { createBoundsConstraint, createScrollAction, getLoopAdjustedIndex } from './utils';
+import { useGestureViewerPaging } from './useGestureViewerPaging';
+import { createBoundsConstraint, createScrollAction } from './utils';
+import { applyTapZoomAtPoint } from './utils/tapZoom';
 
 type UseGestureViewerProps<ItemT, LC> = Omit<
   GestureViewerProps<ItemT, LC>,
@@ -56,6 +54,8 @@ export const useGestureViewer = <ItemT, LC>({
   const width = customWidth || screenWidth;
   const height = customHeight || screenHeight;
 
+  const dismissGestureRef = useRef<GestureType>(undefined);
+
   const [isZoomed, setIsZoomed] = useState(false);
   const [isRotated, setIsRotated] = useState(false);
   const [isPinching, setIsPinching] = useState(false);
@@ -90,20 +90,21 @@ export const useGestureViewer = <ItemT, LC>({
   const animationConfig = useMemo(
     () => ({
       duration: triggerAnimation?.duration ?? 300,
-      easing: triggerAnimation?.easing ?? Easing.bezier(0.25, 0.1, 0.25, 1.0),
+      easing: triggerAnimation?.easing ?? Easing.bezier(0.25, 0.1, 0.25, 1),
       reduceMotion: triggerAnimation?.reduceMotion,
     }),
     [triggerAnimation?.duration, triggerAnimation?.easing, triggerAnimation?.reduceMotion],
   );
 
-  const dismissOptions = useMemo(() => {
-    return {
+  const dismissOptions = useMemo(
+    () => ({
       enabled: dismiss?.enabled ?? true,
-      threshold: dismiss?.threshold ?? 80,
-      resistance: dismiss?.resistance ?? 2,
       fadeBackdrop: dismiss?.fadeBackdrop ?? true,
-    };
-  }, [dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop]);
+      resistance: dismiss?.resistance ?? 2,
+      threshold: dismiss?.threshold ?? 80,
+    }),
+    [dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop],
+  );
 
   const adjustedInitialIndex = useMemo(() => {
     if (enableLoop && dataLength > 1) {
@@ -113,7 +114,10 @@ export const useGestureViewer = <ItemT, LC>({
     return initialIndex;
   }, [enableLoop, dataLength, initialIndex]);
 
-  const constrainTranslation = useMemo(() => createBoundsConstraint({ width, height }), [width, height]);
+  const constrainTranslation = useMemo(
+    () => createBoundsConstraint({ height, width }),
+    [width, height],
+  );
 
   const scrollTo = useCallback(
     (index: number, animated: boolean) => {
@@ -124,6 +128,35 @@ export const useGestureViewer = <ItemT, LC>({
     [width, itemSpacing],
   );
 
+  const resetTransformState = useCallback(() => {
+    translateX.value = withTiming(0);
+    translateY.value = withTiming(0);
+    initialTranslateX.value = withTiming(0);
+    initialTranslateY.value = withTiming(0);
+    startScale.value = withTiming(1);
+    scale.value = withTiming(1);
+    rotation.value = 0;
+  }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
+
+  const syncCurrentIndex = useCallback(
+    (nextIndex: number) => {
+      if (!manager || nextIndex < 0 || nextIndex >= dataLength) {
+        return;
+      }
+
+      const managerCurrentIndex = manager.getState().currentIndex;
+
+      if (nextIndex === managerCurrentIndex) {
+        return;
+      }
+
+      manager.setCurrentIndex(nextIndex);
+      manager.notifyStateChange();
+      resetTransformState();
+    },
+    [dataLength, manager, resetTransformState],
+  );
+
   const emitZoomChange = useCallback(
     (currentScale: number, prevScale: number | null) => {
       if (manager) {
@@ -193,6 +226,7 @@ export const useGestureViewer = <ItemT, LC>({
     manager.setWidth(width + itemSpacing);
     manager.setHeight(height);
     manager.setZoomSharedValues(scale, translateX, translateY, maxZoomScale);
+    manager.setResetTransformCallback(resetTransformState);
     manager.setRotation(rotation);
     manager.setEnableLoop(enableLoop);
     manager.notifyStateChange();
@@ -207,6 +241,7 @@ export const useGestureViewer = <ItemT, LC>({
     enableLoop,
     scale,
     height,
+    resetTransformState,
     translateX,
     translateY,
     rotation,
@@ -239,36 +274,16 @@ export const useGestureViewer = <ItemT, LC>({
     return () => {
       runAfterInteractions?.cancel();
     };
-  }, [adjustedInitialIndex, translateY, backdropOpacity, translateX, scale, startScale, rotation, scrollTo]);
-
-  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, manager, dataLength, currentIndex, enableLoop, isZoomed, isRotated]);
+  }, [
+    adjustedInitialIndex,
+    translateY,
+    backdropOpacity,
+    translateX,
+    scale,
+    startScale,
+    rotation,
+    scrollTo,
+  ]);
 
   useEffect(() => {
     onAnimationCompleteRef.current = triggerAnimation?.onAnimationComplete;
@@ -320,7 +335,7 @@ export const useGestureViewer = <ItemT, LC>({
 
     if (node && typeof node.measure === 'function') {
       node.measure((_x, _y, width, height, pageX, pageY) => {
-        triggerRectRef.current = { x: pageX, y: pageY, width, height };
+        triggerRectRef.current = { height, width, x: pageX, y: pageY };
         triggerOpacity.value = 0;
         setShouldStartTriggerAnimation(true);
         registry.clearTriggerNode(id);
@@ -338,7 +353,10 @@ export const useGestureViewer = <ItemT, LC>({
     if (triggerRectRef.current) {
       const endX = triggerRectRef.current.x + triggerRectRef.current.width / 2 - width / 2;
       const endY = triggerRectRef.current.y + triggerRectRef.current.height / 2 - height / 2;
-      const endScale = Math.min(triggerRectRef.current.width / width, triggerRectRef.current.height / height);
+      const endScale = Math.min(
+        triggerRectRef.current.width / width,
+        triggerRectRef.current.height / height,
+      );
 
       triggerScale.value = withTiming(endScale, animationConfig);
       triggerTranslateX.value = withTiming(endX, animationConfig);
@@ -366,62 +384,6 @@ export const useGestureViewer = <ItemT, LC>({
     triggerOpacity,
   ]);
 
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableHorizontalSwipe) {
-        return;
-      }
-
-      const contentOffset = event.nativeEvent.contentOffset;
-      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);
-      }
-
-      const currentIndex = manager?.getState()?.currentIndex;
-
-      if (realIndex !== currentIndex && realIndex >= 0 && realIndex < dataLength) {
-        if (manager) {
-          manager.setCurrentIndex(realIndex);
-          manager.notifyStateChange();
-        }
-
-        translateX.value = withTiming(0);
-        translateY.value = withTiming(0);
-        initialTranslateX.value = withTiming(0);
-        initialTranslateY.value = withTiming(0);
-        startScale.value = withTiming(1);
-        scale.value = withTiming(1);
-        rotation.value = 0;
-      }
-    },
-    [
-      scrollTo,
-      manager,
-      dataLength,
-      width,
-      itemSpacing,
-      enableHorizontalSwipe,
-      enableLoop,
-      translateX,
-      translateY,
-      scale,
-      initialTranslateX,
-      initialTranslateY,
-      startScale,
-      rotation,
-    ],
-  );
-
   const dismissGesture = useMemo(() => {
     const canDismiss = !isZoomed && dismissOptions.enabled;
 
@@ -431,6 +393,7 @@ export const useGestureViewer = <ItemT, LC>({
       .activeCursor('grabbing')
       .activeOffsetY([-10, 10])
       .failOffsetX([-10, 10])
+      .withRef(dismissGestureRef)
       .enabled(canDismiss)
       .onUpdate((event) => {
         translateY.value = event.translationY / dismissOptions.resistance;
@@ -442,221 +405,210 @@ export const useGestureViewer = <ItemT, LC>({
         }
 
         translateY.value = withSpring(0, {
-          stiffness: 600,
           damping: 50,
+          energyThreshold: 6e-9,
           mass: 4,
           overshootClamping: false,
-          energyThreshold: 6e-9,
+          stiffness: 600,
         });
       });
   }, [translateY, dismissOptions, handleDismiss, isZoomed]);
 
-  const zoomPinchGesture = useMemo(() => {
-    return Gesture.Pinch()
-      .enabled(enablePinchZoom)
-      .onTouchesDown((event) => {
-        if (event.numberOfTouches === 2) {
-          scheduleOnRN(setIsPinching, true);
-        }
-      })
-      .onBegin((event) => {
-        startScale.value = scale.value;
-        initialTranslateX.value = translateX.value;
-        initialTranslateY.value = translateY.value;
-        lastFocalX.value = event.focalX;
-        lastFocalY.value = event.focalY;
-      })
-      .onUpdate((event) => {
-        const newScale = startScale.value * event.scale;
-
-        scale.value = newScale;
-
-        if (newScale <= 1) {
-          translateX.value = withTiming(0);
-          translateY.value = withTiming(0);
-          return;
-        }
-
-        const focalDeltaX = Math.abs(event.focalX - lastFocalX.value);
-        const focalDeltaY = Math.abs(event.focalY - lastFocalY.value);
-        const threshold = 50;
-
-        if (focalDeltaX < threshold && focalDeltaY < threshold) {
+  const zoomPinchGesture = useMemo(
+    () =>
+      Gesture.Pinch()
+        .enabled(enablePinchZoom)
+        .onTouchesDown((event) => {
+          if (event.numberOfTouches === 2) {
+            scheduleOnRN(setIsPinching, true);
+          }
+        })
+        .onBegin((event) => {
+          startScale.value = scale.value;
+          initialTranslateX.value = translateX.value;
+          initialTranslateY.value = translateY.value;
           lastFocalX.value = event.focalX;
           lastFocalY.value = event.focalY;
-        }
-
-        const deltaScale = newScale - startScale.value;
-        const centerX = lastFocalX.value - width / 2;
-        const centerY = lastFocalY.value - height / 2;
-
-        // NOTE 새로운 이동값 = 기존 이동값 - (중심점 거리 × 스케일 변화량) / 원래 스케일 (중심점이 화면 중심에서 멀수록, 확대 배율이 클수록 더 많이 이동)
-        const newTranslateX = initialTranslateX.value - (centerX * deltaScale) / startScale.value;
-        const newTranslateY = initialTranslateY.value - (centerY * deltaScale) / startScale.value;
+        })
+        .onUpdate((event) => {
+          const newScale = startScale.value * event.scale;
+
+          scale.value = newScale;
+
+          if (newScale <= 1) {
+            translateX.value = withTiming(0);
+            translateY.value = withTiming(0);
+            return;
+          }
+
+          const focalDeltaX = Math.abs(event.focalX - lastFocalX.value);
+          const focalDeltaY = Math.abs(event.focalY - lastFocalY.value);
+          const threshold = 50;
+
+          if (focalDeltaX < threshold && focalDeltaY < threshold) {
+            lastFocalX.value = event.focalX;
+            lastFocalY.value = event.focalY;
+          }
+
+          const deltaScale = newScale - startScale.value;
+          const centerX = lastFocalX.value - width / 2;
+          const centerY = lastFocalY.value - height / 2;
+
+          // NOTE 새로운 이동값 = 기존 이동값 - (중심점 거리 × 스케일 변화량) / 원래 스케일 (중심점이 화면 중심에서 멀수록, 확대 배율이 클수록 더 많이 이동)
+          const newTranslateX = initialTranslateX.value - (centerX * deltaScale) / startScale.value;
+          const newTranslateY = initialTranslateY.value - (centerY * deltaScale) / startScale.value;
+
+          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+            constrainTranslation({
+              scale: newScale,
+              translateX: newTranslateX,
+              translateY: newTranslateY,
+            });
 
-        const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-          translateX: newTranslateX,
-          translateY: newTranslateY,
-          scale: newScale,
-        });
-
-        translateX.value = constrainedTranslateX;
-        translateY.value = constrainedTranslateY;
-      })
-      .onEnd(() => {
-        if (scale.value > maxZoomScale) {
-          scale.value = withTiming(maxZoomScale, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-
-          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-            translateX: translateX.value,
-            translateY: translateY.value,
-            scale: maxZoomScale,
-          });
+          translateX.value = constrainedTranslateX;
+          translateY.value = constrainedTranslateY;
+        })
+        .onEnd(() => {
+          if (scale.value > maxZoomScale) {
+            scale.value = withTiming(maxZoomScale, {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+
+            const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+              constrainTranslation({
+                scale: maxZoomScale,
+                translateX: translateX.value,
+                translateY: translateY.value,
+              });
+
+            translateX.value = withTiming(constrainedTranslateX);
+            translateY.value = withTiming(constrainedTranslateY);
+
+            return;
+          }
+
+          if (scale.value < 1) {
+            scale.value = withTiming(1, {
+              duration: 300,
+              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+            });
+            translateX.value = withTiming(0);
+            translateY.value = withTiming(0);
+            initialTranslateX.value = withTiming(0);
+            initialTranslateY.value = withTiming(0);
+            return;
+          }
+
+          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+            constrainTranslation({
+              scale: scale.value,
+              translateX: translateX.value,
+              translateY: translateY.value,
+            });
 
           translateX.value = withTiming(constrainedTranslateX);
           translateY.value = withTiming(constrainedTranslateY);
+        })
+        .onTouchesUp(() => {
+          scheduleOnRN(setIsPinching, false);
+        })
+        .onFinalize(() => {
+          scheduleOnRN(setIsPinching, false);
+        }),
+    [
+      scale,
+      enablePinchZoom,
+      maxZoomScale,
+      translateX,
+      translateY,
+      startScale,
+      initialTranslateX,
+      initialTranslateY,
+      width,
+      height,
+      constrainTranslation,
+      lastFocalX,
+      lastFocalY,
+    ],
+  );
 
-          return;
-        }
-
-        if (scale.value < 1) {
-          scale.value = withTiming(1, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-          translateX.value = withTiming(0);
-          translateY.value = withTiming(0);
-          initialTranslateX.value = withTiming(0);
-          initialTranslateY.value = withTiming(0);
-          return;
-        }
-
-        const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-          translateX: translateX.value,
-          translateY: translateY.value,
-          scale: scale.value,
-        });
-
-        translateX.value = withTiming(constrainedTranslateX);
-        translateY.value = withTiming(constrainedTranslateY);
-      })
-      .onTouchesUp(() => {
-        scheduleOnRN(setIsPinching, false);
-      })
-      .onFinalize(() => {
-        scheduleOnRN(setIsPinching, false);
-      });
-  }, [
-    scale,
-    enablePinchZoom,
-    maxZoomScale,
-    translateX,
-    translateY,
-    startScale,
-    initialTranslateX,
-    initialTranslateY,
-    width,
-    height,
-    constrainTranslation,
-    lastFocalX,
-    lastFocalY,
-  ]);
+  const zoomPanGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(enablePanWhenZoomed && isZoomed)
+        .activeCursor('grabbing')
+        .averageTouches(true)
+        .onBegin(() => {
+          initialTranslateX.value = translateX.value;
+          initialTranslateY.value = translateY.value;
+        })
+        .onUpdate((event) => {
+          if (scale.value > 1) {
+            const newTranslateX = initialTranslateX.value + event.translationX;
+            const newTranslateY = initialTranslateY.value + event.translationY;
+
+            const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
+              constrainTranslation({
+                scale: scale.value,
+                translateX: newTranslateX,
+                translateY: newTranslateY,
+              });
+
+            translateX.value = constrainedTranslateX;
+            translateY.value = constrainedTranslateY;
+          }
+        }),
+    [
+      translateX,
+      translateY,
+      enablePanWhenZoomed,
+      isZoomed,
+      scale,
+      initialTranslateX,
+      initialTranslateY,
+      constrainTranslation,
+    ],
+  );
 
-  const zoomPanGesture = useMemo(() => {
-    return Gesture.Pan()
-      .enabled(enablePanWhenZoomed && isZoomed)
-      .activeCursor('grabbing')
-      .averageTouches(true)
-      .onBegin(() => {
-        initialTranslateX.value = translateX.value;
-        initialTranslateY.value = translateY.value;
-      })
-      .onUpdate((event) => {
-        if (scale.value > 1) {
-          const newTranslateX = initialTranslateX.value + event.translationX;
-          const newTranslateY = initialTranslateY.value + event.translationY;
-
-          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
-            translateX: newTranslateX,
-            translateY: newTranslateY,
-            scale: scale.value,
+  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],
+  );
 
-          translateX.value = constrainedTranslateX;
-          translateY.value = constrainedTranslateY;
-        }
-      });
-  }, [
-    translateX,
-    translateY,
-    enablePanWhenZoomed,
-    isZoomed,
-    scale,
-    initialTranslateX,
-    initialTranslateY,
-    constrainTranslation,
-  ]);
-
-  const doubleTapGesture = useMemo(() => {
-    return Gesture.Tap()
-      .enabled(enableDoubleTapZoom)
-      .numberOfTaps(2)
-      .onEnd((event) => {
-        const nextScale = scale.value > 1 ? 1 : maxZoomScale;
-
-        if (nextScale > 1) {
-          const centerX = event.x - width / 2;
-          const centerY = event.y - height / 2;
-
-          // NOTE 확대로 밀려난 거리만큼 반대로 이동해서 탭 지점을 제자리에 유지
-          translateX.value = withTiming(-centerX * (nextScale - 1), {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-          translateY.value = withTiming(-centerY * (nextScale - 1), {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-        } else {
-          translateX.value = withTiming(0, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-          translateY.value = withTiming(0, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-          });
-        }
+  const zoomGesture = useMemo(
+    () => Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, doubleTapGesture)),
+    [zoomPinchGesture, zoomPanGesture, doubleTapGesture],
+  );
 
-        scale.value = withTiming(nextScale, {
-          duration: 300,
-          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
-        });
-      });
-  }, [scale, enableDoubleTapZoom, maxZoomScale, translateX, translateY, width, height]);
-
-  const zoomGesture = useMemo(() => {
-    return Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, doubleTapGesture));
-  }, [zoomPinchGesture, zoomPanGesture, doubleTapGesture]);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: triggerOpacity.value,
-      transform: [
-        { translateX: triggerTranslateX.value },
-        { translateY: triggerTranslateY.value },
-        { scale: triggerScale.value },
-
-        { translateY: translateY.value },
-        { translateX: translateX.value },
-        { scale: scale.value },
-        { rotate: `${rotation.value}deg` },
-      ],
-    };
-  });
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: triggerOpacity.value,
+    transform: [
+      { translateX: triggerTranslateX.value },
+      { translateY: triggerTranslateY.value },
+      { scale: triggerScale.value },
+
+      { translateY: translateY.value },
+      { translateX: translateX.value },
+      { scale: scale.value },
+      { rotate: `${rotation.value}deg` },
+    ],
+  }));
 
   const backdropStyle = useAnimatedStyle(() => {
     const baseOpacity = triggerOpacity.value;
@@ -670,24 +622,51 @@ export const useGestureViewer = <ItemT, LC>({
     return { opacity: baseOpacity * dismissOpacity };
   }, [dismissOptions.fadeBackdrop]);
 
-  const onScrollBeginDrag = useCallback(() => {
-    manager?.handleScrollBeginDrag();
-  }, [manager]);
+  const nativeScrollGesture = useMemo(() => {
+    return Gesture.Native().requireExternalGestureToFail(dismissGestureRef);
+  }, []);
+
+  const { onMomentumScrollEnd, onScroll, onScrollBeginDrag, onWebDoubleClick } =
+    useGestureViewerPaging({
+      adjustedInitialIndex,
+      autoPlay,
+      autoPlayInterval,
+      currentIndex,
+      dataLength,
+      enableDoubleTapZoom,
+      enableHorizontalSwipe,
+      enableLoop,
+      height,
+      isRotated,
+      isZoomed,
+      itemSpacing,
+      manager,
+      maxZoomScale,
+      scale,
+      scrollTo,
+      syncCurrentIndex,
+      translateX,
+      translateY,
+      width,
+    });
 
   return {
+    animatedStyle,
+    backdropStyle,
     dataLength,
-    listRef,
-    isZoomed,
-    isRotated,
-    isPinching,
     dismissGesture,
-    zoomGesture,
+    handleDismiss,
+    isPinching,
+    isRotated,
 
+    isZoomed,
+    listRef,
+    nativeScrollGesture,
+    onWebDoubleClick,
     onMomentumScrollEnd,
-    onScrollBeginDrag,
-    handleDismiss,
+    onScroll,
 
-    animatedStyle,
-    backdropStyle,
+    onScrollBeginDrag,
+    zoomGesture,
   };
 };