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

package/src/useGestureViewerController.ts

@@ -1,13 +1,13 @@
-import { useEffect, useMemo, useRef, useState } 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,88 +16,69 @@ 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 [state, setState] = useState<GestureViewerControllerState>({
-    currentIndex: 0,
-    totalCount: 0,
-  });
-
-  const [manager, setManager] = useState<GestureViewerManager | null>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
+  const managerRef = useRef<GestureViewerManager | null>(null);
 
   useEffect(() => {
-    const handleManagerChange = (newManager: GestureViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-
-      setManager(newManager);
+    const unsubscribe = registry.subscribeToManager(id, (manager) => {
+      managerRef.current = manager;
+    });
 
-      if (newManager) {
-        setState(newManager.getState());
-        unsubscribeRef.current = newManager.subscribe(setState);
-        return;
-      }
-
-      setState({ currentIndex: 0, totalCount: 0 });
-    };
-
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
+    return unsubscribe;
   }, [id]);
 
-  const noopFunction = useMemo(() => () => {}, []);
-
-  return {
-    goToIndex: manager?.goToIndex || noopFunction,
-    goToPrevious: manager?.goToPrevious || noopFunction,
-    goToNext: manager?.goToNext || noopFunction,
-    zoomIn: manager?.zoomIn || noopFunction,
-    zoomOut: manager?.zoomOut || noopFunction,
-    resetZoom: manager?.resetZoom || noopFunction,
-    rotate: manager?.rotate || noopFunction,
-    ...state,
-  };
+  return useMemo<GestureViewerController>(
+    () => ({
+      goToIndex: (index) => {
+        managerRef.current?.goToIndex(index);
+      },
+      goToPrevious: () => {
+        managerRef.current?.goToPrevious();
+      },
+      goToNext: () => {
+        managerRef.current?.goToNext();
+      },
+      zoomIn: (multiplier) => {
+        managerRef.current?.zoomIn(multiplier);
+      },
+      zoomOut: (multiplier) => {
+        managerRef.current?.zoomOut(multiplier);
+      },
+      resetZoom: (scale) => {
+        managerRef.current?.resetZoom(scale);
+      },
+      rotate: (angle, clockwise) => {
+        managerRef.current?.rotate(angle, clockwise);
+      },
+    }),
+    [],
+  );
 };

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;
+};