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

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

@@ -3,7 +3,7 @@ import type { GestureViewerController } from './types';
  * Hook to control the gesture viewer programmatically.
  *
  * @param id - Viewer instance identifier (default: 'default')
- * @returns Methods and state for controlling the viewer
+ * @returns Methods for controlling the viewer
  *
  * **Available methods:**
  * - `goToIndex(index: number)` - Navigate to specific index (0 to totalCount-1)
@@ -12,43 +12,32 @@ import type { GestureViewerController } from './types';
  * - `zoomIn(multiplier?: number)` - Zoom in (default: 0.25)
  * - `zoomOut(multiplier?: number)` - Zoom out (default: 0.25)
  * - `resetZoom(scale?: number)` - Reset zoom level (default: 1.0)
- * - `rotate(angle?: 0|90|180|270|360, clockwise?: boolean)` - Rotate content (default: 90° clockwise)
- *
- * **Available state:**
- * - `currentIndex: number` - Current active index (read-only)
- * - `totalCount: number` - Total number of items (read-only)
+ * - `rotate(angle?: RotationAngle, clockwise?: boolean)` - Rotate content (default: 90° clockwise)
  *
  * @example
  * ```tsx
- * const { goToIndex, goToNext, goToPrevious, zoomIn, zoomOut, resetZoom, rotate, currentIndex, totalCount } = useGestureViewerController();
+ * const controller = useGestureViewerController();
  *
  * // Navigate to specific index
- * goToIndex(2);
+ * controller.goToIndex(2);
  *
  * // Go to next image
- * goToNext();
+ * controller.goToNext();
  *
  * // Zoom in by 25%
- * zoomIn();
+ * controller.zoomIn();
  *
  * // Zoom out by 50%
- * zoomOut(0.5);
+ * controller.zoomOut(0.5);
  *
  * // Reset to original size
- * resetZoom();
+ * controller.resetZoom();
  *
  * // Rotate 90 degrees clockwise
- * rotate();
+ * controller.rotate();
  *
  * // Rotate 180 degrees
- * rotate(180);
- *
- * // Check current state
- * console.log(`Image ${currentIndex + 1} of ${totalCount}`);
- *
- * // Check navigation availability
- * const canGoNext = currentIndex < totalCount - 1;
- * const canGoPrevious = currentIndex > 0;
+ * controller.rotate(180);
  * ```
  */
 export declare const useGestureViewerController: (id?: string) => GestureViewerController;

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

@@ -1 +1 @@
-{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAgC,MAAM,SAAS,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,0BAA0B,GAAI,WAAc,KAAG,uBAmF3D,CAAC"}
+{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,0BAA0B,GAAI,WAAc,KAAG,uBAqC3D,CAAC"}

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

@@ -0,0 +1,35 @@
+import type { GestureViewerState } from './types';
+/**
+ * Hook to access the current state of the gesture viewer.
+ *
+ * @param id - Viewer instance identifier (default: 'default')
+ * @returns Current state of the viewer
+ *
+ * **Available state:**
+ * - `currentIndex: number` - Current active index (read-only)
+ * - `totalCount: number` - Total number of items (read-only)
+ *
+ * @example
+ * ```tsx
+ * const { currentIndex, totalCount } = useGestureViewerState();
+ *
+ * // Display current position
+ * return (
+ *   <Text>
+ *     {currentIndex + 1} / {totalCount}
+ *   </Text>
+ * );
+ *
+ * // React to index changes
+ * useEffect(() => {
+ *   console.log(`Moved to image ${currentIndex + 1}`);
+ *   trackPageView(currentIndex);
+ * }, [currentIndex]);
+ *
+ * // Check navigation availability
+ * const canGoNext = currentIndex < totalCount - 1;
+ * const canGoPrevious = currentIndex > 0;
+ * ```
+ */
+export declare const useGestureViewerState: (id?: string) => GestureViewerState;
+//# sourceMappingURL=useGestureViewerState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGestureViewerState.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,qBAAqB,GAAI,WAAc,KAAG,kBAgDtD,CAAC"}

package/package.json

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { type FlatList, Platform, type ScrollViewProps, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { Platform, type ScrollView, type ScrollViewProps, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import { registry } from './GestureViewerRegistry';
@@ -8,7 +8,7 @@ import { useGestureViewer } from './useGestureViewer';
 import { createLoopData, isFlashListLike, isFlatListLike, isScrollViewLike } from './utils';
 import WebPagingFixStyle from './WebPagingFixStyle';
 
-export function GestureViewer<T = any, LC = typeof FlatList>({
+export function GestureViewer<T = any, LC = typeof ScrollView>({
   id = 'default',
   data,
   renderItem: renderItemProp,
@@ -20,18 +20,17 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
   containerStyle,
   initialIndex = 0,
   itemSpacing = 0,
-  useSnap = false,
+  enableSnapMode = false,
   enableLoop = false,
   ...props
 }: GestureViewerProps<T, LC>) {
   const Component = ListComponent as React.ComponentType<any>;
 
   const dataRef = useRef(data);
-  dataRef.current = data;
 
   const { width: screenWidth } = useWindowDimensions();
 
-  const width = useSnap ? customWidth || screenWidth : screenWidth;
+  const width = enableSnapMode ? customWidth || screenWidth : screenWidth;
 
   const loopData = useMemo(() => createLoopData(dataRef, enableLoop), [enableLoop]);
 
@@ -47,13 +46,14 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
     onScrollBeginDrag,
     animatedStyle,
     backdropStyle,
+    handleDismiss,
   } = useGestureViewer({
     id,
     data,
     width,
     initialIndex,
     itemSpacing,
-    useSnap,
+    enableSnapMode,
     enableLoop,
     ...props,
   });
@@ -104,6 +104,10 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
     return Gesture.Race(dismissGesture, zoomGesture);
   }, [zoomGesture, dismissGesture]);
 
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
   useEffect(() => {
     registry.createManager(id);
 
@@ -118,7 +122,7 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
         showsHorizontalScrollIndicator: false,
         onMomentumScrollEnd: onMomentumScrollEnd,
         onScrollBeginDrag,
-        ...(useSnap
+        ...(enableSnapMode
           ? {
               snapToInterval: width + itemSpacing,
               snapToAlignment: 'center',
@@ -130,9 +134,11 @@ export function GestureViewer<T = any, LC = typeof FlatList>({
         scrollEventThrottle: 16,
         removeClippedSubviews: true,
       }) satisfies ScrollViewProps,
-    [width, itemSpacing, isZoomed, isRotated, onMomentumScrollEnd, onScrollBeginDrag, useSnap],
+    [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 FlatList>({
     </GestureHandlerRootView>
   );
 
-  return renderContainer ? renderContainer(listComponent) : listComponent;
+  return renderContainer ? renderContainer(listComponent, control) : listComponent;
 }
 
 const styles = StyleSheet.create({

package/src/GestureViewerManager.ts

@@ -1,9 +1,9 @@
 import { type SharedValue, withTiming } from 'react-native-reanimated';
 import type {
-  GestureViewerControllerState,
   GestureViewerEventCallback,
   GestureViewerEventData,
   GestureViewerEventType,
+  GestureViewerState,
 } from './types';
 import { createBoundsConstraint, createScrollAction } from './utils';
 
@@ -13,7 +13,7 @@ class GestureViewerManager {
   private width = 0;
   private height = 0;
   private maxZoomScale = 2;
-  private enableSwipeGesture = true;
+  private enableHorizontalSwipe = true;
   private enableLoop = false;
   private listRef: any | null = null;
 
@@ -24,7 +24,7 @@ class GestureViewerManager {
 
   private loopCallback: (() => void) | null = null;
 
-  private listeners = new Set<(state: GestureViewerControllerState) => void>();
+  private listeners = new Set<(state: GestureViewerState) => void>();
   private eventListeners = new Map<GestureViewerEventType, Set<(data: any) => void>>();
 
   private notifyListeners() {
@@ -33,7 +33,7 @@ class GestureViewerManager {
     this.listeners.forEach((listener) => listener(state));
   }
 
-  subscribe(listener: (state: GestureViewerControllerState) => void) {
+  subscribe(listener: (state: GestureViewerState) => void) {
     this.listeners.add(listener);
 
     return () => {
@@ -77,7 +77,7 @@ class GestureViewerManager {
     this.emitEvent('rotationChange', { rotation, previousRotation });
   };
 
-  getState() {
+  getState(): GestureViewerState {
     return {
       currentIndex: this.currentIndex,
       totalCount: this.dataLength,
@@ -104,8 +104,8 @@ class GestureViewerManager {
     this.dataLength = length;
   }
 
-  setEnableSwipeGesture(enabled: boolean) {
-    this.enableSwipeGesture = enabled;
+  setEnableHorizontalSwipe(enabled: boolean) {
+    this.enableHorizontalSwipe = enabled;
   }
 
   setCurrentIndex(index: number) {
@@ -224,7 +224,7 @@ class GestureViewerManager {
   };
 
   goToIndex = (index: number) => {
-    if (!this.enableSwipeGesture || !this.listRef) {
+    if (!this.enableHorizontalSwipe || !this.listRef) {
       return;
     }
 
@@ -299,7 +299,7 @@ class GestureViewerManager {
     this.loopCallback = null;
     this.listeners.clear();
     this.listRef = null;
-    this.enableSwipeGesture = true;
+    this.enableHorizontalSwipe = true;
     this.currentIndex = 0;
     this.dataLength = 0;
     this.maxZoomScale = 2;

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,11 +1,14 @@
+export type { GestureTriggerProps } from './GestureTrigger';
+export { GestureTrigger } from './GestureTrigger';
 export { GestureViewer } from './GestureViewer';
 export type {
   GestureViewerController,
-  GestureViewerControllerState,
   GestureViewerEventCallback,
   GestureViewerEventData,
   GestureViewerEventType,
   GestureViewerProps,
+  GestureViewerState,
 } from './types';
 export { useGestureViewerController } from './useGestureViewerController';
 export { useGestureViewerEvent } from './useGestureViewerEvent';
+export { useGestureViewerState } from './useGestureViewerState';