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

package/lib/typescript/src/GestureTrigger.d.ts

@@ -12,11 +12,13 @@ type WithOnPress = {
  * @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;
 };
@@ -25,15 +27,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.
  *
@@ -43,13 +49,13 @@ 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>
  * </GestureTrigger>
  * ```
  */
-export declare function GestureTrigger<T extends WithOnPress>({ id, children, onPress, }: GestureTriggerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function GestureTrigger<T extends WithOnPress>({ id, index, children, onPress, }: GestureTriggerProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=GestureTrigger.d.ts.map

package/lib/typescript/src/GestureTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GestureTrigger.d.ts","sourceRoot":"","sources":["../../../src/GestureTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAA;CAAE,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,EAAc,EACd,QAAQ,EACR,OAAO,GACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAmCxB"}
+{"version":3,"file":"GestureTrigger.d.ts","sourceRoot":"","sources":["../../../src/GestureTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C;;;GAGG;AACH,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAA;CAAE,CAAC;AAE9D;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,EAAc,EACd,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAqDxB"}

package/lib/typescript/src/GestureViewerRegistry.d.ts

@@ -3,15 +3,22 @@ import GestureViewerManager from './GestureViewerManager';
 declare class GestureViewerRegistry {
     private managers;
     private subscribers;
-    private triggers;
+    private activeTriggerSubscribers;
+    private activeTriggers;
+    private indexedTriggers;
     subscribeToManager(id: string, callback: (manager: GestureViewerManager | null) => void): () => void;
+    subscribeToActiveTrigger(id: string, callback: (node: View | null) => void): () => void;
     createManager(id: string): GestureViewerManager | null;
     getManager(id: string): GestureViewerManager | null;
     deleteManager(id: string): void;
     notifySubscribers(id: string, manager: GestureViewerManager | null): void;
-    setTriggerNode(id: string, node: View | null): void;
-    getTriggerNode(id: string): View | null;
-    clearTriggerNode(id: string): void;
+    notifyActiveTriggerSubscribers(id: string, node: View | null): void;
+    setActiveTriggerNode(id: string, node: View | null): void;
+    getActiveTriggerNode(id: string): View | null;
+    clearActiveTriggerNode(id: string): void;
+    setIndexedTriggerNode(id: string, index: number, node: View | null): void;
+    getIndexedTriggerNode(id: string, index: number): View | null;
+    clearIndexedTriggerNode(id: string, index: number): void;
 }
 export declare const registry: GestureViewerRegistry;
 export {};

package/lib/typescript/src/GestureViewerRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GestureViewerRegistry.d.ts","sourceRoot":"","sources":["../../../src/GestureViewerRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,cAAM,qBAAqB;IACzB,OAAO,CAAC,QAAQ,CAA2C;IAC3D,OAAO,CAAC,WAAW,CAA0E;IAC7F,OAAO,CAAC,QAAQ,CAAkC;IAElD,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI;IAsBvF,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI;IAatD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI;IAInD,aAAa,CAAC,EAAE,EAAE,MAAM;IAaxB,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,GAAG,IAAI;IAQlE,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI;IAI5C,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIvC,gBAAgB,CAAC,EAAE,EAAE,MAAM;CAG5B;AAED,eAAO,MAAM,QAAQ,uBAA8B,CAAC"}
+{"version":3,"file":"GestureViewerRegistry.d.ts","sourceRoot":"","sources":["../../../src/GestureViewerRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,cAAM,qBAAqB;IACzB,OAAO,CAAC,QAAQ,CAA2C;IAC3D,OAAO,CAAC,WAAW,CAA0E;IAC7F,OAAO,CAAC,wBAAwB,CAAuD;IACvF,OAAO,CAAC,cAAc,CAAkC;IACxD,OAAO,CAAC,eAAe,CAA+C;IAEtE,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI;IAsBvF,wBAAwB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI;IAoB1E,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI;IAatD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI;IAInD,aAAa,CAAC,EAAE,EAAE,MAAM;IAcxB,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,GAAG,IAAI;IAQlE,8BAA8B,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI;IAQ5D,oBAAoB,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI;IAKlD,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAI7C,sBAAsB,CAAC,EAAE,EAAE,MAAM;IAKjC,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI;IAQlE,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAI7D,uBAAuB,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAalD;AAED,eAAO,MAAM,QAAQ,uBAA8B,CAAC"}

package/lib/typescript/src/useGestureViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGestureViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewer.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAe,MAAM,SAAS,CAAC;AAK/D,KAAK,qBAAqB,CAAC,KAAK,EAAE,EAAE,IAAI,IAAI,CAC1C,kBAAkB,CAAC,KAAK,EAAE,EAAE,CAAC,EAC3B,YAAY,GACZ,iBAAiB,GACjB,eAAe,GACf,WAAW,GACX,gBAAgB,GAChB,eAAe,GACf,gBAAgB,CACnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,EAAE,EAAE,EAAE,kRAmBzC,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4mBlC,CAAC"}
+{"version":3,"file":"useGestureViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewer.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAe,MAAM,SAAS,CAAC;AAK/D,KAAK,qBAAqB,CAAC,KAAK,EAAE,EAAE,IAAI,IAAI,CAC1C,kBAAkB,CAAC,KAAK,EAAE,EAAE,CAAC,EAC3B,YAAY,GACZ,iBAAiB,GACjB,eAAe,GACf,WAAW,GACX,gBAAgB,GAChB,eAAe,GACf,gBAAgB,CACnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,EAAE,EAAE,EAAE,kRAmBzC,qBAAqB,CAAC,KAAK,EAAE,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyrBlC,CAAC"}

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

@@ -1,3 +1,3 @@
 import type { UseGestureViewerPagingArgs, UseGestureViewerPagingResult } from './useGestureViewerPaging.types';
-export declare function useGestureViewerPaging({ autoPlay, autoPlayInterval, currentIndex, dataLength, enableHorizontalSwipe, enableLoop, isRotated, isZoomed, itemSpacing, manager, scrollTo, syncCurrentIndex, width, }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult;
+export declare function useGestureViewerPaging({ autoPlay, autoPlayInterval, currentIndex, dataLength, enableHorizontalSwipe, enableLoop, isRotated, isZoomed, itemSpacing, manager, scrollTo, syncCurrentIndex, syncPendingIndex, width, }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult;
 //# sourceMappingURL=useGestureViewerPaging.d.ts.map

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

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

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

@@ -19,6 +19,7 @@ export type UseGestureViewerPagingArgs = {
     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;

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

@@ -1 +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,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"}
+{"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

@@ -1,3 +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, translateX, translateY, width, }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult;
+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

@@ -1 +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,UAAU,EACV,UAAU,EACV,KAAK,GACN,EAAE,0BAA0B,GAAG,4BAA4B,CAqV3D"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "2.1.4",
+  "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/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);
+    }
   }
 }
 

package/src/useGestureViewer.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { InteractionManager, Platform, useWindowDimensions } from 'react-native';
+import { InteractionManager, Platform, type View, useWindowDimensions } from 'react-native';
 import { Gesture, type GestureType } from 'react-native-gesture-handler';
 import {
   Easing,
@@ -62,11 +62,17 @@ export const useGestureViewer = <ItemT, LC>({
   const [shouldStartTriggerAnimation, setShouldStartTriggerAnimation] = useState(false);
   const [manager, setManager] = useState<GestureViewerManager | null>(null);
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [activeTriggerNode, setActiveTriggerNode] = useState<View | null>(null);
 
   const listRef = useRef<any>(null);
   const triggerRectRef = useRef<TriggerRect | null>(null);
+  const pendingIndexRef = useRef(initialIndex);
   const onAnimationCompleteRef = useRef(triggerAnimation?.onAnimationComplete);
 
+  const isValidTriggerRect = useCallback((rect: TriggerRect | null): rect is TriggerRect => {
+    return !!rect && rect.width > 0 && rect.height > 0;
+  }, []);
+
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
   const startScale = useSharedValue(1);
@@ -138,12 +144,25 @@ export const useGestureViewer = <ItemT, LC>({
     rotation.value = 0;
   }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
 
+  const syncPendingIndex = useCallback(
+    (nextIndex: number) => {
+      if (nextIndex < 0 || nextIndex >= dataLength) {
+        return;
+      }
+
+      pendingIndexRef.current = nextIndex;
+    },
+    [dataLength],
+  );
+
   const syncCurrentIndex = useCallback(
     (nextIndex: number) => {
       if (!manager || nextIndex < 0 || nextIndex >= dataLength) {
         return;
       }
 
+      pendingIndexRef.current = nextIndex;
+
       const managerCurrentIndex = manager.getState().currentIndex;
 
       if (nextIndex === managerCurrentIndex) {
@@ -206,7 +225,10 @@ export const useGestureViewer = <ItemT, LC>({
 
     const unsubscribeFromRegistry = registry.subscribeToManager(id, (managerInstance) => {
       setManager(managerInstance);
-      unsubscribe = managerInstance?.subscribe((state) => setCurrentIndex(state.currentIndex));
+      unsubscribe = managerInstance?.subscribe((state) => {
+        pendingIndexRef.current = state.currentIndex;
+        setCurrentIndex(state.currentIndex);
+      });
     });
 
     return () => {
@@ -216,6 +238,12 @@ export const useGestureViewer = <ItemT, LC>({
   }, [id]);
 
   useEffect(() => {
+    return registry.subscribeToActiveTrigger(id, setActiveTriggerNode);
+  }, [id]);
+
+  useEffect(() => {
+    pendingIndexRef.current = initialIndex;
+
     if (!manager) {
       return;
     }
@@ -331,32 +359,41 @@ export const useGestureViewer = <ItemT, LC>({
   ]);
 
   useEffect(() => {
-    const node = registry.getTriggerNode(id);
-
-    if (node && typeof node.measure === 'function') {
-      node.measure((_x, _y, width, height, pageX, pageY) => {
-        triggerRectRef.current = { height, width, x: pageX, y: pageY };
-        triggerOpacity.value = 0;
-        setShouldStartTriggerAnimation(true);
-        registry.clearTriggerNode(id);
-      });
+    if (!activeTriggerNode || typeof activeTriggerNode.measure !== 'function') {
+      return;
     }
 
+    activeTriggerNode.measure((_x, _y, measuredWidth, measuredHeight, pageX, pageY) => {
+      const nextTriggerRect = {
+        height: measuredHeight,
+        width: measuredWidth,
+        x: pageX,
+        y: pageY,
+      } satisfies TriggerRect;
+
+      if (!isValidTriggerRect(nextTriggerRect)) {
+        registry.clearActiveTriggerNode(id);
+        return;
+      }
+
+      triggerRectRef.current = nextTriggerRect;
+      triggerOpacity.value = 0;
+      setShouldStartTriggerAnimation(true);
+      registry.clearActiveTriggerNode(id);
+    });
+  }, [activeTriggerNode, id, isValidTriggerRect, triggerOpacity]);
+
+  useEffect(() => {
     return () => {
       triggerRectRef.current = null;
     };
-  }, [id, triggerOpacity]);
-
-  const handleDismiss = useCallback(() => {
-    onDismissStart?.();
+  }, []);
 
-    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 animateDismissToRect = useCallback(
+    (rect: TriggerRect) => {
+      const endX = rect.x + rect.width / 2 - width / 2;
+      const endY = rect.y + rect.height / 2 - height / 2;
+      const endScale = Math.min(rect.width / width, rect.height / height);
 
       triggerScale.value = withTiming(endScale, animationConfig);
       triggerTranslateX.value = withTiming(endX, animationConfig);
@@ -366,23 +403,62 @@ export const useGestureViewer = <ItemT, LC>({
           scheduleOnRN(onDismiss);
         }
       });
-      return;
-    }
+    },
+    [
+      animationConfig,
+      height,
+      onDismiss,
+      triggerOpacity,
+      triggerScale,
+      triggerTranslateX,
+      triggerTranslateY,
+      width,
+    ],
+  );
 
+  const dismissWithoutTrigger = useCallback(() => {
     if (onDismiss) {
       scheduleOnRN(onDismiss);
     }
-  }, [
-    animationConfig,
-    onDismiss,
-    onDismissStart,
-    width,
-    height,
-    triggerTranslateX,
-    triggerScale,
-    triggerTranslateY,
-    triggerOpacity,
-  ]);
+  }, [onDismiss]);
+
+  const handleDismiss = useCallback(() => {
+    onDismissStart?.();
+
+    const dismissTargetIndex = pendingIndexRef.current;
+    const indexedTriggerNode = registry.getIndexedTriggerNode(id, dismissTargetIndex);
+
+    if (indexedTriggerNode && typeof indexedTriggerNode.measure === 'function') {
+      indexedTriggerNode.measure((_x, _y, measuredWidth, measuredHeight, pageX, pageY) => {
+        const currentTriggerRect = {
+          height: measuredHeight,
+          width: measuredWidth,
+          x: pageX,
+          y: pageY,
+        } satisfies TriggerRect;
+
+        if (isValidTriggerRect(currentTriggerRect)) {
+          animateDismissToRect(currentTriggerRect);
+          return;
+        }
+
+        if (isValidTriggerRect(triggerRectRef.current)) {
+          animateDismissToRect(triggerRectRef.current);
+          return;
+        }
+
+        dismissWithoutTrigger();
+      });
+      return;
+    }
+
+    if (isValidTriggerRect(triggerRectRef.current)) {
+      animateDismissToRect(triggerRectRef.current);
+      return;
+    }
+
+    dismissWithoutTrigger();
+  }, [animateDismissToRect, dismissWithoutTrigger, id, isValidTriggerRect, onDismissStart]);
 
   const dismissGesture = useMemo(() => {
     const canDismiss = !isZoomed && dismissOptions.enabled;
@@ -645,6 +721,7 @@ export const useGestureViewer = <ItemT, LC>({
       scale,
       scrollTo,
       syncCurrentIndex,
+      syncPendingIndex,
       translateX,
       translateY,
       width,

package/src/useGestureViewerPaging.ts

@@ -20,6 +20,7 @@ export function useGestureViewerPaging({
   manager,
   scrollTo,
   syncCurrentIndex,
+  syncPendingIndex,
   width,
 }: UseGestureViewerPagingArgs): UseGestureViewerPagingResult {
   useEffect(() => {
@@ -99,13 +100,28 @@ export function useGestureViewerPaging({
     ],
   );
 
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!enableHorizontalSwipe) {
+        return;
+      }
+
+      const { contentOffset } = event.nativeEvent;
+      const scrollIndex = Math.round(contentOffset.x / (width + itemSpacing));
+      const { realIndex } = getLoopAdjustedIndex(scrollIndex, dataLength, enableLoop);
+
+      syncPendingIndex(realIndex);
+    },
+    [dataLength, enableHorizontalSwipe, enableLoop, itemSpacing, syncPendingIndex, width],
+  );
+
   const onScrollBeginDrag = useCallback(() => {
     manager?.handleScrollBeginDrag();
   }, [manager]);
 
   return {
     onMomentumScrollEnd,
-    onScroll: undefined,
+    onScroll,
     onScrollBeginDrag,
     onWebDoubleClick: undefined,
   };

package/src/useGestureViewerPaging.types.ts

@@ -21,6 +21,7 @@ export type UseGestureViewerPagingArgs = {
   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;

package/src/useGestureViewerPaging.web.ts

@@ -43,6 +43,7 @@ export function useGestureViewerPaging({
   scale,
   scrollTo,
   syncCurrentIndex,
+  syncPendingIndex,
   translateX,
   translateY,
   width,
@@ -302,15 +303,34 @@ export function useGestureViewerPaging({
         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(event.nativeEvent.contentOffset.x);
+      scheduleWebScrollSettle(offsetX);
     },
     [
       beginWebUserInteraction,
+      dataLength,
       enableHorizontalSwipe,
+      enableLoop,
+      itemSpacing,
       scheduleWebScrollSettle,
+      syncPendingIndex,
       syncProgrammaticActorFromManager,
+      width,
     ],
   );