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

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,
@@ -154,32 +158,34 @@ class GestureViewerManager {
   rotate = (angle: 0 | 90 | 180 | 270 | 360 = 90, clockwise = true) => {
     const MAX_ANGLE = 360;
 
+    const currentRotation = this.rotation?.get();
+
     if (
-      !this.rotation ||
+      currentRotation === undefined ||
       angle < 0 ||
       angle > MAX_ANGLE ||
-      (angle !== 0 && this.rotation.value % angle !== 0 && angle !== 360)
+      (angle !== 0 && currentRotation % angle !== 0 && angle !== 360)
     ) {
       return;
     }
 
     if (angle === 0) {
-      const nextAngle = Math.floor(this.rotation.value / MAX_ANGLE) * MAX_ANGLE;
+      const nextAngle = Math.floor(currentRotation / MAX_ANGLE) * MAX_ANGLE;
 
-      this.rotation.value = withTiming(clockwise ? nextAngle : nextAngle - MAX_ANGLE);
+      this.rotation?.set(withTiming(clockwise ? nextAngle : nextAngle - MAX_ANGLE));
       return;
     }
 
     if (angle === 360) {
-      this.rotation.value = withTiming(
-        clockwise ? this.rotation.value + MAX_ANGLE : this.rotation.value - MAX_ANGLE,
+      this.rotation?.set(
+        withTiming(clockwise ? currentRotation + MAX_ANGLE : currentRotation - MAX_ANGLE),
       );
       return;
     }
 
-    const nextAngle = clockwise ? this.rotation.value + angle : this.rotation.value - angle;
+    const nextAngle = clockwise ? currentRotation + angle : currentRotation - angle;
 
-    this.rotation.value = withTiming(nextAngle);
+    this.rotation?.set(withTiming(nextAngle));
   };
 
   zoomIn = (multiplier = 0.25) => {
@@ -193,21 +199,21 @@ class GestureViewerManager {
       return;
     }
 
-    const nextScale = Math.min(this.scale.value * (1 + multiplier), this.maxZoomScale);
+    const nextScale = Math.min(this.scale.get() * (1 + multiplier), this.maxZoomScale);
 
-    this.scale.value = withTiming(nextScale);
+    this.scale.set(withTiming(nextScale));
 
     const { translateX, translateY } = createBoundsConstraint({
       width: this.width,
       height: this.height,
     })({
-      translateX: this.translateX.value,
-      translateY: this.translateY.value,
+      translateX: this.translateX.get(),
+      translateY: this.translateY.get(),
       scale: nextScale,
     });
 
-    this.translateX.value = withTiming(translateX);
-    this.translateY.value = withTiming(translateY);
+    this.translateX.set(withTiming(translateX));
+    this.translateY.set(withTiming(translateY));
   };
 
   zoomOut = (multiplier = 0.25) => {
@@ -221,13 +227,13 @@ class GestureViewerManager {
       return;
     }
 
-    const nextScale = Math.max(this.scale.value / (1 + multiplier), 1);
+    const nextScale = Math.max(this.scale.get() / (1 + multiplier), 1);
 
-    this.scale.value = withTiming(nextScale);
+    this.scale.set(withTiming(nextScale));
 
     if (nextScale === 1) {
-      this.translateX.value = withTiming(0);
-      this.translateY.value = withTiming(0);
+      this.translateX.set(withTiming(0));
+      this.translateY.set(withTiming(0));
       return;
     }
 
@@ -235,13 +241,13 @@ class GestureViewerManager {
       width: this.width,
       height: this.height,
     })({
-      translateX: this.translateX.value,
-      translateY: this.translateY.value,
+      translateX: this.translateX.get(),
+      translateY: this.translateY.get(),
       scale: nextScale,
     });
 
-    this.translateX.value = withTiming(translateX);
-    this.translateY.value = withTiming(translateY);
+    this.translateX.set(withTiming(translateX));
+    this.translateY.set(withTiming(translateY));
   };
 
   resetZoom = (scale = 1) => {
@@ -255,9 +261,9 @@ class GestureViewerManager {
       return;
     }
 
-    this.scale.value = withTiming(scale);
-    this.translateX.value = withTiming(0);
-    this.translateY.value = withTiming(0);
+    this.scale.set(withTiming(scale));
+    this.translateX.set(withTiming(0));
+    this.translateY.set(withTiming(0));
   };
 
   goToIndex = (index: number) => {

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> = (