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

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,EAE7B,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,WAAW,EACX,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,CA8X3D"}

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

@@ -0,0 +1,4 @@
+import type { GestureViewerDismissDirection } from '../types';
+export declare const shouldDismissByDirection: (translationY: number, threshold: number, direction: GestureViewerDismissDirection) => boolean;
+export declare const getDismissDistance: (translationY: number, direction: GestureViewerDismissDirection) => number;
+//# sourceMappingURL=dismiss.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dismiss.d.ts","sourceRoot":"","sources":["../../../../src/utils/dismiss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAE9D,eAAO,MAAM,wBAAwB,GACnC,cAAc,MAAM,EACpB,WAAW,MAAM,EACjB,WAAW,6BAA6B,KACvC,OAYF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,cAAc,MAAM,EACpB,WAAW,6BAA6B,KACvC,MAYF,CAAC"}

package/package.json

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

@@ -59,7 +59,7 @@ export function GestureViewer<ItemT, LC>({
     dismissGesture,
     zoomGesture,
     nativeScrollGesture,
-    onWebDoubleClick,
+    onWebClick,
     onMomentumScrollEnd,
     onScroll,
     onScrollBeginDrag,
@@ -191,7 +191,9 @@ 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' && {
+              onClick: onWebClick,
+            })}
             {...(Platform.OS === 'web' &&
               isFlashListLike(Component) && { dataSet: { 'flash-list-paging-enabled-fix': true } })}
           >

package/src/GestureViewerManager.ts

@@ -86,6 +86,10 @@ class GestureViewerManager {
     this.emitEvent('rotationChange', { rotation, previousRotation });
   };
 
+  emitTap = (data: GestureViewerEventData['tap']) => {
+    this.emitEvent('tap', data);
+  };
+
   getState(): GestureViewerState {
     return {
       currentIndex: this.currentIndex,

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/index.tsx

@@ -8,6 +8,7 @@ export type {
   GestureViewerEventType,
   GestureViewerProps,
   GestureViewerState,
+  GestureViewerSingleTapEvent,
 } from './types';
 export { useGestureViewerController } from './useGestureViewerController';
 export { useGestureViewerEvent } from './useGestureViewerEvent';

package/src/types.ts

@@ -75,6 +75,15 @@ export type TriggerRect = {
   height: number;
 };
 
+export type GestureViewerSingleTapEvent<ItemT> = {
+  x: number;
+  y: number;
+  index: number;
+  item: ItemT;
+};
+
+export type GestureViewerDismissDirection = 'down' | 'up' | 'both';
+
 export interface TriggerAnimationConfig extends WithTimingConfig {
   /**
    * Animation duration in milliseconds
@@ -121,9 +130,18 @@ export interface GestureViewerProps<ItemT, LC> {
    * A callback function that is called to render the item.
    */
   renderItem: (item: ItemT, index: number) => React.ReactElement;
+  /**
+   * A callback function that is called when a single tap is confirmed on the viewer content.
+   * @remarks
+   * - The callback runs only after the tap is resolved as a single tap, so it may be slightly delayed when double-tap zoom is enabled.
+   * - It is not called for swipe, pinch, dismiss, or double-tap zoom gestures.
+   * - Prefer this callback over overlaying a pressable in `renderContainer` for fullscreen tap handling.
+   */
+  onSingleTap?: (event: GestureViewerSingleTapEvent<ItemT>) => void;
   /**
    * A callback function that is called to render the container.
    * @remarks Useful for composing additional UI (e.g., close button, toolbars) around the viewer.
+   * Prefer `onSingleTap` for fullscreen tap handling instead of overlaying a pressable over the viewer content.
    * The second argument provides control helpers such as `dismiss()` to close the viewer.
    *
    * @param children - The viewer content to be rendered inside your container.
@@ -183,8 +201,8 @@ export interface GestureViewerProps<ItemT, LC> {
    */
   autoPlayInterval?: number;
   /**
-   * Dismiss gesture options. Calls `onDismiss` function when swiping down.
-   * @remarks Useful for closing modals with downward swipe gestures.
+   * Dismiss gesture options.
+   * @remarks Useful for closing modals with configurable vertical swipe gestures.
    */
   dismiss?: {
     /**
@@ -192,6 +210,12 @@ export interface GestureViewerProps<ItemT, LC> {
      * @defaultValue true
      */
     enabled?: boolean;
+    /**
+     * Controls which vertical swipe direction can trigger `onDismiss`.
+     * @remarks Use `down` for backward-compatible behavior, `up` for upward-only dismiss, or `both` for either direction.
+     * @defaultValue 'down'
+     */
+    direction?: GestureViewerDismissDirection;
     /**
      * `threshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.
      * @defaultValue 80
@@ -203,7 +227,7 @@ export interface GestureViewerProps<ItemT, LC> {
      */
     resistance?: number;
     /**
-     * By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures.
+     * By default, the background `opacity` gradually decreases as you drag in the configured dismiss direction.
      * @remarks When `false`, this animation is disabled.
      * @defaultValue true
      */
@@ -425,11 +449,14 @@ export type GestureViewerState = {
   readonly totalCount: number;
 };
 
-export type GestureViewerEventType = 'zoomChange' | 'rotationChange';
+export type GestureViewerEventType = 'zoomChange' | 'rotationChange' | 'tap';
+
+export type SingleTapEventData = { kind: 'single'; x: number; y: number; index: number };
 
 export type GestureViewerEventData = {
   zoomChange: { scale: number; previousScale: number | null };
   rotationChange: { rotation: number; previousRotation: number | null };
+  tap: SingleTapEventData;
 };
 
 export type GestureViewerEventCallback<T extends GestureViewerEventType> = (