react-native-gesture-image-viewer 0.3.0 → 0.3.2

package/README.md

@@ -1,33 +1,352 @@
-# react-native-gesture-image-viewer
+# React Native Gesture Image Viewer
 
-react-native-gesture-image-viewer
+> English | [한국어](./README-ko_kr.md)
 
-## Installation
+## Overview
 
-```sh
+Have you ever struggled with implementing complex gesture handling and animations when building image galleries or content viewers in React Native?
+
+Existing libraries often have limited customization options or performance issues. `react-native-gesture-image-viewer` is a high-performance **universal gesture viewer** library built on React Native Reanimated and Gesture Handler, providing complete customization and intuitive gesture support for not only images but also videos, custom components, and any other content.
+
+### Key Features
+
+- ✅ **Complete Gesture Support** - Pinch zoom, double-tap zoom, swipe navigation, vertical drag dismiss
+- ✅ **High-Performance Animations** - Smooth 60fps animations powered by React Native Reanimated
+- ✅ **Full Customization** - Complete control over components, styles, and behaviors
+- ✅ **External Control API** - Programmatic control from buttons or other components
+- ✅ **Multi-Instance Management** - ID-based independent management of multiple viewers
+- ✅ **Flexible Integration** - Use with FlatList, FlashList, Expo Image, FastImage, and more
+- ✅ **Full TypeScript Support** - Type safety and enhanced developer experience
+- ✅ **Cross-Platform** - iOS, Android, and Web support
+- ✅ **Easy-to-Use API** - Intuitive and simple implementation without complex setup
+- ✅ **Various Environment Support** - Expo Go and New Architecture support
+
+## Quick Start
+
+### Examples & Demo
+- [📁 Example Project](/example/) - Real implementation code with various use cases
+- [🤖 Expo Go](https://snack.expo.dev/@harang/react-native-gesture-image-viewer) - Try it instantly on Snack Expo
+
+### Prerequisites
+
+> [!IMPORTANT]
+> `react-native-gesture-image-viewer` is a high-performance viewer library built on [`react-native-reanimated`](https://www.npmjs.com/package/react-native-reanimated) and [`react-native-gesture-handler`](https://www.npmjs.com/package/react-native-gesture-handler).    
+> Therefore, you must install React Native Reanimated and Gesture Handler before using this library. Please refer to the official documentation of these libraries for detailed setup guides.
+
+```bash
+npm install react-native-reanimated
+npm install react-native-gesture-handler
+```
+
+#### Minimum Requirements
+
+|Library|Minimum Version|
+|:--|:--:|
+|`react`|`>=18.0.0`|
+|`react-native`|`>=0.75.0`|
+|`react-native-gesture-handler`|`>=2.24.0`|
+|`react-native-reanimated`|`>=3.0.0`|
+
+#### [React Native Reanimated Setup](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)
+
+Add the plugin to your `babel.config.js`:
+
+```js
+// babel.config.js
+module.exports = {
+  presets: [
+    ... // don't add it here :)
+  ],
+  plugins: [
+    ...
+    // for web
+    '@babel/plugin-proposal-export-namespace-from',
+    // react-native-reanimated/plugin has to be listed last.
+    'react-native-reanimated/plugin',
+  ],
+};
+```
+
+Wrap your Metro config with `wrapWithReanimatedMetroConfig` in `metro.config.js`:
+
+```js
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
+
+const config = {
+  // Your existing Metro configuration options
+};
+
+module.exports = wrapWithReanimatedMetroConfig(config);
+```
+
+#### [react-native-gesture-handler Setup](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)
+
+- `react-native-gesture-handler` generally doesn't require additional setup, but please refer to the official documentation for your specific environment.
+- For [using gestures in Android modals](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation#android), you would normally need to wrap modal content with `GestureHandlerRootView`. However, this library already includes `GestureHandlerRootView` internally, so no additional wrapping is needed when using modals.
+
+### Installation
+
+```bash
+# npm
 npm install react-native-gesture-image-viewer
+
+# pnpm
+pnpm add react-native-gesture-image-viewer
+
+# yarn
+yarn add react-native-gesture-image-viewer
+
+# bun
+bun add react-native-gesture-image-viewer
 ```
 
 ## Usage
 
+### Basic Usage
 
-```js
-import { multiply } from 'react-native-gesture-image-viewer';
+`react-native-gesture-image-viewer` is a library focused purely on gesture interactions for complete customization.   
+You can create a viewer using any `Modal` of your choice as shown below:   
+
+```tsx
+import { Image, Modal } from 'react-native';
+import { GestureImageViewer } from 'react-native-gesture-image-viewer';
 
-// ...
+function App() {
+  const images = [...];
+  const [visible, setVisible] = useState(false);
 
-const result = await multiply(3, 7);
+  // Wrap with useCallback for performance optimization
+  const renderImage = useCallback((imageUrl: string) => {
+    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
+  }, []);
+
+  return (
+    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
+      <GestureImageViewer
+        data={images}
+        renderImage={renderImage}
+        onDismiss={() => setVisible(false)}
+      />
+    </Modal>
+  );
+}
 ```
 
+### Gesture Features
 
-## Contributing
+`react-native-gesture-image-viewer` supports various gestures essential for viewers. All gestures are enabled by default.
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+```tsx
+function App() {
+  return (
+    <GestureImageViewer
+      data={images}
+      renderImage={renderImage}
+      enableDismissGesture
+      enableSwipeGesture
+      enableZoomGesture
+      enableDoubleTapGesture
+      enableZoomPanGesture
+    />
+  )
+}
+```
 
-## License
+|Property|Description|Default|
+|:--:|:-----|:--:|
+|`enableDismissGesture`|Calls `onDismiss` function when swiping down. Useful for closing modals with downward swipe gestures.|`true`|
+|`enableSwipeGesture`|Controls left/right swipe gestures. When `false`, horizontal gestures are disabled.|`true`|
+|`enableZoomGesture`|Controls two-finger pinch gestures. When `false`, two-finger zoom gestures are disabled.|`true`|
+|`enableDoubleTapGesture`|Controls double-tap zoom gestures. When `false`, double-tap zoom gestures are disabled.|`true`|
+|`enableZoomPanGesture`|Only works when zoom is active, allows moving item position when zoomed. When `false`, gesture movement is disabled during zoom.|`true`|
+
+### Custom Components
+
+`react-native-gesture-image-viewer` offers powerful complete component customization. You can create gesture-supported items with not only images but any component you want.   
+
+#### List Components
+
+Support for `FlatList`, `FlashList`, `ScrollView` (⚠️ coming soon), and other list components through the `ListComponent` prop.   
+You can also customize the props of each supported list component through `listProps`.
+
+```tsx
+function App() {
+  return (
+    <GestureImageViewer
+      data={images}
+      ListComponent={FlatList}
+      listProps={{
+        // ....
+      }}
+    />
+  );
+}
+```
 
-MIT
+#### Content Components
 
----
+You can inject various types of content components like `expo-image`, `FastImage`, etc., through the `renderImage` prop to use gestures.
+
+```tsx
+import { GestureImageViewer } from 'react-native-gesture-image-viewer';
+import { Image } from 'expo-image';
+
+function App() {
+  const renderImage = useCallback((imageUrl: string) => {
+    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} contentFit="contain" />;
+  }, []);
+
+  return (
+    <GestureImageViewer
+      data={images}
+      renderImage={renderImage}
+    />
+  );
+}
+```
+
+### External Control API
+
+`react-native-gesture-image-viewer` provides powerful hooks for programmatic control from buttons or other components.
+
+```tsx
+import { GestureImageViewer, useImageViewerController } from 'react-native-gesture-image-viewer';
+
+function App() {
+  const { goToIndex, goToPrevious, goToNext, currentIndex, totalCount } = useImageViewerController();
+
+  return (
+    <View>
+      <GestureImageViewer
+        data={images}
+        renderImage={renderImage}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 40,
+          left: 0,
+          right: 0,
+          gap: 10,
+          flexDirection: 'column',
+        }}
+      >
+        <Feather.Button name="chevron-left" onPress={goToPrevious} />
+        <Button title="Jump to index 2" onPress={() => goToIndex(2)} />
+        <Feather.Button name="chevron-right" onPress={goToNext} />
+        <Text>{`${currentIndex + 1} / ${totalCount}`}</Text>
+      </View>
+    </View>
+  );
+}
+```
+
+### Style Customization
+
+You can customize the styling of `GestureImageViewer`.
+
+```tsx
+import { GestureImageViewer } from 'react-native-gesture-image-viewer';
+
+function App() {
+  return (
+    <GestureImageViewer
+      animateBackdrop={false}
+      width={400}
+      containerStyle={{ /* ... */ }}
+      backdropStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.90)' }}
+      renderContainer={(children) => <View style={{ flex: 1 }}>{children}</View>}
+    />
+  );
+}
+```
+
+|Property|Description|Default|
+|:--:|:-----|:--:|
+|`animateBackdrop`|By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures. When `false`, this animation is disabled.|`true`|
+|`width`|The width of content items. Default is window width.|`Dimensions width`|
+|`containerStyle`|Allows custom styling of the container that wraps the list component.|`flex: 1`|
+|`backdropStyle`|Allows customization of the viewer's background style.|`backgroundColor: black; StyleSheet.absoluteFill;`|
+|`renderContainer`|Allows custom wrapper component around `<GestureImageViewer />`.||
+
+### Multi-Instance Management
+
+When you want to efficiently manage multiple `GestureImageViewer` instances, you can use the `id` prop to use multiple `GestureImageViewer` components.   
+`GestureImageViewer` automatically removes instances from memory when components are unmounted, so no manual memory management is required.   
+
+> The default `id` value is `default`.
+
+```tsx
+import { GestureImageViewer, useImageViewerController } from 'react-native-gesture-image-viewer';
+
+const firstViewerId = 'firstViewerId';
+const secondViewerId = 'secondViewerId';
+
+function App() {
+  const { currentIndex: firstCurrentIndex, totalCount: firstTotalCount } = useImageViewerController(firstViewerId);
+  const { currentIndex: secondCurrentIndex, totalCount: secondTotalCount } = useImageViewerController(secondViewerId);
+
+  return (
+    <View>
+      <GestureImageViewer
+        id={firstViewerId}
+        data={images}
+        renderImage={renderImage}
+      />
+      <GestureImageViewer
+        id={secondViewerId}
+        data={images}
+        renderImage={renderImage}
+      />
+    </View>
+  );
+}
+```
+
+### Additional Props
+
+#### `onIndexChange`
+The `onIndexChange` callback function is called when the `index` value changes.
+
+```tsx
+import { GestureImageViewer } from 'react-native-gesture-image-viewer';
+
+function App() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  return (
+    <GestureImageViewer
+      onIndexChange={setCurrentIndex}
+    />
+  );
+}
+```
+
+#### `initialIndex` (default: `0`)
+Sets the initial index value.
+
+#### `dismissThreshold` (default: `80`)
+`dismissThreshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.
+
+#### `resistance` (default: `2`)
+`resistance` controls the range of vertical movement by applying resistance during vertical gestures.
+
+#### `maxZoomScale` (default: `2`)
+Controls the maximum zoom scale multiplier.
+
+## Performance Optimization Tips
+
+- Wrap the `renderImage` function with `useCallback` to prevent unnecessary re-renders.
+- For large images, we recommend using `FastImage` or `expo-image`.
+- For handling many images, we recommend using `FlashList`.
+- Test on actual devices (performance may be limited in simulators).
+
+## Contributing
+
+For details on how to contribute to the project and set up the development environment, please refer to the [Contributing Guide](CONTRIBUTING.md).
+
+## License
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+[MIT](./LICENSE)

package/lib/module/ImageViewerRegistry.js

@@ -3,12 +3,29 @@
 import ImageViewerManager from "./ImageViewerManager.js";
 class ImageViewerRegistry {
   managers = new Map();
+  subscribers = new Map();
+  subscribeToManager(id, callback) {
+    if (!this.subscribers.has(id)) {
+      this.subscribers.set(id, new Set());
+    }
+    this.subscribers.get(id)?.add(callback);
+    const manager = this.managers.get(id) || null;
+    callback(manager);
+    return () => {
+      const subscribers = this.subscribers.get(id);
+      subscribers?.delete(callback);
+      if (subscribers && subscribers.size === 0) {
+        this.subscribers.delete(id);
+      }
+    };
+  }
   createManager(id) {
     if (this.managers.has(id)) {
       return this.managers.get(id) || null;
     }
     const manager = new ImageViewerManager();
     this.managers.set(id, manager);
+    this.notifySubscribers(id, manager);
     return manager;
   }
   getManager(id) {
@@ -19,6 +36,13 @@ class ImageViewerRegistry {
     if (manager) {
       manager.cleanUp();
       this.managers.delete(id);
+      this.notifySubscribers(id, null);
+    }
+  }
+  notifySubscribers(id, manager) {
+    const listeners = this.subscribers.get(id);
+    if (listeners) {
+      [...listeners].forEach(callback => callback(manager));
     }
   }
 }

package/lib/module/ImageViewerRegistry.js.map

@@ -1 +1 @@
-{"version":3,"names":["ImageViewerManager","ImageViewerRegistry","managers","Map","createManager","id","has","get","manager","set","getManager","deleteManager","cleanUp","delete","registry"],"sourceRoot":"../../src","sources":["ImageViewerRegistry.ts"],"mappings":";;AAAA,OAAOA,kBAAkB,MAAM,yBAAsB;AAErD,MAAMC,mBAAmB,CAAC;EAChBC,QAAQ,GAAG,IAAIC,GAAG,CAA6B,CAAC;EAExDC,aAAaA,CAACC,EAAU,EAA6B;IACnD,IAAI,IAAI,CAACH,QAAQ,CAACI,GAAG,CAACD,EAAE,CAAC,EAAE;MACzB,OAAO,IAAI,CAACH,QAAQ,CAACK,GAAG,CAACF,EAAE,CAAC,IAAI,IAAI;IACtC;IAEA,MAAMG,OAAO,GAAG,IAAIR,kBAAkB,CAAC,CAAC;IACxC,IAAI,CAACE,QAAQ,CAACO,GAAG,CAACJ,EAAE,EAAEG,OAAO,CAAC;IAC9B,OAAOA,OAAO;EAChB;EAEAE,UAAUA,CAACL,EAAU,EAA6B;IAChD,OAAO,IAAI,CAACH,QAAQ,CAACK,GAAG,CAACF,EAAE,CAAC,IAAI,IAAI;EACtC;EAEAM,aAAaA,CAACN,EAAU,EAAE;IACxB,MAAMG,OAAO,GAAG,IAAI,CAACN,QAAQ,CAACK,GAAG,CAACF,EAAE,CAAC;IAErC,IAAIG,OAAO,EAAE;MACXA,OAAO,CAACI,OAAO,CAAC,CAAC;MACjB,IAAI,CAACV,QAAQ,CAACW,MAAM,CAACR,EAAE,CAAC;IAC1B;EACF;AACF;AAEA,OAAO,MAAMS,QAAQ,GAAG,IAAIb,mBAAmB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["ImageViewerManager","ImageViewerRegistry","managers","Map","subscribers","subscribeToManager","id","callback","has","set","Set","get","add","manager","delete","size","createManager","notifySubscribers","getManager","deleteManager","cleanUp","listeners","forEach","registry"],"sourceRoot":"../../src","sources":["ImageViewerRegistry.ts"],"mappings":";;AAAA,OAAOA,kBAAkB,MAAM,yBAAsB;AAErD,MAAMC,mBAAmB,CAAC;EAChBC,QAAQ,GAAG,IAAIC,GAAG,CAA6B,CAAC;EAChDC,WAAW,GAAG,IAAID,GAAG,CAA4D,CAAC;EAE1FE,kBAAkBA,CAACC,EAAU,EAAEC,QAAsD,EAAE;IACrF,IAAI,CAAC,IAAI,CAACH,WAAW,CAACI,GAAG,CAACF,EAAE,CAAC,EAAE;MAC7B,IAAI,CAACF,WAAW,CAACK,GAAG,CAACH,EAAE,EAAE,IAAII,GAAG,CAAC,CAAC,CAAC;IACrC;IAEA,IAAI,CAACN,WAAW,CAACO,GAAG,CAACL,EAAE,CAAC,EAAEM,GAAG,CAACL,QAAQ,CAAC;IAEvC,MAAMM,OAAO,GAAG,IAAI,CAACX,QAAQ,CAACS,GAAG,CAACL,EAAE,CAAC,IAAI,IAAI;IAE7CC,QAAQ,CAACM,OAAO,CAAC;IAEjB,OAAO,MAAM;MACX,MAAMT,WAAW,GAAG,IAAI,CAACA,WAAW,CAACO,GAAG,CAACL,EAAE,CAAC;MAE5CF,WAAW,EAAEU,MAAM,CAACP,QAAQ,CAAC;MAE7B,IAAIH,WAAW,IAAIA,WAAW,CAACW,IAAI,KAAK,CAAC,EAAE;QACzC,IAAI,CAACX,WAAW,CAACU,MAAM,CAACR,EAAE,CAAC;MAC7B;IACF,CAAC;EACH;EAEAU,aAAaA,CAACV,EAAU,EAA6B;IACnD,IAAI,IAAI,CAACJ,QAAQ,CAACM,GAAG,CAACF,EAAE,CAAC,EAAE;MACzB,OAAO,IAAI,CAACJ,QAAQ,CAACS,GAAG,CAACL,EAAE,CAAC,IAAI,IAAI;IACtC;IAEA,MAAMO,OAAO,GAAG,IAAIb,kBAAkB,CAAC,CAAC;IACxC,IAAI,CAACE,QAAQ,CAACO,GAAG,CAACH,EAAE,EAAEO,OAAO,CAAC;IAE9B,IAAI,CAACI,iBAAiB,CAACX,EAAE,EAAEO,OAAO,CAAC;IAEnC,OAAOA,OAAO;EAChB;EAEAK,UAAUA,CAACZ,EAAU,EAA6B;IAChD,OAAO,IAAI,CAACJ,QAAQ,CAACS,GAAG,CAACL,EAAE,CAAC,IAAI,IAAI;EACtC;EAEAa,aAAaA,CAACb,EAAU,EAAE;IACxB,MAAMO,OAAO,GAAG,IAAI,CAACX,QAAQ,CAACS,GAAG,CAACL,EAAE,CAAC;IAErC,IAAIO,OAAO,EAAE;MACXA,OAAO,CAACO,OAAO,CAAC,CAAC;MACjB,IAAI,CAAClB,QAAQ,CAACY,MAAM,CAACR,EAAE,CAAC;MAExB,IAAI,CAACW,iBAAiB,CAACX,EAAE,EAAE,IAAI,CAAC;IAClC;EACF;EAEAW,iBAAiBA,CAACX,EAAU,EAAEO,OAAkC,EAAE;IAChE,MAAMQ,SAAS,GAAG,IAAI,CAACjB,WAAW,CAACO,GAAG,CAACL,EAAE,CAAC;IAE1C,IAAIe,SAAS,EAAE;MACb,CAAC,GAAGA,SAAS,CAAC,CAACC,OAAO,CAAEf,QAAQ,IAAKA,QAAQ,CAACM,OAAO,CAAC,CAAC;IACzD;EACF;AACF;AAEA,OAAO,MAAMU,QAAQ,GAAG,IAAItB,mBAAmB,CAAC,CAAC","ignoreList":[]}

package/lib/module/useGestureImageViewer.js

@@ -30,10 +30,9 @@ export const useGestureImageViewer = ({
   } = useWindowDimensions();
   const width = customWidth || screenWidth;
   const [isZoomed, setIsZoomed] = useState(false);
-  const [managerState, setManagerState] = useState({
-    currentIndex: initialIndex,
-    dataLength: data?.length || 0
-  });
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [manager, setManager] = useState(null);
+  const unsubscribeRef = useRef(null);
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
   const startScale = useSharedValue(1);
@@ -47,15 +46,26 @@ export const useGestureImageViewer = ({
     runOnJS(setIsZoomed)(currentScale > 1);
   });
   useEffect(() => {
-    const manager = registry.getManager(id);
-    if (!manager) {
-      return;
-    }
-    setManagerState(manager.getState());
-    return manager.subscribe(setManagerState);
+    const handleManagerChange = manager => {
+      unsubscribeRef.current?.();
+      unsubscribeRef.current = null;
+      setManager(manager);
+      if (manager) {
+        setCurrentIndex(manager.getState().currentIndex);
+        unsubscribeRef.current = manager.subscribe(state => {
+          setCurrentIndex(state.currentIndex);
+        });
+        return;
+      }
+      setCurrentIndex(0);
+    };
+    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
+    return () => {
+      unsubscribeFromRegistry();
+      unsubscribeRef.current?.();
+    };
   }, [id]);
   useEffect(() => {
-    const manager = registry.getManager(id);
     if (!manager) {
       return;
     }
@@ -63,17 +73,16 @@ export const useGestureImageViewer = ({
     manager.setEnableSwipeGesture(enableSwipeGesture);
     manager.setCurrentIndex(initialIndex);
     manager.notifyStateChange();
-  }, [dataLength, enableSwipeGesture, initialIndex, id]);
+  }, [dataLength, enableSwipeGesture, initialIndex, manager]);
   useEffect(() => {
-    const manager = registry.getManager(id);
     if (!manager || !flatListRef.current) {
       return;
     }
     manager.setFlatListRef(flatListRef.current);
-  }, [id]);
+  }, [manager]);
   useEffect(() => {
-    onIndexChange?.(managerState.currentIndex);
-  }, [managerState.currentIndex, onIndexChange]);
+    onIndexChange?.(currentIndex);
+  }, [currentIndex, onIndexChange]);
   useEffect(() => {
     translateY.value = 0;
     translateX.value = 0;
@@ -99,10 +108,11 @@ export const useGestureImageViewer = ({
     }
     const contentOffset = event.nativeEvent.contentOffset;
     const newIndex = Math.round(contentOffset.x / width);
-    if (newIndex !== managerState.currentIndex && newIndex >= 0 && newIndex < dataLength) {
-      const manager = registry.getManager(id);
+    if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
       if (manager) {
         manager.setCurrentIndex(newIndex);
+        setCurrentIndex(newIndex);
+        manager.notifyStateChange();
       }
       translateX.value = withTiming(0);
       translateY.value = withTiming(0);
@@ -111,7 +121,7 @@ export const useGestureImageViewer = ({
       startScale.value = withTiming(1);
       scale.value = withTiming(1);
     }
-  }, [id, managerState.currentIndex, dataLength, width, enableSwipeGesture, translateX, translateY, scale, initialTranslateX, initialTranslateY, startScale]);
+  }, [manager, currentIndex, dataLength, width, enableSwipeGesture, translateX, translateY, scale, initialTranslateX, initialTranslateY, startScale]);
   const dismissGesture = useMemo(() => {
     return Gesture.Pan().minDistance(10).averageTouches(true).activeOffsetY([-10, 10]).failOffsetX([-10, 10]).enabled(!isZoomed).onUpdate(event => {
       translateY.value = event.translationY / resistance;
@@ -209,7 +219,7 @@ export const useGestureImageViewer = ({
     };
   }, [animateBackdrop]);
   return {
-    currentIndex: managerState.currentIndex,
+    currentIndex,
     dataLength,
     translateY,
     flatListRef,

package/lib/module/useGestureImageViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","InteractionManager","useWindowDimensions","Gesture","Easing","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","registry","useGestureImageViewer","data","initialIndex","onIndexChange","onDismiss","width","customWidth","dismissThreshold","resistance","animateBackdrop","enableDismissGesture","enableSwipeGesture","enableZoomGesture","enableDoubleTapGesture","enableZoomPanGesture","maxZoomScale","id","screenWidth","height","screenHeight","isZoomed","setIsZoomed","managerState","setManagerState","currentIndex","dataLength","length","initialTranslateY","initialTranslateX","startScale","translateY","translateX","scale","backdropOpacity","flatListRef","value","currentScale","manager","getManager","getState","subscribe","setDataLength","setEnableSwipeGesture","setCurrentIndex","notifyStateChange","current","setFlatListRef","runAfterInteractions","scrollToIndex","index","animated","cancel","onMomentumScrollEnd","event","contentOffset","nativeEvent","newIndex","Math","round","x","dismissGesture","Pan","minDistance","averageTouches","activeOffsetY","failOffsetX","enabled","onUpdate","translationY","onEnd","damping","stiffness","zoomPinchGesture","Pinch","onBegin","duration","easing","bezier","zoomPanGesture","maxTranslateX","maxTranslateY","max","min","translationX","doubleTapGesture","Tap","numberOfTaps","nextScale","zoomGesture","Simultaneous","animatedStyle","transform","backdropStyle","opacity"],"sourceRoot":"../../src","sources":["useGestureImageViewer.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACzE,SACEC,kBAAkB,EAGlBC,mBAAmB,QACd,cAAc;AACrB,SAASC,OAAO,QAAQ,8BAA8B;AACtD,SACEC,MAAM,EACNC,WAAW,EACXC,OAAO,EACPC,mBAAmB,EACnBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAEhC,SAASC,QAAQ,QAAQ,0BAAuB;AAQhD,OAAO,MAAMC,qBAAqB,GAAGA,CAAU;EAC7CC,IAAI;EACJC,YAAY,GAAG,CAAC;EAChBC,aAAa;EACbC,SAAS;EACTC,KAAK,EAAEC,WAAW;EAClBC,gBAAgB,GAAG,EAAE;EACrBC,UAAU,GAAG,CAAC;EACd;EACA;EACAC,eAAe,GAAG,IAAI;EACtBC,oBAAoB,GAAG,IAAI;EAC3BC,kBAAkB,GAAG,IAAI;EACzBC,iBAAiB,GAAG,IAAI;EACxBC,sBAAsB,GAAG,IAAI;EAC7BC,oBAAoB,GAAG,IAAI;EAC3BC,YAAY,GAAG,CAAC;EAChBC,EAAE,GAAG;AACwB,CAAC,KAAK;EACnC,MAAM;IAAEX,KAAK,EAAEY,WAAW;IAAEC,MAAM,EAAEC;EAAa,CAAC,GAAG9B,mBAAmB,CAAC,CAAC;EAC1E,MAAMgB,KAAK,GAAGC,WAAW,IAAIW,WAAW;EAExC,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAGlC,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAM,CAACmC,YAAY,EAAEC,eAAe,CAAC,GAAGpC,QAAQ,CAA0B;IACxEqC,YAAY,EAAEtB,YAAY;IAC1BuB,UAAU,EAAExB,IAAI,EAAEyB,MAAM,IAAI;EAC9B,CAAC,CAAC;EAEF,MAAMC,iBAAiB,GAAG/B,cAAc,CAAC,CAAC,CAAC;EAC3C,MAAMgC,iBAAiB,GAAGhC,cAAc,CAAC,CAAC,CAAC;EAC3C,MAAMiC,UAAU,GAAGjC,cAAc,CAAC,CAAC,CAAC;EAEpC,MAAMkC,UAAU,GAAGlC,cAAc,CAAC,CAAC,CAAC;EACpC,MAAMmC,UAAU,GAAGnC,cAAc,CAAC,CAAC,CAAC;EACpC,MAAMoC,KAAK,GAAGpC,cAAc,CAAC,CAAC,CAAC;EAC/B,MAAMqC,eAAe,GAAGrC,cAAc,CAAC,CAAC,CAAC;EAEzC,MAAMsC,WAAW,GAAGhD,MAAM,CAAM,IAAI,CAAC;EAErC,MAAMuC,UAAU,GAAGxB,IAAI,EAAEyB,MAAM,IAAI,CAAC;EAEpChC,mBAAmB,CACjB,MAAMsC,KAAK,CAACG,KAAK,EAChBC,YAAY,IAAK;IAChB3C,OAAO,CAAC4B,WAAW,CAAC,CAACe,YAAY,GAAG,CAAC,CAAC;EACxC,CACF,CAAC;EAEDpD,SAAS,CAAC,MAAM;IACd,MAAMqD,OAAO,GAAGtC,QAAQ,CAACuC,UAAU,CAACtB,EAAE,CAAC;IAEvC,IAAI,CAACqB,OAAO,EAAE;MACZ;IACF;IAEAd,eAAe,CAACc,OAAO,CAACE,QAAQ,CAAC,CAAC,CAAC;IAEnC,OAAOF,OAAO,CAACG,SAAS,CAACjB,eAAe,CAAC;EAC3C,CAAC,EAAE,CAACP,EAAE,CAAC,CAAC;EAERhC,SAAS,CAAC,MAAM;IACd,MAAMqD,OAAO,GAAGtC,QAAQ,CAACuC,UAAU,CAACtB,EAAE,CAAC;IAEvC,IAAI,CAACqB,OAAO,EAAE;MACZ;IACF;IAEAA,OAAO,CAACI,aAAa,CAAChB,UAAU,CAAC;IACjCY,OAAO,CAACK,qBAAqB,CAAC/B,kBAAkB,CAAC;IACjD0B,OAAO,CAACM,eAAe,CAACzC,YAAY,CAAC;IACrCmC,OAAO,CAACO,iBAAiB,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACnB,UAAU,EAAEd,kBAAkB,EAAET,YAAY,EAAEc,EAAE,CAAC,CAAC;EAEtDhC,SAAS,CAAC,MAAM;IACd,MAAMqD,OAAO,GAAGtC,QAAQ,CAACuC,UAAU,CAACtB,EAAE,CAAC;IAEvC,IAAI,CAACqB,OAAO,IAAI,CAACH,WAAW,CAACW,OAAO,EAAE;MACpC;IACF;IAEAR,OAAO,CAACS,cAAc,CAACZ,WAAW,CAACW,OAAO,CAAC;EAC7C,CAAC,EAAE,CAAC7B,EAAE,CAAC,CAAC;EAERhC,SAAS,CAAC,MAAM;IACdmB,aAAa,GAAGmB,YAAY,CAACE,YAAY,CAAC;EAC5C,CAAC,EAAE,CAACF,YAAY,CAACE,YAAY,EAAErB,aAAa,CAAC,CAAC;EAE9CnB,SAAS,CAAC,MAAM;IACd8C,UAAU,CAACK,KAAK,GAAG,CAAC;IACpBJ,UAAU,CAACI,KAAK,GAAG,CAAC;IACpBH,KAAK,CAACG,KAAK,GAAG,CAAC;IACfF,eAAe,CAACE,KAAK,GAAG,CAAC;IACzBN,UAAU,CAACM,KAAK,GAAG,CAAC;IAEpB,IAAIjC,YAAY,IAAI,CAAC,IAAI,CAACgC,WAAW,CAACW,OAAO,EAAE;MAC7C;IACF;IAEA,MAAME,oBAAoB,GAAG3D,kBAAkB,CAAC2D,oBAAoB,CAAC,MAAM;MACzEb,WAAW,CAACW,OAAO,EAAEG,aAAa,CAAC;QACjCC,KAAK,EAAE/C,YAAY;QACnBgD,QAAQ,EAAE;MACZ,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACXH,oBAAoB,EAAEI,MAAM,CAAC,CAAC;IAChC,CAAC;EACH,CAAC,EAAE,CAACjD,YAAY,EAAE4B,UAAU,EAAEG,eAAe,EAAEF,UAAU,EAAEC,KAAK,EAAEH,UAAU,CAAC,CAAC;EAE9E,MAAMuB,mBAAmB,GAAGrE,WAAW,CACpCsE,KAA8C,IAAK;IAClD,IAAI,CAAC1C,kBAAkB,EAAE;MACvB;IACF;IAEA,MAAM2C,aAAa,GAAGD,KAAK,CAACE,WAAW,CAACD,aAAa;IACrD,MAAME,QAAQ,GAAGC,IAAI,CAACC,KAAK,CAACJ,aAAa,CAACK,CAAC,GAAGtD,KAAK,CAAC;IAEpD,IAAImD,QAAQ,KAAKlC,YAAY,CAACE,YAAY,IAAIgC,QAAQ,IAAI,CAAC,IAAIA,QAAQ,GAAG/B,UAAU,EAAE;MACpF,MAAMY,OAAO,GAAGtC,QAAQ,CAACuC,UAAU,CAACtB,EAAE,CAAC;MAEvC,IAAIqB,OAAO,EAAE;QACXA,OAAO,CAACM,eAAe,CAACa,QAAQ,CAAC;MACnC;MAEAzB,UAAU,CAACI,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;MAChCgC,UAAU,CAACK,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;MAChC8B,iBAAiB,CAACO,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;MACvC6B,iBAAiB,CAACQ,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;MACvC+B,UAAU,CAACM,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;MAChCkC,KAAK,CAACG,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;IAC7B;EACF,CAAC,EACD,CACEkB,EAAE,EACFM,YAAY,CAACE,YAAY,EACzBC,UAAU,EACVpB,KAAK,EACLM,kBAAkB,EAClBoB,UAAU,EACVD,UAAU,EACVE,KAAK,EACLJ,iBAAiB,EACjBD,iBAAiB,EACjBE,UAAU,CAEd,CAAC;EAED,MAAM+B,cAAc,GAAG3E,OAAO,CAAC,MAAM;IACnC,OAAOK,OAAO,CAACuE,GAAG,CAAC,CAAC,CACjBC,WAAW,CAAC,EAAE,CAAC,CACfC,cAAc,CAAC,IAAI,CAAC,CACpBC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CACxBC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CACtBC,OAAO,CAAC,CAAC9C,QAAQ,CAAC,CAClB+C,QAAQ,CAAEd,KAAK,IAAK;MACnBvB,UAAU,CAACK,KAAK,GAAGkB,KAAK,CAACe,YAAY,GAAG5D,UAAU;IACpD,CAAC,CAAC,CACD6D,KAAK,CAAEhB,KAAK,IAAK;MAChB,SAAS;;MAET,IAAIA,KAAK,CAACe,YAAY,GAAG7D,gBAAgB,IAAIG,oBAAoB,IAAIN,SAAS,EAAE;QAC9EX,OAAO,CAACW,SAAS,CAAC,CAAC,CAAC;QACpB;MACF;MAEA0B,UAAU,CAACK,KAAK,GAAGtC,UAAU,CAAC,CAAC,EAAE;QAC/ByE,OAAO,EAAE,EAAE;QACXC,SAAS,EAAE;MACb,CAAC,CAAC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACzC,UAAU,EAAEvB,gBAAgB,EAAEG,oBAAoB,EAAEN,SAAS,EAAEI,UAAU,EAAEY,QAAQ,CAAC,CAAC;EAEzF,MAAMoD,gBAAgB,GAAGvF,OAAO,CAAC,MAAM;IACrC,OAAOK,OAAO,CAACmF,KAAK,CAAC,CAAC,CACnBP,OAAO,CAACtD,iBAAiB,CAAC,CAC1B8D,OAAO,CAAC,MAAM;MACb7C,UAAU,CAACM,KAAK,GAAGH,KAAK,CAACG,KAAK;IAChC,CAAC,CAAC,CACDgC,QAAQ,CAAEd,KAAK,IAAK;MACnBrB,KAAK,CAACG,KAAK,GAAGN,UAAU,CAACM,KAAK,GAAGkB,KAAK,CAACrB,KAAK;IAC9C,CAAC,CAAC,CACDqC,KAAK,CAAC,MAAM;MACX,IAAIrC,KAAK,CAACG,KAAK,GAAGpB,YAAY,EAAE;QAC9BiB,KAAK,CAACG,KAAK,GAAGrC,UAAU,CAACiB,YAAY,EAAE;UACrC4D,QAAQ,EAAE,GAAG;UACbC,MAAM,EAAErF,MAAM,CAACsF,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;QAC5C,CAAC,CAAC;QACF;MACF;MAEA,IAAI7C,KAAK,CAACG,KAAK,GAAG,CAAC,EAAE;QACnBH,KAAK,CAACG,KAAK,GAAGrC,UAAU,CAAC,CAAC,EAAE;UAC1B6E,QAAQ,EAAE,GAAG;UACbC,MAAM,EAAErF,MAAM,CAACsF,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;QAC5C,CAAC,CAAC;QACF9C,UAAU,CAACI,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;QAChCgC,UAAU,CAACK,KAAK,GAAGrC,UAAU,CAAC,CAAC,CAAC;MAClC;IACF,CAAC,CAAC;EACN,CAAC,EAAE,CAACkC,KAAK,EAAEpB,iBAAiB,EAAEG,YAAY,EAAEgB,UAAU,EAAED,UAAU,EAAED,UAAU,CAAC,CAAC;EAEhF,MAAMiD,cAAc,GAAG7F,OAAO,CAAC,MAAM;IACnC,OAAOK,OAAO,CAACuE,GAAG,CAAC,CAAC,CACjBK,OAAO,CAACpD,oBAAoB,IAAIM,QAAQ,CAAC,CACzCsD,OAAO,CAAC,MAAM;MACb9C,iBAAiB,CAACO,KAAK,GAAGJ,UAAU,CAACI,KAAK;MAC1CR,iBAAiB,CAACQ,KAAK,GAAGL,UAAU,CAACK,KAAK;IAC5C,CAAC,CAAC,CACDgC,QAAQ,CAAEd,KAAK,IAAK;MACnB,SAAS;;MAET,IAAIrB,KAAK,CAACG,KAAK,GAAG,CAAC,EAAE;QACnB,MAAM4C,aAAa,GAAG,CAAC1E,KAAK,GAAG2B,KAAK,CAACG,KAAK,GAAG9B,KAAK,IAAI,CAAC;QACvD,MAAM2E,aAAa,GAAG,CAAC7D,YAAY,GAAGa,KAAK,CAACG,KAAK,GAAGhB,YAAY,IAAI,CAAC;QAErEY,UAAU,CAACI,KAAK,GAAGsB,IAAI,CAACwB,GAAG,CACzB,CAACF,aAAa,EACdtB,IAAI,CAACyB,GAAG,CAACH,aAAa,EAAEnD,iBAAiB,CAACO,KAAK,GAAGkB,KAAK,CAAC8B,YAAY,CACtE,CAAC;QACDrD,UAAU,CAACK,KAAK,GAAGsB,IAAI,CAACwB,GAAG,CACzB,CAACD,aAAa,EACdvB,IAAI,CAACyB,GAAG,CAACF,aAAa,EAAErD,iBAAiB,CAACQ,KAAK,GAAGkB,KAAK,CAACe,YAAY,CACtE,CAAC;MACH;IACF,CAAC,CAAC;EACN,CAAC,EAAE,CACDrC,UAAU,EACVD,UAAU,EACVhB,oBAAoB,EACpBM,QAAQ,EACRY,KAAK,EACLJ,iBAAiB,EACjBD,iBAAiB,EACjBtB,KAAK,EACLc,YAAY,CACb,CAAC;EAEF,MAAMiE,gBAAgB,GAAGnG,OAAO,CAAC,MAAM;IACrC,OAAOK,OAAO,CAAC+F,GAAG,CAAC,CAAC,CACjBnB,OAAO,CAACrD,sBAAsB,CAAC,CAC/ByE,YAAY,CAAC,CAAC,CAAC,CACfjB,KAAK,CAAC,MAAM;MACX,MAAMkB,SAAS,GAAGvD,KAAK,CAACG,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGpB,YAAY;MAEpDgB,UAAU,CAACI,KAAK,GAAGrC,UAAU,CAAC,CAAC,EAAE;QAC/B6E,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAErF,MAAM,CAACsF,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;MAC5C,CAAC,CAAC;MACF/C,UAAU,CAACK,KAAK,GAAGrC,UAAU,CAAC,CAAC,EAAE;QAC/B6E,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAErF,MAAM,CAACsF,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;MAC5C,CAAC,CAAC;MAEF7C,KAAK,CAACG,KAAK,GAAGrC,UAAU,CAACyF,SAAS,EAAE;QAClCZ,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAErF,MAAM,CAACsF,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG;MAC5C,CAAC,CAAC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAAC7C,KAAK,EAAEnB,sBAAsB,EAAEE,YAAY,EAAEgB,UAAU,EAAED,UAAU,CAAC,CAAC;EAEzE,MAAM0D,WAAW,GAAGvG,OAAO,CAAC,MAAM;IAChC,OAAOK,OAAO,CAACmG,YAAY,CAACjB,gBAAgB,EAAEM,cAAc,EAAEM,gBAAgB,CAAC;EACjF,CAAC,EAAE,CAACZ,gBAAgB,EAAEM,cAAc,EAAEM,gBAAgB,CAAC,CAAC;EAExD,MAAMM,aAAa,GAAG/F,gBAAgB,CAAC,MAAM;IAC3C,OAAO;MACLgG,SAAS,EAAE,CAAC;QAAE7D,UAAU,EAAEA,UAAU,CAACK;MAAM,CAAC,EAAE;QAAEJ,UAAU,EAAEA,UAAU,CAACI;MAAM,CAAC,EAAE;QAAEH,KAAK,EAAEA,KAAK,CAACG;MAAM,CAAC;IACxG,CAAC;EACH,CAAC,CAAC;EAEF,MAAMyD,aAAa,GAAGjG,gBAAgB,CAAC,MAAM;IAC3C,IAAI,CAACc,eAAe,IAAIuB,KAAK,CAACG,KAAK,GAAG,CAAC,EAAE;MACvC,OAAO;QAAE0D,OAAO,EAAE;MAAE,CAAC;IACvB;IAEA,MAAMA,OAAO,GAAGrG,WAAW,CAACsC,UAAU,CAACK,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;IAExE,OAAO;MAAE0D;IAAQ,CAAC;EACpB,CAAC,EAAE,CAACpF,eAAe,CAAC,CAAC;EAErB,OAAO;IACLe,YAAY,EAAEF,YAAY,CAACE,YAAY;IACvCC,UAAU;IACVK,UAAU;IACVI,WAAW;IACXd,QAAQ;IAERwC,cAAc;IACd4B,WAAW;IAEXpC,mBAAmB;IAEnBsC,aAAa;IACbE;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","InteractionManager","useWindowDimensions","Gesture","Easing","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","registry","useGestureImageViewer","data","initialIndex","onIndexChange","onDismiss","width","customWidth","dismissThreshold","resistance","animateBackdrop","enableDismissGesture","enableSwipeGesture","enableZoomGesture","enableDoubleTapGesture","enableZoomPanGesture","maxZoomScale","id","screenWidth","height","screenHeight","isZoomed","setIsZoomed","currentIndex","setCurrentIndex","manager","setManager","unsubscribeRef","initialTranslateY","initialTranslateX","startScale","translateY","translateX","scale","backdropOpacity","flatListRef","dataLength","length","value","currentScale","handleManagerChange","current","getState","subscribe","state","unsubscribeFromRegistry","subscribeToManager","setDataLength","setEnableSwipeGesture","notifyStateChange","setFlatListRef","runAfterInteractions","scrollToIndex","index","animated","cancel","onMomentumScrollEnd","event","contentOffset","nativeEvent","newIndex","Math","round","x","dismissGesture","Pan","minDistance","averageTouches","activeOffsetY","failOffsetX","enabled","onUpdate","translationY","onEnd","damping","stiffness","zoomPinchGesture","Pinch","onBegin","duration","easing","bezier","zoomPanGesture","maxTranslateX","maxTranslateY","max","min","translationX","doubleTapGesture","Tap","numberOfTaps","nextScale","zoomGesture","Simultaneous","animatedStyle","transform","backdropStyle","opacity"],"sourceRoot":"../../src","sources":["useGestureImageViewer.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/useImageViewerController.js

@@ -1,21 +1,35 @@
 "use strict";
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { registry } from "./ImageViewerRegistry.js";
 export const useImageViewerController = (id = 'default') => {
   const [state, setState] = useState({
     currentIndex: 0,
     dataLength: 0
   });
+  const [manager, setManager] = useState(null);
+  const unsubscribeRef = useRef(null);
   useEffect(() => {
-    const manager = registry.createManager(id);
-    if (!manager) {
-      return;
-    }
-    setState(manager.getState());
-    return manager.subscribe(setState);
+    const handleManagerChange = newManager => {
+      unsubscribeRef.current?.();
+      unsubscribeRef.current = null;
+      setManager(newManager);
+      if (newManager) {
+        setState(newManager.getState());
+        unsubscribeRef.current = newManager.subscribe(setState);
+        return;
+      }
+      setState({
+        currentIndex: 0,
+        dataLength: 0
+      });
+    };
+    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
+    return () => {
+      unsubscribeFromRegistry();
+      unsubscribeRef.current?.();
+    };
   }, [id]);
-  const manager = registry.getManager(id);
   const noopFunction = useMemo(() => () => {}, []);
   return {
     goToIndex: manager?.goToIndex || noopFunction,

package/lib/module/useImageViewerController.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","registry","useImageViewerController","id","state","setState","currentIndex","dataLength","manager","createManager","getState","subscribe","getManager","noopFunction","goToIndex","goToPrevious","goToNext","totalCount"],"sourceRoot":"../../src","sources":["useImageViewerController.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEpD,SAASC,QAAQ,QAAQ,0BAAuB;AAEhD,OAAO,MAAMC,wBAAwB,GAAGA,CAACC,EAAE,GAAG,SAAS,KAAK;EAC1D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAA0B;IAC1DM,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE;EACd,CAAC,CAAC;EAEFT,SAAS,CAAC,MAAM;IACd,MAAMU,OAAO,GAAGP,QAAQ,CAACQ,aAAa,CAACN,EAAE,CAAC;IAE1C,IAAI,CAACK,OAAO,EAAE;MACZ;IACF;IAEAH,QAAQ,CAACG,OAAO,CAACE,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAOF,OAAO,CAACG,SAAS,CAACN,QAAQ,CAAC;EACpC,CAAC,EAAE,CAACF,EAAE,CAAC,CAAC;EAER,MAAMK,OAAO,GAAGP,QAAQ,CAACW,UAAU,CAACT,EAAE,CAAC;EAEvC,MAAMU,YAAY,GAAGd,OAAO,CAAC,MAAM,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhD,OAAO;IACLe,SAAS,EAAEN,OAAO,EAAEM,SAAS,IAAID,YAAY;IAC7CE,YAAY,EAAEP,OAAO,EAAEO,YAAY,IAAIF,YAAY;IACnDG,QAAQ,EAAER,OAAO,EAAEQ,QAAQ,IAAIH,YAAY;IAC3CP,YAAY,EAAEF,KAAK,CAACE,YAAY;IAChCW,UAAU,EAAEb,KAAK,CAACG;EACpB,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useRef","useState","registry","useImageViewerController","id","state","setState","currentIndex","dataLength","manager","setManager","unsubscribeRef","handleManagerChange","newManager","current","getState","subscribe","unsubscribeFromRegistry","subscribeToManager","noopFunction","goToIndex","goToPrevious","goToNext","totalCount"],"sourceRoot":"../../src","sources":["useImageViewerController.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAG5D,SAASC,QAAQ,QAAQ,0BAAuB;AAEhD,OAAO,MAAMC,wBAAwB,GAAGA,CAACC,EAAE,GAAG,SAAS,KAAK;EAC1D,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAA0B;IAC1DM,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE;EACd,CAAC,CAAC;EAEF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAA4B,IAAI,CAAC;EACvE,MAAMU,cAAc,GAAGX,MAAM,CAAsB,IAAI,CAAC;EAExDF,SAAS,CAAC,MAAM;IACd,MAAMc,mBAAmB,GAAIC,UAAqC,IAAK;MACrEF,cAAc,CAACG,OAAO,GAAG,CAAC;MAC1BH,cAAc,CAACG,OAAO,GAAG,IAAI;MAE7BJ,UAAU,CAACG,UAAU,CAAC;MAEtB,IAAIA,UAAU,EAAE;QACdP,QAAQ,CAACO,UAAU,CAACE,QAAQ,CAAC,CAAC,CAAC;QAC/BJ,cAAc,CAACG,OAAO,GAAGD,UAAU,CAACG,SAAS,CAACV,QAAQ,CAAC;QACvD;MACF;MAEAA,QAAQ,CAAC;QAAEC,YAAY,EAAE,CAAC;QAAEC,UAAU,EAAE;MAAE,CAAC,CAAC;IAC9C,CAAC;IAED,MAAMS,uBAAuB,GAAGf,QAAQ,CAACgB,kBAAkB,CAACd,EAAE,EAAEQ,mBAAmB,CAAC;IAEpF,OAAO,MAAM;MACXK,uBAAuB,CAAC,CAAC;MACzBN,cAAc,CAACG,OAAO,GAAG,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACV,EAAE,CAAC,CAAC;EAER,MAAMe,YAAY,GAAGpB,OAAO,CAAC,MAAM,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhD,OAAO;IACLqB,SAAS,EAAEX,OAAO,EAAEW,SAAS,IAAID,YAAY;IAC7CE,YAAY,EAAEZ,OAAO,EAAEY,YAAY,IAAIF,YAAY;IACnDG,QAAQ,EAAEb,OAAO,EAAEa,QAAQ,IAAIH,YAAY;IAC3CZ,YAAY,EAAEF,KAAK,CAACE,YAAY;IAChCgB,UAAU,EAAElB,KAAK,CAACG;EACpB,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -1,9 +1,12 @@
 import ImageViewerManager from './ImageViewerManager';
 declare class ImageViewerRegistry {
     private managers;
+    private subscribers;
+    subscribeToManager(id: string, callback: (manager: ImageViewerManager | null) => void): () => void;
     createManager(id: string): ImageViewerManager | null;
     getManager(id: string): ImageViewerManager | null;
     deleteManager(id: string): void;
+    notifySubscribers(id: string, manager: ImageViewerManager | null): void;
 }
 export declare const registry: ImageViewerRegistry;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"ImageViewerRegistry.d.ts","sourceRoot":"","sources":["../../../src/ImageViewerRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,cAAM,mBAAmB;IACvB,OAAO,CAAC,QAAQ,CAAyC;IAEzD,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI;IAUpD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI;IAIjD,aAAa,CAAC,EAAE,EAAE,MAAM;CAQzB;AAED,eAAO,MAAM,QAAQ,qBAA4B,CAAC"}
+{"version":3,"file":"ImageViewerRegistry.d.ts","sourceRoot":"","sources":["../../../src/ImageViewerRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,cAAM,mBAAmB;IACvB,OAAO,CAAC,QAAQ,CAAyC;IACzD,OAAO,CAAC,WAAW,CAAwE;IAE3F,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI;IAsBrF,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI;IAapD,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI;IAIjD,aAAa,CAAC,EAAE,EAAE,MAAM;IAWxB,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,GAAG,IAAI;CAOjE;AAED,eAAO,MAAM,QAAQ,qBAA4B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useGestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureImageViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD,KAAK,0BAA0B,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAC7C,uBAAuB,CAAC,CAAC,CAAC,EAC1B,aAAa,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACvG,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,CAAC,GAAG,GAAG,EAAE,mPAkB5C,0BAA0B,CAAC,CAAC,CAAC;;;;;;;;iCA8FpB,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;CA0LlD,CAAC"}
+{"version":3,"file":"useGestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureImageViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD,KAAK,0BAA0B,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAC7C,uBAAuB,CAAC,CAAC,CAAC,EAC1B,aAAa,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACvG,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,CAAC,GAAG,GAAG,EAAE,mPAkB5C,0BAA0B,CAAC,CAAC,CAAC;;;;;;;;iCAwGpB,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;CA0LlD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useImageViewerController.d.ts","sourceRoot":"","sources":["../../../src/useImageViewerController.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,GAAI,WAAc;;;;;;CA6BtD,CAAC"}
+{"version":3,"file":"useImageViewerController.d.ts","sourceRoot":"","sources":["../../../src/useImageViewerController.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB,GAAI,WAAc;;;;;;CA0CtD,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "0.3.0",
-  "description": "react-native-gesture-image-viewer",
+  "version": "0.3.2",
+  "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",
   "exports": {
@@ -43,7 +43,27 @@
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "web",
+    "expo",
+    "image-viewer",
+    "image-gallery",
+    "gesture",
+    "pinch-to-zoom",
+    "swipe",
+    "zoom",
+    "customizable",
+    "modal",
+    "carousel",
+    "slider",
+    "photo-viewer",
+    "image-carousel",
+    "touch-gestures",
+    "react-native-reanimated",
+    "react-native-gesture-handler",
+    "lightbox",
+    "gallery",
+    "viewer"
   ],
   "repository": {
     "type": "git",
@@ -64,7 +84,7 @@
     "@changesets/cli": "^2.29.5",
     "@commitlint/config-conventional": "^19.6.0",
     "@evilmartians/lefthook": "^1.5.0",
-    "@react-native/babel-preset": "0.78.2",
+    "@react-native/babel-preset": "0.79.5",
     "@types/babel__core": "^7",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
@@ -72,7 +92,7 @@
     "del-cli": "^5.1.0",
     "jest": "^29.7.0",
     "react": "19.0.0",
-    "react-native": "0.79.4",
+    "react-native": "0.79.5",
     "react-native-builder-bob": "^0.40.12",
     "react-native-gesture-handler": "^2.24.0",
     "react-native-reanimated": "^3.18.0",

package/src/ImageViewerRegistry.ts

@@ -2,6 +2,29 @@ import ImageViewerManager from './ImageViewerManager';
 
 class ImageViewerRegistry {
   private managers = new Map<string, ImageViewerManager>();
+  private subscribers = new Map<string, Set<(manager: ImageViewerManager | null) => void>>();
+
+  subscribeToManager(id: string, callback: (manager: ImageViewerManager | null) => void) {
+    if (!this.subscribers.has(id)) {
+      this.subscribers.set(id, new Set());
+    }
+
+    this.subscribers.get(id)?.add(callback);
+
+    const manager = this.managers.get(id) || null;
+
+    callback(manager);
+
+    return () => {
+      const subscribers = this.subscribers.get(id);
+
+      subscribers?.delete(callback);
+
+      if (subscribers && subscribers.size === 0) {
+        this.subscribers.delete(id);
+      }
+    };
+  }
 
   createManager(id: string): ImageViewerManager | null {
     if (this.managers.has(id)) {
@@ -10,6 +33,9 @@ class ImageViewerRegistry {
 
     const manager = new ImageViewerManager();
     this.managers.set(id, manager);
+
+    this.notifySubscribers(id, manager);
+
     return manager;
   }
 
@@ -23,6 +49,16 @@ class ImageViewerRegistry {
     if (manager) {
       manager.cleanUp();
       this.managers.delete(id);
+
+      this.notifySubscribers(id, null);
+    }
+  }
+
+  notifySubscribers(id: string, manager: ImageViewerManager | null) {
+    const listeners = this.subscribers.get(id);
+
+    if (listeners) {
+      [...listeners].forEach((callback) => callback(manager));
     }
   }
 }

package/src/useGestureImageViewer.ts

@@ -16,7 +16,7 @@ import {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import type { ImageViewerManagerState } from './ImageViewerManager';
+import type ImageViewerManager from './ImageViewerManager';
 import { registry } from './ImageViewerRegistry';
 import type { GestureImageViewerProps } from './types';
 
@@ -49,10 +49,10 @@ export const useGestureImageViewer = <T = any>({
 
   const [isZoomed, setIsZoomed] = useState(false);
 
-  const [managerState, setManagerState] = useState<ImageViewerManagerState>({
-    currentIndex: initialIndex,
-    dataLength: data?.length || 0,
-  });
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [manager, setManager] = useState<ImageViewerManager | null>(null);
+
+  const unsubscribeRef = useRef<(() => void) | null>(null);
 
   const initialTranslateY = useSharedValue(0);
   const initialTranslateX = useSharedValue(0);
@@ -75,20 +75,32 @@ export const useGestureImageViewer = <T = any>({
   );
 
   useEffect(() => {
-    const manager = registry.getManager(id);
+    const handleManagerChange = (manager: ImageViewerManager | null) => {
+      unsubscribeRef.current?.();
+      unsubscribeRef.current = null;
 
-    if (!manager) {
-      return;
-    }
+      setManager(manager);
 
-    setManagerState(manager.getState());
+      if (manager) {
+        setCurrentIndex(manager.getState().currentIndex);
+        unsubscribeRef.current = manager.subscribe((state) => {
+          setCurrentIndex(state.currentIndex);
+        });
+        return;
+      }
 
-    return manager.subscribe(setManagerState);
+      setCurrentIndex(0);
+    };
+
+    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
+
+    return () => {
+      unsubscribeFromRegistry();
+      unsubscribeRef.current?.();
+    };
   }, [id]);
 
   useEffect(() => {
-    const manager = registry.getManager(id);
-
     if (!manager) {
       return;
     }
@@ -97,21 +109,19 @@ export const useGestureImageViewer = <T = any>({
     manager.setEnableSwipeGesture(enableSwipeGesture);
     manager.setCurrentIndex(initialIndex);
     manager.notifyStateChange();
-  }, [dataLength, enableSwipeGesture, initialIndex, id]);
+  }, [dataLength, enableSwipeGesture, initialIndex, manager]);
 
   useEffect(() => {
-    const manager = registry.getManager(id);
-
     if (!manager || !flatListRef.current) {
       return;
     }
 
     manager.setFlatListRef(flatListRef.current);
-  }, [id]);
+  }, [manager]);
 
   useEffect(() => {
-    onIndexChange?.(managerState.currentIndex);
-  }, [managerState.currentIndex, onIndexChange]);
+    onIndexChange?.(currentIndex);
+  }, [currentIndex, onIndexChange]);
 
   useEffect(() => {
     translateY.value = 0;
@@ -145,11 +155,11 @@ export const useGestureImageViewer = <T = any>({
       const contentOffset = event.nativeEvent.contentOffset;
       const newIndex = Math.round(contentOffset.x / width);
 
-      if (newIndex !== managerState.currentIndex && newIndex >= 0 && newIndex < dataLength) {
-        const manager = registry.getManager(id);
-
+      if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
         if (manager) {
           manager.setCurrentIndex(newIndex);
+          setCurrentIndex(newIndex);
+          manager.notifyStateChange();
         }
 
         translateX.value = withTiming(0);
@@ -161,8 +171,8 @@ export const useGestureImageViewer = <T = any>({
       }
     },
     [
-      id,
-      managerState.currentIndex,
+      manager,
+      currentIndex,
       dataLength,
       width,
       enableSwipeGesture,
@@ -309,7 +319,7 @@ export const useGestureImageViewer = <T = any>({
   }, [animateBackdrop]);
 
   return {
-    currentIndex: managerState.currentIndex,
+    currentIndex,
     dataLength,
     translateY,
     flatListRef,

package/src/useImageViewerController.ts

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type ImageViewerManager from './ImageViewerManager';
 import type { ImageViewerManagerState } from './ImageViewerManager';
 import { registry } from './ImageViewerRegistry';
 
@@ -8,19 +9,32 @@ export const useImageViewerController = (id = 'default') => {
     dataLength: 0,
   });
 
+  const [manager, setManager] = useState<ImageViewerManager | null>(null);
+  const unsubscribeRef = useRef<(() => void) | null>(null);
+
   useEffect(() => {
-    const manager = registry.createManager(id);
+    const handleManagerChange = (newManager: ImageViewerManager | null) => {
+      unsubscribeRef.current?.();
+      unsubscribeRef.current = null;
 
-    if (!manager) {
-      return;
-    }
+      setManager(newManager);
 
-    setState(manager.getState());
+      if (newManager) {
+        setState(newManager.getState());
+        unsubscribeRef.current = newManager.subscribe(setState);
+        return;
+      }
 
-    return manager.subscribe(setState);
-  }, [id]);
+      setState({ currentIndex: 0, dataLength: 0 });
+    };
 
-  const manager = registry.getManager(id);
+    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
+
+    return () => {
+      unsubscribeFromRegistry();
+      unsubscribeRef.current?.();
+    };
+  }, [id]);
 
   const noopFunction = useMemo(() => () => {}, []);