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

package/lib/typescript/src/useGestureViewerPaging.types.d.ts

@@ -0,0 +1,33 @@
+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;
+    syncPendingIndex: (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;
+};
+//# sourceMappingURL=useGestureViewerPaging.types.d.ts.map

package/lib/typescript/src/useGestureViewerPaging.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGestureViewerPaging.types.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerPaging.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAK,oBAAoB,MAAM,wBAAwB,CAAC;AAE/D,MAAM,MAAM,0BAA0B,GAAG;IACvC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,mBAAmB,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC7D,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,iBAAiB,CAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACzC,CAAC"}

package/lib/typescript/src/useGestureViewerPaging.web.d.ts

@@ -0,0 +1,3 @@
+import type { UseGestureViewerPagingArgs, UseGestureViewerPagingResult } from './useGestureViewerPaging.types';
+export declare 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;
+//# sourceMappingURL=useGestureViewerPaging.web.d.ts.map

package/lib/typescript/src/useGestureViewerPaging.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGestureViewerPaging.web.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerPaging.web.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,0BAA0B,EAC1B,4BAA4B,EAC7B,MAAM,gCAAgC,CAAC;AAqBxC,wBAAgB,sBAAsB,CAAC,EACrC,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,qBAAqB,EACrB,UAAU,EACV,MAAM,EACN,SAAS,EACT,QAAQ,EACR,WAAW,EACX,OAAO,EACP,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,KAAK,GACN,EAAE,0BAA0B,GAAG,4BAA4B,CAwW3D"}

package/lib/typescript/src/utils/index.d.ts

@@ -1,7 +1,14 @@
+import { type PlatformOSType } from 'react-native';
 import type { FlatListComponent, ScrollViewComponent } from '../types';
 export declare const isScrollViewLike: (component: React.ComponentType<any>) => component is ScrollViewComponent;
 export declare const isFlatListLike: (component: React.ComponentType<any>) => component is FlatListComponent<any>;
 export declare const isFlashListLike: (component: React.ComponentType<any>) => boolean;
+/**
+ * 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 declare const shouldUseNativeScrollGesture: (platformOS: PlatformOSType, component: React.ComponentType<any>) => boolean;
 export declare const createBoundsConstraint: ({ width, height }: {
     width: number;
     height: number;

package/lib/typescript/src/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIvE,eAAO,MAAM,gBAAgB,GAC3B,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAClC,SAAS,IAAI,mBAC+C,CAAC;AAEhE,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAClC,SAAS,IAAI,iBAAiB,CAAC,GAAG,CAMpC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAAG,OAMrE,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAChC,mBAAmB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,MACpD,oCAIE;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;;;CAiBA,CAAC;AAEJ,eAAO,MAAM,cAAc,GAAI,CAAC,EAAE,SAAS,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,OAAO,KAAG,CAAC,EAevF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,aAAa,MAAM,EACnB,oBAAoB,MAAM,EAC1B,YAAY,OAAO,KAClB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAoB/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,GAAG,EAAE,OAAO,MAAM;sBAC1C,MAAM,YAAY,OAAO;CAO3C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAMtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIvE,eAAO,MAAM,gBAAgB,GAC3B,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAClC,SAAS,IAAI,mBAC+C,CAAC;AAEhE,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAClC,SAAS,IAAI,iBAAiB,CAAC,GAAG,CAMpC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAAG,OAMrE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,GACvC,YAAY,cAAc,EAC1B,WAAW,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,KAClC,OAEF,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAChC,mBAAmB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,MACpD,oCAIE;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;;;CAiBA,CAAC;AAEJ,eAAO,MAAM,cAAc,GAAI,CAAC,EAAE,SAAS,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,OAAO,KAAG,CAAC,EAevF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,aAAa,MAAM,EACnB,oBAAoB,MAAM,EAC1B,YAAY,OAAO,KAClB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAoB/D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,SAAS,GAAG,EAAE,OAAO,MAAM;sBAC1C,MAAM,YAAY,OAAO;CAO3C,CAAC"}

package/lib/typescript/src/utils/tapZoom.d.ts

@@ -0,0 +1,12 @@
+import type { SharedValue } from 'react-native-reanimated';
+export declare 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>;
+}) => void;
+//# sourceMappingURL=tapZoom.d.ts.map

package/lib/typescript/src/utils/tapZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tapZoom.d.ts","sourceRoot":"","sources":["../../../../src/utils/tapZoom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,eAAO,MAAM,mBAAmB,GAAI,uEASjC;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACjC,SAsBA,CAAC"}

package/lib/typescript/src/utils/webScroll.d.ts

@@ -0,0 +1,18 @@
+export declare const getWebScrollPhysicalIndex: (offsetX: number, pageWidth: number) => number;
+export declare const resolveWebScrollFinalState: ({ dataLength, enableLoop, lastSettledPhysicalIndex, offsetX, pageWidth, }: {
+    offsetX: number;
+    pageWidth: number;
+    lastSettledPhysicalIndex: number;
+    dataLength: number;
+    enableLoop: boolean;
+}) => {
+    logicalIndex: number;
+    rawPhysicalIndex: number;
+    settledPhysicalIndex: number;
+} | null;
+export declare const getWebAutoPlayTargetPhysicalIndex: ({ currentIndex, dataLength, enableLoop, }: {
+    currentIndex: number;
+    dataLength: number;
+    enableLoop: boolean;
+}) => number | null;
+//# sourceMappingURL=webScroll.d.ts.map

package/lib/typescript/src/utils/webScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webScroll.d.ts","sourceRoot":"","sources":["../../../../src/utils/webScroll.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,GAAI,SAAS,MAAM,EAAE,WAAW,MAAM,KAAG,MAM9E,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,2EAMxC;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,wBAAwB,EAAE,MAAM,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,KAAG;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAC;IAAC,oBAAoB,EAAE,MAAM,CAAA;CAAE,GAAG,IAiDtF,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,2CAI/C;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,KAAG,MAAM,GAAG,IAgBZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "🖼️ React Native Image Viewer - Reanimated-powered image gestures with full control",
   "keywords": [
     "android",

package/src/GestureTrigger.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import { Children, cloneElement, isValidElement, useMemo, useRef } from 'react';
+import { Children, cloneElement, isValidElement, useCallback, useMemo, useRef } from 'react';
 import { View } from 'react-native';
 
 import { registry } from './GestureViewerRegistry';
@@ -16,11 +16,13 @@ type WithOnPress = { onPress?: (...args: unknown[]) => void };
  * @typeParam T - The child's props type. Must include an optional `onPress` handler.
  *
  * @property id - Optional identifier to associate this trigger with a `GestureViewer`.
+ * @property index - Optional item index used to align dismiss animations with the current viewer index.
  * @property children - A single React element whose props include `onPress` (e.g., `Pressable`, `Touchable*`).
  * @property onPress - Optional handler invoked after the child's own `onPress`.
  */
 export type GestureTriggerProps<T extends WithOnPress> = {
   id?: string;
+  index?: number;
   children: ReactElement<T>;
   onPress?: (...args: unknown[]) => void;
 };
@@ -30,15 +32,19 @@ export type GestureTriggerProps<T extends WithOnPress> = {
  *
  * @remarks
  * Behavior on press:
- * - Registers the child's native node to the internal registry under the given `id`.
+ * - Registers the child's native node as the active trigger under the given `id`.
  * - Invokes the child's own `onPress` first (if provided).
  * - Invokes the `onPress` passed to `GestureTrigger` next (if provided).
  *
+ * When `index` is provided, the trigger is also registered by item index while mounted,
+ * allowing dismiss animations to target the currently visible item instead of only the opening trigger.
+ *
  * Type parameters:
  * - `T` — The child's props type. Must include an optional `onPress` handler, ensuring the child is pressable.
  *
  * Props:
  * - `id` — Optional identifier to associate this trigger with a `GestureViewer`. Defaults to `"default"`.
+ * - `index` — Optional item index used to support dismiss animations back to the current item trigger.
  * - `children` — A single React element whose props include `onPress` (e.g., `Pressable`, `Touchable*`, custom button).
  * - `onPress` — Optional handler invoked after the child's `onPress`. Receives the same arguments as the child's handler.
  *
@@ -48,7 +54,7 @@ export type GestureTriggerProps<T extends WithOnPress> = {
  *
  * Example:
  * ```tsx
- * <GestureTrigger id="gallery" onPress={() => openModal(index)}>
+ * <GestureTrigger id="gallery" index={index} onPress={() => openModal(index)}>
  *   <Pressable style={styles.thumb}>
  *     <Image source={{ uri }} style={styles.thumbImage} />
  *   </Pressable>
@@ -57,10 +63,29 @@ export type GestureTriggerProps<T extends WithOnPress> = {
  */
 export function GestureTrigger<T extends WithOnPress>({
   id = 'default',
+  index,
   children,
   onPress,
 }: GestureTriggerProps<T>) {
-  const ref = useRef<View>(null);
+  const ref = useRef<View | null>(null);
+
+  const handleRef = useCallback(
+    (node: View | null) => {
+      ref.current = node;
+
+      if (index === undefined) {
+        return;
+      }
+
+      if (node) {
+        registry.setIndexedTriggerNode(id, index, node);
+        return;
+      }
+
+      registry.clearIndexedTriggerNode(id, index);
+    },
+    [id, index],
+  );
 
   const wrapped = useMemo(() => {
     const child = Children.only(children);
@@ -72,7 +97,7 @@ export function GestureTrigger<T extends WithOnPress>({
     const originalOnPress = child.props?.onPress;
 
     const handlePress = (...args: unknown[]) => {
-      registry.setTriggerNode(id, ref.current);
+      registry.setActiveTriggerNode(id, ref.current);
       originalOnPress?.(...args);
       onPress?.(...args);
 
@@ -90,7 +115,7 @@ export function GestureTrigger<T extends WithOnPress>({
   }, [id, onPress, children]);
 
   return (
-    <View ref={ref} collapsable={false}>
+    <View ref={handleRef} collapsable={false}>
       {wrapped}
     </View>
   );

package/src/GestureViewer.tsx

@@ -12,7 +12,13 @@ import Animated from 'react-native-reanimated';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerProps } from './types';
 import { useGestureViewer } from './useGestureViewer';
-import { createLoopData, isFlashListLike, isFlatListLike, isScrollViewLike } from './utils';
+import {
+  createLoopData,
+  isFlashListLike,
+  isFlatListLike,
+  isScrollViewLike,
+  shouldUseNativeScrollGesture,
+} from './utils';
 import WebPagingFixStyle from './WebPagingFixStyle';
 
 export function GestureViewer<ItemT, LC>({
@@ -53,7 +59,9 @@ export function GestureViewer<ItemT, LC>({
     dismissGesture,
     zoomGesture,
     nativeScrollGesture,
+    onWebDoubleClick,
     onMomentumScrollEnd,
+    onScroll,
     onScrollBeginDrag,
     animatedStyle,
     backdropStyle,
@@ -130,7 +138,8 @@ export function GestureViewer<ItemT, LC>({
         horizontal: true,
         scrollEnabled: !isZoomed && !isRotated && !isPinching,
         showsHorizontalScrollIndicator: false,
-        onMomentumScrollEnd: onMomentumScrollEnd,
+        onMomentumScrollEnd,
+        onScroll,
         onScrollBeginDrag,
         ...(enableSnapMode
           ? {
@@ -151,6 +160,7 @@ export function GestureViewer<ItemT, LC>({
       isRotated,
       isPinching,
       onMomentumScrollEnd,
+      onScroll,
       onScrollBeginDrag,
       enableSnapMode,
     ],
@@ -158,6 +168,22 @@ export function GestureViewer<ItemT, LC>({
 
   const control = useMemo(() => ({ dismiss: handleDismiss }), [handleDismiss]);
 
+  const shouldWrapScrollableWithNativeGesture = shouldUseNativeScrollGesture(
+    Platform.OS,
+    Component,
+  );
+
+  const maybeWrapWithNativeScrollGesture = useCallback(
+    (children: React.ReactNode) => {
+      if (!shouldWrapScrollableWithNativeGesture) {
+        return children;
+      }
+
+      return <GestureDetector gesture={nativeScrollGesture}>{children}</GestureDetector>;
+    },
+    [nativeScrollGesture, shouldWrapScrollableWithNativeGesture],
+  );
+
   const listComponent = (
     <GestureHandlerRootView>
       <GestureDetector gesture={gesture}>
@@ -165,18 +191,18 @@ export function GestureViewer<ItemT, LC>({
           <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
           <Animated.View
             style={[styles.content, animatedStyle]}
+            {...(Platform.OS === 'web' && { onClick: onWebDoubleClick })}
             {...(Platform.OS === 'web' &&
               isFlashListLike(Component) && { dataSet: { 'flash-list-paging-enabled-fix': true } })}
           >
-            {isScrollView ? (
-              <GestureDetector gesture={nativeScrollGesture}>
-                <Component ref={listRef} {...commonProps} {...listProps}>
-                  {loopData.map((item, index) => renderItem({ item, index }))}
-                </Component>
-              </GestureDetector>
-            ) : (
-              isFlatListLike(Component) && (
-                <GestureDetector gesture={nativeScrollGesture}>
+            {isScrollView
+              ? maybeWrapWithNativeScrollGesture(
+                  <Component ref={listRef} {...commonProps} {...listProps}>
+                    {loopData.map((item, index) => renderItem({ item, index }))}
+                  </Component>,
+                )
+              : isFlatListLike(Component) &&
+                maybeWrapWithNativeScrollGesture(
                   <Component
                     ref={listRef}
                     {...commonProps}
@@ -196,10 +222,8 @@ export function GestureViewer<ItemT, LC>({
                         dataSet: { 'flat-list-paging-enabled-fix': true },
                       })}
                     {...listProps}
-                  />
-                </GestureDetector>
-              )
-            )}
+                  />,
+                )}
           </Animated.View>
           <WebPagingFixStyle Component={Component} />
         </View>

package/src/GestureViewerManager.ts

@@ -22,8 +22,10 @@ class GestureViewerManager {
   private rotation: SharedValue<number> | null = null;
   private translateX: SharedValue<number> | null = null;
   private translateY: SharedValue<number> | null = null;
+  private resetTransformCallback: (() => void) | null = null;
 
   private loopCallback: (() => void) | null = null;
+  private programmaticScrollVersion = 0;
 
   private listeners = new Set<(state: GestureViewerState) => void>();
   private eventListeners = new Map<GestureViewerEventType, Set<(data: any) => void>>();
@@ -91,6 +93,10 @@ class GestureViewerManager {
     };
   }
 
+  getProgrammaticScrollVersion() {
+    return this.programmaticScrollVersion;
+  }
+
   setEnableLoop(enabled: boolean) {
     this.enableLoop = enabled;
   }
@@ -133,6 +139,10 @@ class GestureViewerManager {
     this.maxZoomScale = maxZoomScale;
   }
 
+  setResetTransformCallback(callback: (() => void) | null) {
+    this.resetTransformCallback = callback;
+  }
+
   notifyStateChange() {
     this.notifyListeners();
   }
@@ -255,7 +265,7 @@ class GestureViewerManager {
       return;
     }
 
-    this.loopCallback = null;
+    this.cancelPendingLoopTransition();
 
     const { scrollTo } = createScrollAction(this.listRef, this.width);
 
@@ -264,9 +274,11 @@ class GestureViewerManager {
         this.loopCallback = () => {
           scrollTo(this.dataLength, false);
           this.updateCurrentIndex(this.dataLength - 1);
-          this.loopCallback = null;
+          this.cancelPendingLoopTransition();
         };
 
+        this.resetTransformCallback?.();
+        this.programmaticScrollVersion += 1;
         scrollTo(0, true);
         return;
       }
@@ -275,13 +287,17 @@ class GestureViewerManager {
         this.loopCallback = () => {
           scrollTo(1, false);
           this.updateCurrentIndex(0);
-          this.loopCallback = null;
+          this.cancelPendingLoopTransition();
         };
 
+        this.resetTransformCallback?.();
+        this.programmaticScrollVersion += 1;
         scrollTo(this.dataLength + 1, true);
         return;
       }
 
+      this.resetTransformCallback?.();
+      this.programmaticScrollVersion += 1;
       scrollTo(index + 1, true);
       this.updateCurrentIndex(index);
 
@@ -292,6 +308,8 @@ class GestureViewerManager {
       return;
     }
 
+    this.resetTransformCallback?.();
+    this.programmaticScrollVersion += 1;
     scrollTo(index, true);
     this.updateCurrentIndex(index);
   };
@@ -306,14 +324,18 @@ class GestureViewerManager {
       return true;
     }
 
-    this.loopCallback = null;
+    this.cancelPendingLoopTransition();
     return true;
   };
 
-  handleScrollBeginDrag = () => {
+  cancelPendingLoopTransition = () => {
     this.loopCallback = null;
   };
 
+  handleScrollBeginDrag = () => {
+    this.cancelPendingLoopTransition();
+  };
+
   goToPrevious = () => {
     this.goToIndex(this.currentIndex - 1);
   };
@@ -323,7 +345,7 @@ class GestureViewerManager {
   };
 
   cleanUp() {
-    this.loopCallback = null;
+    this.cancelPendingLoopTransition();
     this.listeners.clear();
     this.listRef = null;
     this.enableHorizontalSwipe = true;
@@ -334,6 +356,7 @@ class GestureViewerManager {
     this.translateX = null;
     this.translateY = null;
     this.rotation = null;
+    this.resetTransformCallback = null;
     this.eventListeners.clear();
   }
 

package/src/GestureViewerRegistry.ts

@@ -5,7 +5,9 @@ import GestureViewerManager from './GestureViewerManager';
 class GestureViewerRegistry {
   private managers = new Map<string, GestureViewerManager>();
   private subscribers = new Map<string, Set<(manager: GestureViewerManager | null) => void>>();
-  private triggers = new Map<string, View | null>();
+  private activeTriggerSubscribers = new Map<string, Set<(node: View | null) => void>>();
+  private activeTriggers = new Map<string, View | null>();
+  private indexedTriggers = new Map<string, Map<number, View | null>>();
 
   subscribeToManager(id: string, callback: (manager: GestureViewerManager | null) => void) {
     if (!this.subscribers.has(id)) {
@@ -29,6 +31,26 @@ class GestureViewerRegistry {
     };
   }
 
+  subscribeToActiveTrigger(id: string, callback: (node: View | null) => void) {
+    if (!this.activeTriggerSubscribers.has(id)) {
+      this.activeTriggerSubscribers.set(id, new Set());
+    }
+
+    this.activeTriggerSubscribers.get(id)?.add(callback);
+
+    callback(this.getActiveTriggerNode(id));
+
+    return () => {
+      const subscribers = this.activeTriggerSubscribers.get(id);
+
+      subscribers?.delete(callback);
+
+      if (subscribers && subscribers.size === 0) {
+        this.activeTriggerSubscribers.delete(id);
+      }
+    };
+  }
+
   createManager(id: string): GestureViewerManager | null {
     if (this.managers.has(id)) {
       return this.managers.get(id) || null;
@@ -55,7 +77,8 @@ class GestureViewerRegistry {
 
       this.notifySubscribers(id, null);
 
-      this.triggers.delete(id);
+      this.activeTriggers.delete(id);
+      this.notifyActiveTriggerSubscribers(id, null);
     }
   }
 
@@ -67,16 +90,52 @@ class GestureViewerRegistry {
     }
   }
 
-  setTriggerNode(id: string, node: View | null) {
-    this.triggers.set(id, node);
+  notifyActiveTriggerSubscribers(id: string, node: View | null) {
+    const listeners = this.activeTriggerSubscribers.get(id);
+
+    if (listeners) {
+      [...listeners].forEach((callback) => callback(node));
+    }
   }
 
-  getTriggerNode(id: string): View | null {
-    return this.triggers.get(id) ?? null;
+  setActiveTriggerNode(id: string, node: View | null) {
+    this.activeTriggers.set(id, node);
+    this.notifyActiveTriggerSubscribers(id, node);
   }
 
-  clearTriggerNode(id: string) {
-    this.triggers.delete(id);
+  getActiveTriggerNode(id: string): View | null {
+    return this.activeTriggers.get(id) ?? null;
+  }
+
+  clearActiveTriggerNode(id: string) {
+    this.activeTriggers.delete(id);
+    this.notifyActiveTriggerSubscribers(id, null);
+  }
+
+  setIndexedTriggerNode(id: string, index: number, node: View | null) {
+    if (!this.indexedTriggers.has(id)) {
+      this.indexedTriggers.set(id, new Map());
+    }
+
+    this.indexedTriggers.get(id)?.set(index, node);
+  }
+
+  getIndexedTriggerNode(id: string, index: number): View | null {
+    return this.indexedTriggers.get(id)?.get(index) ?? null;
+  }
+
+  clearIndexedTriggerNode(id: string, index: number) {
+    const triggersByIndex = this.indexedTriggers.get(id);
+
+    if (!triggersByIndex) {
+      return;
+    }
+
+    triggersByIndex.delete(index);
+
+    if (triggersByIndex.size === 0) {
+      this.indexedTriggers.delete(id);
+    }
   }
 }