react-native-gesture-image-viewer 2.0.0-beta.4 → 2.0.0-beta.5

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

@@ -0,0 +1,55 @@
+import type { ReactElement } from 'react';
+/**
+ * Minimal contract for a pressable child's props.
+ * The child must optionally accept an `onPress` handler.
+ */
+type WithOnPress = {
+    onPress?: (...args: unknown[]) => void;
+};
+/**
+ * Props for `GestureTrigger`.
+ *
+ * @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 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;
+    children: ReactElement<T>;
+    onPress?: (...args: unknown[]) => void;
+};
+/**
+ * Wraps a pressable child element and registers its native view as a trigger for `GestureViewer`.
+ *
+ * @remark
+ * Behavior on press:
+ * - Registers the child's native node to the internal registry under the given `id`.
+ * - Invokes the child's own `onPress` first (if provided).
+ * - Invokes the `onPress` passed to `GestureTrigger` next (if provided).
+ *
+ * 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"`.
+ * - `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.
+ *
+ * Notes:
+ * - If neither the child nor this component provides `onPress`, a dev warning is logged and nothing happens on press.
+ * - Only a single child is allowed; wrap lists using `React.Children.map` when needed.
+ *
+ * Example:
+ * ```tsx
+ * <GestureTrigger id="gallery" 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 {};
+//# sourceMappingURL=GestureTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GestureTrigger.d.ts","sourceRoot":"","sources":["../../../src/GestureTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C;;;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,EAAE,EAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA6BlH"}

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

@@ -1 +1 @@
-{"version":3,"file":"GestureViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,UAAU,EAA+D,MAAM,cAAc,CAAC;AAItH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAKlD,wBAAgB,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,UAAU,EAAE,EAC7D,EAAc,EACd,IAAI,EACJ,UAAU,EAAE,cAAc,EAC1B,eAAe,EACf,aAAa,EACb,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,cAAsB,EACtB,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAwJ3B"}
+{"version":3,"file":"GestureViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,UAAU,EAA+D,MAAM,cAAc,CAAC;AAItH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAKlD,wBAAgB,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,UAAU,EAAE,EAC7D,EAAc,EACd,IAAI,EACJ,UAAU,EAAE,cAAc,EAC1B,eAAe,EACf,aAAa,EACb,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,cAAsB,EACtB,UAAkB,EAClB,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,2CA8J3B"}

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

@@ -1,12 +1,17 @@
+import type { View } from 'react-native';
 import GestureViewerManager from './GestureViewerManager';
 declare class GestureViewerRegistry {
     private managers;
     private subscribers;
+    private triggers;
     subscribeToManager(id: string, callback: (manager: GestureViewerManager | 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;
 }
 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,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,cAAM,qBAAqB;IACzB,OAAO,CAAC,QAAQ,CAA2C;IAC3D,OAAO,CAAC,WAAW,CAA0E;IAE7F,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;IAWxB,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,GAAG,IAAI;CAOnE;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;AACzC,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"}

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

@@ -1,3 +1,5 @@
+export type { GestureTriggerProps } from './GestureTrigger';
+export { GestureTrigger } from './GestureTrigger';
 export { GestureViewer } from './GestureViewer';
 export type { GestureViewerController, GestureViewerEventCallback, GestureViewerEventData, GestureViewerEventType, GestureViewerProps, GestureViewerState, } from './types';
 export { useGestureViewerController } from './useGestureViewerController';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,uBAAuB,EACvB,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -1,10 +1,33 @@
 import type React from 'react';
 import type { FlatList as RNFlatList, ScrollView as RNScrollView, StyleProp, ViewStyle } from 'react-native';
 import type { FlatList as GHFlatList, ScrollView as GHScrollView } from 'react-native-gesture-handler';
+import type { WithTimingConfig } from 'react-native-reanimated';
 export type FlatListComponent = typeof RNFlatList | typeof GHFlatList;
 export type ScrollViewComponent = typeof RNScrollView | typeof GHScrollView;
 type GetComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;
 type ConditionalListProps<LC> = LC extends FlatListComponent ? React.ComponentProps<LC> : LC extends ScrollViewComponent ? React.ComponentProps<LC> : GetComponentProps<LC>;
+export type TriggerRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface TriggerAnimationConfig extends WithTimingConfig {
+    /**
+     * Animation duration in milliseconds
+     * @defaultValue 300
+     */
+    duration?: WithTimingConfig['duration'];
+    /**
+     * Animation easing function
+     * @defaultValue Easing.bezier(0.25, 0.1, 0.25, 1.0)
+     */
+    easing?: WithTimingConfig['easing'];
+    /**
+     * Callback function called after animation completion
+     */
+    onAnimationComplete?: () => void;
+}
 export interface GestureViewerProps<T = any, LC = typeof RNScrollView> {
     /**
      * When you want to efficiently manage multiple `GestureViewer` instances, you can use the `id` prop to use multiple `GestureViewer` components.
@@ -25,14 +48,27 @@ export interface GestureViewerProps<T = any, LC = typeof RNScrollView> {
      * A callback function that is called when the `GestureViewer` is dismissed.
      */
     onDismiss?: () => void;
+    /**
+     * A callback function that is called when the dismiss interaction starts.
+     * @remarks Useful to hide external UI (e.g., headers, buttons) while the dismiss gesture/animation is in progress.
+     */
+    onDismissStart?: () => void;
     /**
      * A callback function that is called to render the item.
      */
     renderItem: (item: T, index: number) => React.ReactElement;
     /**
      * A callback function that is called to render the container.
+     * @remarks Useful for composing additional UI (e.g., close button, toolbars) around the viewer.
+     * The second argument provides control helpers such as `dismiss()` to close the viewer.
+     *
+     * @param children - The viewer content to be rendered inside your container.
+     * @param helpers - Control helpers for the viewer. Currently includes `dismiss()`.
+     * @returns A React element that wraps and renders the provided `children`.
      */
-    renderContainer?: (children: React.ReactElement) => React.ReactElement;
+    renderContainer?: (children: React.ReactElement, helpers: {
+        dismiss: () => void;
+    }) => React.ReactElement;
     /**
      * Support for any list component like `ScrollView`, `FlatList`, `FlashList` through the `ListComponent` prop.
      */
@@ -137,6 +173,25 @@ export interface GestureViewerProps<T = any, LC = typeof RNScrollView> {
      * @defaultValue 2
      */
     maxZoomScale?: number;
+    /**
+     * Trigger-based animation settings
+     * @remarks You can customize animation duration, easing, and system reduce-motion behavior.
+     *
+     * @example
+     * ```tsx
+     * <GestureViewer
+     *   triggerAnimation={{
+     *     duration: 250,
+     *     easing: Easing.out(Easing.cubic),
+     *     reduceMotion: 'system',
+     *     onAnimationComplete: () => {
+     *       console.log('Animation complete');
+     *     },
+     *   }}
+     * />
+     * ```
+     */
+    triggerAnimation?: TriggerAnimationConfig;
 }
 /**
  * Supported rotation angles in degrees.

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,8 @@
 import { type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';
 import type { GestureViewerProps } from './types';
 type UseGestureViewerProps<T = any> = Omit<GestureViewerProps<T>, 'renderItem' | 'renderContainer' | 'ListComponent' | 'listProps' | 'containerStyle' | 'backdropStyle'>;
-export declare const useGestureViewer: <T = any>({ data, initialIndex, onDismiss, width: customWidth, dismiss, enableDoubleTapZoom, enablePinchZoom, enableHorizontalSwipe, enablePanWhenZoomed, enableLoop, maxZoomScale, itemSpacing, enableSnapMode, id, }: UseGestureViewerProps<T>) => {
+export declare const useGestureViewer: <T = any>({ data, initialIndex, onDismiss, width: customWidth, dismiss, enableDoubleTapZoom, enablePinchZoom, enableHorizontalSwipe, enablePanWhenZoomed, enableLoop, maxZoomScale, itemSpacing, enableSnapMode, id, onDismissStart, triggerAnimation, }: UseGestureViewerProps<T>) => {
     dataLength: number;
-    translateY: import("react-native-reanimated").SharedValue<number>;
     listRef: import("react").RefObject<any>;
     isZoomed: boolean;
     isRotated: boolean;
@@ -11,26 +10,28 @@ export declare const useGestureViewer: <T = any>({ data, initialIndex, onDismiss
     zoomGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").ComposedGesture;
     onMomentumScrollEnd: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollBeginDrag: () => void;
+    handleDismiss: () => void;
     animatedStyle: {
+        opacity: number;
         transform: ({
-            translateY: number;
-            translateX?: undefined;
+            translateX: number;
+            translateY?: undefined;
             scale?: undefined;
             rotate?: undefined;
         } | {
-            translateX: number;
-            translateY?: undefined;
+            translateY: number;
+            translateX?: undefined;
             scale?: undefined;
             rotate?: undefined;
         } | {
             scale: number;
-            translateY?: undefined;
             translateX?: undefined;
+            translateY?: undefined;
             rotate?: undefined;
         } | {
             rotate: string;
-            translateY?: undefined;
             translateX?: undefined;
+            translateY?: undefined;
             scale?: undefined;
         })[];
     };

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

@@ -1 +1 @@
-{"version":3,"file":"useGestureViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,KAAK,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CACxC,kBAAkB,CAAC,CAAC,CAAC,EACrB,YAAY,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACtG,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,GAAG,GAAG,EAAE,8MAevC,qBAAqB,CAAC,CAAC,CAAC;;;;;;;;iCA+Jf,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSlD,CAAC"}
+{"version":3,"file":"useGestureViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,kBAAkB,EAAe,MAAM,SAAS,CAAC;AAG/D,KAAK,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CACxC,kBAAkB,CAAC,CAAC,CAAC,EACrB,YAAY,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACtG,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,GAAG,GAAG,EAAE,gPAiBvC,qBAAqB,CAAC,CAAC,CAAC;;;;;;;iCAuRf,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0SlD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "🖼️ A highly customizable and easy-to-use React Native image viewer with gesture support and external controls",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/GestureTrigger.tsx

@@ -0,0 +1,86 @@
+import type { ReactElement } from 'react';
+import { Children, cloneElement, isValidElement, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { registry } from './GestureViewerRegistry';
+
+/**
+ * Minimal contract for a pressable child's props.
+ * The child must optionally accept an `onPress` handler.
+ */
+type WithOnPress = { onPress?: (...args: unknown[]) => void };
+
+/**
+ * Props for `GestureTrigger`.
+ *
+ * @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 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;
+  children: ReactElement<T>;
+  onPress?: (...args: unknown[]) => void;
+};
+
+/**
+ * Wraps a pressable child element and registers its native view as a trigger for `GestureViewer`.
+ *
+ * @remark
+ * Behavior on press:
+ * - Registers the child's native node to the internal registry under the given `id`.
+ * - Invokes the child's own `onPress` first (if provided).
+ * - Invokes the `onPress` passed to `GestureTrigger` next (if provided).
+ *
+ * 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"`.
+ * - `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.
+ *
+ * Notes:
+ * - If neither the child nor this component provides `onPress`, a dev warning is logged and nothing happens on press.
+ * - Only a single child is allowed; wrap lists using `React.Children.map` when needed.
+ *
+ * Example:
+ * ```tsx
+ * <GestureTrigger id="gallery" onPress={() => openModal(index)}>
+ *   <Pressable style={styles.thumb}>
+ *     <Image source={{ uri }} style={styles.thumbImage} />
+ *   </Pressable>
+ * </GestureTrigger>
+ * ```
+ */
+export function GestureTrigger<T extends WithOnPress>({ id = 'default', children, onPress }: GestureTriggerProps<T>) {
+  const ref = useRef<View>(null);
+
+  const wrapped = useMemo(() => {
+    const child = Children.only(children);
+
+    if (!isValidElement(child)) {
+      return children;
+    }
+
+    const originalOnPress = child.props?.onPress;
+
+    const handlePress = (...args: unknown[]) => {
+      registry.setTriggerNode(id, ref.current);
+      originalOnPress?.(...args);
+      onPress?.(...args);
+
+      if (__DEV__ && !originalOnPress && !onPress) {
+        console.warn('[GestureTrigger] No onPress found on child or props. Nothing will happen on press.');
+      }
+    };
+
+    return cloneElement(child, {
+      ...child.props,
+      onPress: handlePress,
+    });
+  }, [id, onPress, children]);
+
+  return <View ref={ref}>{wrapped}</View>;
+}

package/src/GestureViewer.tsx

@@ -27,7 +27,6 @@ export function GestureViewer<T = any, LC = typeof ScrollView>({
   const Component = ListComponent as React.ComponentType<any>;
 
   const dataRef = useRef(data);
-  dataRef.current = data;
 
   const { width: screenWidth } = useWindowDimensions();
 
@@ -47,6 +46,7 @@ export function GestureViewer<T = any, LC = typeof ScrollView>({
     onScrollBeginDrag,
     animatedStyle,
     backdropStyle,
+    handleDismiss,
   } = useGestureViewer({
     id,
     data,
@@ -104,6 +104,10 @@ export function GestureViewer<T = any, LC = typeof ScrollView>({
     return Gesture.Race(dismissGesture, zoomGesture);
   }, [zoomGesture, dismissGesture]);
 
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
   useEffect(() => {
     registry.createManager(id);
 
@@ -133,6 +137,8 @@ export function GestureViewer<T = any, LC = typeof ScrollView>({
     [width, itemSpacing, isZoomed, isRotated, onMomentumScrollEnd, onScrollBeginDrag, enableSnapMode],
   );
 
+  const control = useMemo(() => ({ dismiss: handleDismiss }), [handleDismiss]);
+
   const listComponent = (
     <GestureHandlerRootView>
       <GestureDetector gesture={gesture}>
@@ -174,7 +180,7 @@ export function GestureViewer<T = any, LC = typeof ScrollView>({
     </GestureHandlerRootView>
   );
 
-  return renderContainer ? renderContainer(listComponent) : listComponent;
+  return renderContainer ? renderContainer(listComponent, control) : listComponent;
 }
 
 const styles = StyleSheet.create({

package/src/GestureViewerRegistry.ts

@@ -1,8 +1,10 @@
+import type { View } from 'react-native';
 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>();
 
   subscribeToManager(id: string, callback: (manager: GestureViewerManager | null) => void) {
     if (!this.subscribers.has(id)) {
@@ -51,6 +53,8 @@ class GestureViewerRegistry {
       this.managers.delete(id);
 
       this.notifySubscribers(id, null);
+
+      this.triggers.delete(id);
     }
   }
 
@@ -61,6 +65,18 @@ class GestureViewerRegistry {
       [...listeners].forEach((callback) => callback(manager));
     }
   }
+
+  setTriggerNode(id: string, node: View | null) {
+    this.triggers.set(id, node);
+  }
+
+  getTriggerNode(id: string): View | null {
+    return this.triggers.get(id) ?? null;
+  }
+
+  clearTriggerNode(id: string) {
+    this.triggers.delete(id);
+  }
 }
 
 export const registry = new GestureViewerRegistry();

package/src/index.tsx

@@ -1,3 +1,5 @@
+export type { GestureTriggerProps } from './GestureTrigger';
+export { GestureTrigger } from './GestureTrigger';
 export { GestureViewer } from './GestureViewer';
 export type {
   GestureViewerController,

package/src/types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { FlatList as RNFlatList, ScrollView as RNScrollView, StyleProp, ViewStyle } from 'react-native';
 import type { FlatList as GHFlatList, ScrollView as GHScrollView } from 'react-native-gesture-handler';
+import type { WithTimingConfig } from 'react-native-reanimated';
 
 export type FlatListComponent = typeof RNFlatList | typeof GHFlatList;
 export type ScrollViewComponent = typeof RNScrollView | typeof GHScrollView;
@@ -13,6 +14,30 @@ type ConditionalListProps<LC> = LC extends FlatListComponent
     ? React.ComponentProps<LC>
     : GetComponentProps<LC>;
 
+export type TriggerRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export interface TriggerAnimationConfig extends WithTimingConfig {
+  /**
+   * Animation duration in milliseconds
+   * @defaultValue 300
+   */
+  duration?: WithTimingConfig['duration'];
+  /**
+   * Animation easing function
+   * @defaultValue Easing.bezier(0.25, 0.1, 0.25, 1.0)
+   */
+  easing?: WithTimingConfig['easing'];
+  /**
+   * Callback function called after animation completion
+   */
+  onAnimationComplete?: () => void;
+}
+
 export interface GestureViewerProps<T = any, LC = typeof RNScrollView> {
   /**
    * When you want to efficiently manage multiple `GestureViewer` instances, you can use the `id` prop to use multiple `GestureViewer` components.
@@ -33,14 +58,25 @@ export interface GestureViewerProps<T = any, LC = typeof RNScrollView> {
    * A callback function that is called when the `GestureViewer` is dismissed.
    */
   onDismiss?: () => void;
+  /**
+   * A callback function that is called when the dismiss interaction starts.
+   * @remarks Useful to hide external UI (e.g., headers, buttons) while the dismiss gesture/animation is in progress.
+   */
+  onDismissStart?: () => void;
   /**
    * A callback function that is called to render the item.
    */
   renderItem: (item: T, index: number) => React.ReactElement;
   /**
    * A callback function that is called to render the container.
+   * @remarks Useful for composing additional UI (e.g., close button, toolbars) around the viewer.
+   * The second argument provides control helpers such as `dismiss()` to close the viewer.
+   *
+   * @param children - The viewer content to be rendered inside your container.
+   * @param helpers - Control helpers for the viewer. Currently includes `dismiss()`.
+   * @returns A React element that wraps and renders the provided `children`.
    */
-  renderContainer?: (children: React.ReactElement) => React.ReactElement;
+  renderContainer?: (children: React.ReactElement, helpers: { dismiss: () => void }) => React.ReactElement;
   /**
    * Support for any list component like `ScrollView`, `FlatList`, `FlashList` through the `ListComponent` prop.
    */
@@ -145,6 +181,25 @@ export interface GestureViewerProps<T = any, LC = typeof RNScrollView> {
    * @defaultValue 2
    */
   maxZoomScale?: number;
+  /**
+   * Trigger-based animation settings
+   * @remarks You can customize animation duration, easing, and system reduce-motion behavior.
+   *
+   * @example
+   * ```tsx
+   * <GestureViewer
+   *   triggerAnimation={{
+   *     duration: 250,
+   *     easing: Easing.out(Easing.cubic),
+   *     reduceMotion: 'system',
+   *     onAnimationComplete: () => {
+   *       console.log('Animation complete');
+   *     },
+   *   }}
+   * />
+   * ```
+   */
+  triggerAnimation?: TriggerAnimationConfig;
 }
 
 /**