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

package/src/useGestureViewer.ts

@@ -18,7 +18,7 @@ import {
 import { runOnJS } from 'react-native-worklets';
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
-import type { GestureViewerProps } from './types';
+import type { GestureViewerProps, TriggerRect } from './types';
 import { createBoundsConstraint, createScrollAction, getLoopAdjustedIndex } from './utils';
 
 type UseGestureViewerProps<T = any> = Omit<
@@ -29,36 +29,32 @@ type UseGestureViewerProps<T = any> = Omit<
 export const useGestureViewer = <T = any>({
   data,
   initialIndex = 0,
-  onIndexChange,
   onDismiss,
   width: customWidth,
-  dismissThreshold = 80,
-  resistance = 2,
-  // swipeThreshold = 0.5,
-  // velocityThreshold = 200,
-  animateBackdrop = true,
-  enableDismissGesture = true,
-  enableSwipeGesture = true,
-  enableZoomGesture = true,
-  enableDoubleTapGesture = true,
-  enableZoomPanGesture = true,
+  dismiss,
+  enableDoubleTapZoom = true,
+  enablePinchZoom = true,
+  enableHorizontalSwipe = true,
+  enablePanWhenZoomed = true,
   enableLoop = false,
   maxZoomScale = 2,
   itemSpacing = 0,
-  useSnap = false,
+  enableSnapMode = false,
   id = 'default',
+  onDismissStart,
+  triggerAnimation,
 }: UseGestureViewerProps<T>) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const width = useSnap ? customWidth || screenWidth : screenWidth;
+  const width = enableSnapMode ? customWidth || screenWidth : screenWidth;
 
   const [isZoomed, setIsZoomed] = useState(false);
   const [isRotated, setIsRotated] = useState(false);
+  const [shouldStartTriggerAnimation, setShouldStartTriggerAnimation] = useState(false);
   const [manager, setManager] = useState<GestureViewerManager | null>(null);
 
   const listRef = useRef<any>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-  const onIndexChangeRef = useRef<((index: number) => void) | null>(null);
-  const lastEmittedIndexRef = useRef<number>(null);
+  const triggerRectRef = useRef<TriggerRect | null>(null);
+  const onAnimationCompleteRef = useRef(triggerAnimation?.onAnimationComplete);
 
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
@@ -70,8 +66,31 @@ export const useGestureViewer = <T = any>({
   const backdropOpacity = useSharedValue(1);
   const rotation = useSharedValue(0);
 
+  const triggerScale = useSharedValue(1);
+  const triggerTranslateX = useSharedValue(0);
+  const triggerTranslateY = useSharedValue(0);
+  const triggerOpacity = useSharedValue(1);
+
   const dataLength = data?.length || 0;
 
+  const animationConfig = useMemo(
+    () => ({
+      duration: triggerAnimation?.duration ?? 300,
+      easing: triggerAnimation?.easing ?? Easing.bezier(0.25, 0.1, 0.25, 1.0),
+      reduceMotion: triggerAnimation?.reduceMotion,
+    }),
+    [triggerAnimation?.duration, triggerAnimation?.easing, triggerAnimation?.reduceMotion],
+  );
+
+  const dismissOptions = useMemo(() => {
+    return {
+      enabled: dismiss?.enabled ?? true,
+      threshold: dismiss?.threshold ?? 80,
+      resistance: dismiss?.resistance ?? 2,
+      fadeBackdrop: dismiss?.fadeBackdrop ?? true,
+    };
+  }, [dismiss?.enabled, dismiss?.threshold, dismiss?.resistance, dismiss?.fadeBackdrop]);
+
   const adjustedInitialIndex = useMemo(() => {
     if (enableLoop && data.length > 1) {
       return initialIndex + 1;
@@ -96,22 +115,30 @@ export const useGestureViewer = <T = any>({
 
   const emitZoomChange = useCallback(
     (currentScale: number, prevScale: number | null) => {
-      manager?.emitZoomChange(currentScale, prevScale);
+      if (manager) {
+        manager.emitZoomChange(currentScale, prevScale);
+      }
     },
     [manager],
   );
 
   const emitRotationChange = useCallback(
     (currentRotation: number, prevRotation: number | null) => {
-      manager?.emitRotationChange(currentRotation, prevRotation);
+      if (manager) {
+        manager.emitRotationChange(currentRotation, prevRotation);
+      }
     },
     [manager],
   );
 
+  const onAnimationComplete = useCallback(() => {
+    onAnimationCompleteRef.current?.();
+  }, []);
+
   useAnimatedReaction(
     () => scale.value,
     (currentScale, previousScale) => {
-      if (manager && currentScale !== previousScale) {
+      if (currentScale !== previousScale) {
         runOnJS(emitZoomChange)(currentScale, previousScale);
       }
 
@@ -122,7 +149,7 @@ export const useGestureViewer = <T = any>({
   useAnimatedReaction(
     () => rotation.value,
     (currentRotation, previousRotation) => {
-      if (manager && currentRotation !== previousRotation) {
+      if (currentRotation !== previousRotation) {
         runOnJS(emitRotationChange)(currentRotation, previousRotation);
       }
 
@@ -131,41 +158,9 @@ export const useGestureViewer = <T = any>({
   );
 
   useEffect(() => {
-    onIndexChangeRef.current = onIndexChange ?? null;
-  });
+    const unsubscribe = registry.subscribeToManager(id, setManager);
 
-  useEffect(() => {
-    return () => {
-      onIndexChangeRef.current = null;
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleManagerChange = (manager: GestureViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-
-      setManager(manager);
-
-      lastEmittedIndexRef.current = null;
-
-      if (manager) {
-        unsubscribeRef.current = manager.subscribe((state) => {
-          if (lastEmittedIndexRef.current !== state.currentIndex) {
-            lastEmittedIndexRef.current = state.currentIndex;
-            onIndexChangeRef.current?.(state.currentIndex);
-          }
-        });
-        return;
-      }
-    };
-
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
+    return unsubscribe;
   }, [id]);
 
   useEffect(() => {
@@ -174,7 +169,7 @@ export const useGestureViewer = <T = any>({
     }
 
     manager.setDataLength(dataLength);
-    manager.setEnableSwipeGesture(enableSwipeGesture);
+    manager.setEnableHorizontalSwipe(enableHorizontalSwipe);
     manager.setCurrentIndex(initialIndex);
     manager.setWidth(width + itemSpacing);
     manager.setHeight(screenHeight);
@@ -184,7 +179,7 @@ export const useGestureViewer = <T = any>({
     manager.notifyStateChange();
   }, [
     dataLength,
-    enableSwipeGesture,
+    enableHorizontalSwipe,
     initialIndex,
     manager,
     width,
@@ -227,9 +222,108 @@ export const useGestureViewer = <T = any>({
     };
   }, [adjustedInitialIndex, translateY, backdropOpacity, translateX, scale, startScale, rotation, scrollTo]);
 
+  useEffect(() => {
+    onAnimationCompleteRef.current = triggerAnimation?.onAnimationComplete;
+  }, [triggerAnimation?.onAnimationComplete]);
+
+  useEffect(() => {
+    if (shouldStartTriggerAnimation && triggerRectRef.current) {
+      const startX = triggerRectRef.current.x + triggerRectRef.current.width / 2 - screenWidth / 2;
+      const startY = triggerRectRef.current.y + triggerRectRef.current.height / 2 - screenHeight / 2;
+      const initialScaleFromTrigger = Math.min(
+        triggerRectRef.current.width / screenWidth,
+        triggerRectRef.current.height / screenHeight,
+      );
+
+      triggerScale.value = initialScaleFromTrigger;
+      triggerTranslateX.value = startX;
+      triggerTranslateY.value = startY;
+      triggerOpacity.value = 0;
+
+      triggerScale.value = withTiming(1, animationConfig, (finished) => {
+        if (finished) {
+          runOnJS(onAnimationComplete)();
+        }
+      });
+      triggerTranslateX.value = withTiming(0, animationConfig);
+      triggerTranslateY.value = withTiming(0, animationConfig);
+      triggerOpacity.value = withTiming(1, {
+        duration: animationConfig.duration / 2,
+        easing: animationConfig.easing,
+        reduceMotion: animationConfig.reduceMotion,
+      });
+
+      setShouldStartTriggerAnimation(false);
+    }
+  }, [
+    shouldStartTriggerAnimation,
+    animationConfig,
+    screenWidth,
+    screenHeight,
+    triggerOpacity,
+    triggerScale,
+    triggerTranslateX,
+    triggerTranslateY,
+    onAnimationComplete,
+  ]);
+
+  useEffect(() => {
+    const node = registry.getTriggerNode(id);
+
+    if (node && typeof node.measure === 'function') {
+      node.measure((_x, _y, width, height, pageX, pageY) => {
+        triggerRectRef.current = { x: pageX, y: pageY, width, height };
+        triggerOpacity.value = 0;
+        setShouldStartTriggerAnimation(true);
+        registry.clearTriggerNode(id);
+      });
+    }
+
+    return () => {
+      triggerRectRef.current = null;
+    };
+  }, [id, triggerOpacity]);
+
+  const handleDismiss = useCallback(() => {
+    onDismissStart?.();
+
+    if (triggerRectRef.current) {
+      const endX = triggerRectRef.current.x + triggerRectRef.current.width / 2 - screenWidth / 2;
+      const endY = triggerRectRef.current.y + triggerRectRef.current.height / 2 - screenHeight / 2;
+      const endScale = Math.min(
+        triggerRectRef.current.width / screenWidth,
+        triggerRectRef.current.height / screenHeight,
+      );
+
+      triggerScale.value = withTiming(endScale, animationConfig);
+      triggerTranslateX.value = withTiming(endX, animationConfig);
+      triggerTranslateY.value = withTiming(endY, animationConfig);
+      triggerOpacity.value = withTiming(0, animationConfig, (finished) => {
+        if (finished && onDismiss) {
+          runOnJS(onDismiss)();
+        }
+      });
+      return;
+    }
+
+    if (onDismiss) {
+      runOnJS(onDismiss)();
+    }
+  }, [
+    animationConfig,
+    onDismiss,
+    onDismissStart,
+    screenWidth,
+    screenHeight,
+    triggerTranslateX,
+    triggerScale,
+    triggerTranslateY,
+    triggerOpacity,
+  ]);
+
   const onMomentumScrollEnd = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableSwipeGesture) {
+      if (!enableHorizontalSwipe) {
         return;
       }
 
@@ -248,7 +342,7 @@ export const useGestureViewer = <T = any>({
         scrollTo(jumpToIndex, false);
       }
 
-      const currentIndex = manager?.getState() ?? 0;
+      const currentIndex = manager?.getState()?.currentIndex;
 
       if (realIndex !== currentIndex && realIndex >= 0 && realIndex < dataLength) {
         if (manager) {
@@ -271,7 +365,7 @@ export const useGestureViewer = <T = any>({
       dataLength,
       width,
       itemSpacing,
-      enableSwipeGesture,
+      enableHorizontalSwipe,
       enableLoop,
       translateX,
       translateY,
@@ -284,19 +378,21 @@ export const useGestureViewer = <T = any>({
   );
 
   const dismissGesture = useMemo(() => {
+    const canDismiss = !isZoomed && dismissOptions.enabled;
+
     return Gesture.Pan()
       .minDistance(10)
       .averageTouches(true)
       .activeCursor('grabbing')
       .activeOffsetY([-10, 10])
       .failOffsetX([-10, 10])
-      .enabled(!isZoomed)
+      .enabled(canDismiss)
       .onUpdate((event) => {
-        translateY.value = event.translationY / resistance;
+        translateY.value = event.translationY / dismissOptions.resistance;
       })
       .onEnd((event) => {
-        if (event.translationY > dismissThreshold && enableDismissGesture && onDismiss) {
-          runOnJS(onDismiss)();
+        if (canDismiss && event.translationY > dismissOptions.threshold) {
+          runOnJS(handleDismiss)();
           return;
         }
 
@@ -308,11 +404,11 @@ export const useGestureViewer = <T = any>({
           energyThreshold: 6e-9,
         });
       });
-  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance, isZoomed]);
+  }, [translateY, dismissOptions, handleDismiss, isZoomed]);
 
   const zoomPinchGesture = useMemo(() => {
     return Gesture.Pinch()
-      .enabled(enableZoomGesture)
+      .enabled(enablePinchZoom)
       .onBegin(() => {
         startScale.value = scale.value;
         initialTranslateX.value = translateX.value;
@@ -388,7 +484,7 @@ export const useGestureViewer = <T = any>({
       });
   }, [
     scale,
-    enableZoomGesture,
+    enablePinchZoom,
     maxZoomScale,
     translateX,
     translateY,
@@ -402,7 +498,7 @@ export const useGestureViewer = <T = any>({
 
   const zoomPanGesture = useMemo(() => {
     return Gesture.Pan()
-      .enabled(enableZoomPanGesture && isZoomed)
+      .enabled(enablePanWhenZoomed && isZoomed)
       .activeCursor('grabbing')
       .averageTouches(true)
       .onBegin(() => {
@@ -427,7 +523,7 @@ export const useGestureViewer = <T = any>({
   }, [
     translateX,
     translateY,
-    enableZoomPanGesture,
+    enablePanWhenZoomed,
     isZoomed,
     scale,
     initialTranslateX,
@@ -437,7 +533,7 @@ export const useGestureViewer = <T = any>({
 
   const doubleTapGesture = useMemo(() => {
     return Gesture.Tap()
-      .enabled(enableDoubleTapGesture)
+      .enabled(enableDoubleTapZoom)
       .numberOfTaps(2)
       .onEnd((event) => {
         const nextScale = scale.value > 1 ? 1 : maxZoomScale;
@@ -471,7 +567,7 @@ export const useGestureViewer = <T = any>({
           easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
         });
       });
-  }, [scale, enableDoubleTapGesture, maxZoomScale, translateX, translateY, width, screenHeight]);
+  }, [scale, enableDoubleTapZoom, maxZoomScale, translateX, translateY, width, screenHeight]);
 
   const zoomGesture = useMemo(() => {
     return Gesture.Race(zoomPinchGesture, Gesture.Exclusive(zoomPanGesture, doubleTapGesture));
@@ -479,7 +575,12 @@ export const useGestureViewer = <T = any>({
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
+      opacity: triggerOpacity.value,
       transform: [
+        { translateX: triggerTranslateX.value },
+        { translateY: triggerTranslateY.value },
+        { scale: triggerScale.value },
+
         { translateY: translateY.value },
         { translateX: translateX.value },
         { scale: scale.value },
@@ -489,14 +590,16 @@ export const useGestureViewer = <T = any>({
   });
 
   const backdropStyle = useAnimatedStyle(() => {
-    if (!animateBackdrop || scale.value !== 1) {
-      return { opacity: 1 };
+    const baseOpacity = triggerOpacity.value;
+
+    if (!dismissOptions.fadeBackdrop || scale.value !== 1) {
+      return { opacity: baseOpacity };
     }
 
-    const opacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
+    const dismissOpacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
 
-    return { opacity };
-  }, [animateBackdrop]);
+    return { opacity: baseOpacity * dismissOpacity };
+  }, [dismissOptions.fadeBackdrop]);
 
   const onScrollBeginDrag = useCallback(() => {
     manager?.handleScrollBeginDrag();
@@ -504,7 +607,6 @@ export const useGestureViewer = <T = any>({
 
   return {
     dataLength,
-    translateY,
     listRef,
     isZoomed,
     isRotated,
@@ -513,6 +615,7 @@ export const useGestureViewer = <T = any>({
 
     onMomentumScrollEnd,
     onScrollBeginDrag,
+    handleDismiss,
 
     animatedStyle,
     backdropStyle,

package/src/useGestureViewerController.ts

@@ -1,13 +1,13 @@
-import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
-import type { GestureViewerController, GestureViewerControllerState } from './types';
+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)
@@ -16,98 +16,46 @@ import type { GestureViewerController, GestureViewerControllerState } from './ty
  * - `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 const useGestureViewerController = (id = 'default'): GestureViewerController => {
   const managerRef = useRef<GestureViewerManager | null>(null);
-  const stateRef = useRef<GestureViewerControllerState>({ currentIndex: 0, totalCount: 0 });
-
-  const updateState = useCallback((newState: GestureViewerControllerState, onStoreChange: () => void) => {
-    if (
-      stateRef.current.currentIndex !== newState.currentIndex ||
-      stateRef.current.totalCount !== newState.totalCount
-    ) {
-      stateRef.current = {
-        currentIndex: newState.currentIndex,
-        totalCount: newState.totalCount,
-      };
-      onStoreChange();
-    }
-  }, []);
-
-  const subscribe = useCallback(
-    (onStoreChange: () => void) => {
-      let unsubscribeFromManager: (() => void) | null = null;
-
-      const unsubscribeFromRegistry = registry.subscribeToManager(id, (newManager) => {
-        unsubscribeFromManager?.();
-        unsubscribeFromManager = null;
-        managerRef.current = newManager;
 
-        if (newManager) {
-          unsubscribeFromManager = newManager.subscribe((newState) => {
-            updateState(newState, onStoreChange);
-          });
+  useEffect(() => {
+    const unsubscribe = registry.subscribeToManager(id, (manager) => {
+      managerRef.current = manager;
+    });
 
-          updateState(newManager.getState(), onStoreChange);
-          return;
-        }
+    return unsubscribe;
+  }, [id]);
 
-        updateState({ currentIndex: 0, totalCount: 0 }, onStoreChange);
-      });
-
-      return () => {
-        unsubscribeFromRegistry();
-        unsubscribeFromManager?.();
-      };
-    },
-    [id, updateState],
-  );
-
-  const getSnapshot = useCallback(() => {
-    return stateRef.current;
-  }, []);
-
-  const state = useSyncExternalStore(subscribe, getSnapshot);
-
-  const controller = useMemo<Omit<GestureViewerController, 'currentIndex' | 'totalCount'>>(
+  return useMemo<GestureViewerController>(
     () => ({
       goToIndex: (index) => {
         managerRef.current?.goToIndex(index);
@@ -133,9 +81,4 @@ export const useGestureViewerController = (id = 'default'): GestureViewerControl
     }),
     [],
   );
-
-  return {
-    ...controller,
-    ...state,
-  };
 };

package/src/useGestureViewerState.ts

@@ -0,0 +1,85 @@
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { registry } from './GestureViewerRegistry';
+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 const useGestureViewerState = (id = 'default'): GestureViewerState => {
+  const stateRef = useRef<GestureViewerState>({ currentIndex: 0, totalCount: 0 });
+
+  const updateState = useCallback((newState: GestureViewerState, onStoreChange: () => void) => {
+    if (
+      stateRef.current.currentIndex !== newState.currentIndex ||
+      stateRef.current.totalCount !== newState.totalCount
+    ) {
+      stateRef.current = { ...newState };
+      onStoreChange();
+    }
+  }, []);
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      let unsubscribeFromManager: (() => void) | null = null;
+
+      const unsubscribeFromRegistry = registry.subscribeToManager(id, (newManager) => {
+        unsubscribeFromManager?.();
+        unsubscribeFromManager = null;
+
+        if (newManager) {
+          unsubscribeFromManager = newManager.subscribe((newState) => {
+            updateState(newState, onStoreChange);
+          });
+
+          updateState(newManager.getState(), onStoreChange);
+          return;
+        }
+
+        updateState({ currentIndex: 0, totalCount: 0 }, onStoreChange);
+      });
+
+      return () => {
+        unsubscribeFromRegistry();
+        unsubscribeFromManager?.();
+      };
+    },
+    [id, updateState],
+  );
+
+  const getSnapshot = useCallback(() => {
+    return stateRef.current;
+  }, []);
+
+  const state = useSyncExternalStore(subscribe, getSnapshot);
+
+  return state;
+};