react-native-gesture-image-viewer 0.3.1 → 0.4.0

package/README.md

@@ -1,33 +1,354 @@
-# 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}
+      itemSpacing={20}
+      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`|
+|`itemSpacing`|Specifies the spacing between list items.|`0`|
+|`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/GestureImageViewer.js

@@ -26,6 +26,7 @@ export function GestureImageViewer({
   backdropStyle: backdropStyleProps,
   containerStyle,
   initialIndex = 0,
+  itemSpacing = 0,
   ...props
 }) {
   const {
@@ -33,7 +34,6 @@ export function GestureImageViewer({
   } = useWindowDimensions();
   const width = customWidth || screenWidth;
   const {
-    currentIndex,
     flatListRef,
     isZoomed,
     dismissGesture,
@@ -46,28 +46,29 @@ export function GestureImageViewer({
     data,
     width,
     initialIndex,
+    itemSpacing,
     ...props
   });
   const renderItem = useCallback(({
     item,
     index
   }) => {
-    const isActive = index === currentIndex;
-    return /*#__PURE__*/_jsx(Animated.View, {
+    return /*#__PURE__*/_jsx(View, {
       style: [{
-        width,
+        width: width,
         height: '100%',
         justifyContent: 'center',
-        alignItems: 'center'
-      }, isActive && animatedStyle],
+        alignItems: 'center',
+        marginHorizontal: itemSpacing / 2
+      }],
       children: renderImage(item, index)
     });
-  }, [width, renderImage, animatedStyle, currentIndex]);
+  }, [width, itemSpacing, renderImage]);
   const getItemLayout = useCallback((_, index) => ({
-    length: width,
-    offset: width * index,
+    length: width + itemSpacing,
+    offset: (width + itemSpacing) * index,
     index
-  }), [width]);
+  }), [width, itemSpacing]);
   const keyExtractor = useCallback((item, index) => `image-${index}-${item}`, []);
   const gesture = useMemo(() => {
     return Gesture.Race(dismissGesture, zoomGesture);
@@ -83,15 +84,14 @@ export function GestureImageViewer({
         style: [styles.container, containerStyle],
         children: [/*#__PURE__*/_jsx(Animated.View, {
           style: [styles.background, backdropStyleProps, backdropStyle]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.content,
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.content, animatedStyle],
           children: /*#__PURE__*/_jsx(ListComponent, {
             ref: flatListRef,
             data: data,
             renderItem: renderItem,
             keyExtractor: keyExtractor,
             horizontal: true,
-            pagingEnabled: true,
             scrollEnabled: !isZoomed,
             showsHorizontalScrollIndicator: false,
             onMomentumScrollEnd: onMomentumScrollEnd,
@@ -99,7 +99,12 @@ export function GestureImageViewer({
             initialScrollIndex: initialIndex,
             windowSize: 3,
             maxToRenderPerBatch: 3,
-            removeClippedSubviews: true
+            removeClippedSubviews: true,
+            snapToInterval: width + itemSpacing,
+            estimatedItemSize: width + itemSpacing,
+            snapToAlignment: "center",
+            decelerationRate: "fast",
+            scrollEventThrottle: 16
             // NOTE - https://github.com/necolas/react-native-web/issues/1299
             ,
             ...(Platform.OS === 'web' && {

package/lib/module/GestureImageViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useMemo","Platform","StyleSheet","useWindowDimensions","View","FlatList","Gesture","GestureDetector","GestureHandlerRootView","Animated","registry","useGestureImageViewer","jsx","_jsx","jsxs","_jsxs","WebPagingFix","OS","children","GestureImageViewer","id","data","renderImage","renderContainer","ListComponent","width","customWidth","listProps","backdropStyle","backdropStyleProps","containerStyle","initialIndex","props","screenWidth","currentIndex","flatListRef","isZoomed","dismissGesture","zoomGesture","onMomentumScrollEnd","animatedStyle","renderItem","item","index","isActive","style","height","justifyContent","alignItems","getItemLayout","_","length","offset","keyExtractor","gesture","Race","createManager","deleteManager","listComponent","styles","container","background","content","ref","horizontal","pagingEnabled","scrollEnabled","showsHorizontalScrollIndicator","initialScrollIndex","windowSize","maxToRenderPerBatch","removeClippedSubviews","dataSet","create","flex","position","top","left","right","bottom","backgroundColor"],"sourceRoot":"../../src","sources":["GestureImageViewer.tsx"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,QAAQ,EAAEC,UAAU,EAAEC,mBAAmB,EAAEC,IAAI,QAAQ,cAAc;AAC9E,SAASC,QAAQ,EAAEC,OAAO,EAAEC,eAAe,EAAEC,sBAAsB,QAAQ,8BAA8B;AACzG,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,QAAQ,QAAQ,0BAAuB;AAEhD,SAASC,qBAAqB,QAAQ,4BAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhE,MAAMC,YAAY,GAAGA,CAAA,KAAM;EACzB,IAAIf,QAAQ,CAACgB,EAAE,KAAK,KAAK,EAAE;IACzB,OAAO,IAAI;EACb;EAEA,oBAAOJ,IAAA;IAAAK,QAAA,EAAQ;EAA6D,CAAQ,CAAC;AACvF,CAAC;AAED,OAAO,SAASC,kBAAkBA,CAAU;EAC1CC,EAAE,GAAG,SAAS;EACdC,IAAI;EACJC,WAAW;EACXC,eAAe;EACfC,aAAa,GAAGnB,QAAQ;EACxBoB,KAAK,EAAEC,WAAW;EAClBC,SAAS;EACTC,aAAa,EAAEC,kBAAkB;EACjCC,cAAc;EACdC,YAAY,GAAG,CAAC;EAChB,GAAGC;AACuB,CAAC,EAAE;EAC7B,MAAM;IAAEP,KAAK,EAAEQ;EAAY,CAAC,GAAG9B,mBAAmB,CAAC,CAAC;EAEpD,MAAMsB,KAAK,GAAGC,WAAW,IAAIO,WAAW;EAExC,MAAM;IACJC,YAAY;IACZC,WAAW;IACXC,QAAQ;IACRC,cAAc;IACdC,WAAW;IACXC,mBAAmB;IACnBC,aAAa;IACbZ;EACF,CAAC,GAAGjB,qBAAqB,CAAC;IACxBS,EAAE;IACFC,IAAI;IACJI,KAAK;IACLM,YAAY;IACZ,GAAGC;EACL,CAAC,CAAC;EAEF,MAAMS,UAAU,GAAG3C,WAAW,CAC5B,CAAC;IAAE4C,IAAI;IAAEC;EAAkC,CAAC,KAAK;IAC/C,MAAMC,QAAQ,GAAGD,KAAK,KAAKT,YAAY;IAEvC,oBACErB,IAAA,CAACJ,QAAQ,CAACL,IAAI;MACZyC,KAAK,EAAE,CACL;QACEpB,KAAK;QACLqB,MAAM,EAAE,MAAM;QACdC,cAAc,EAAE,QAAQ;QACxBC,UAAU,EAAE;MACd,CAAC,EACDJ,QAAQ,IAAIJ,aAAa,CACzB;MAAAtB,QAAA,EAEDI,WAAW,CAACoB,IAAI,EAAEC,KAAK;IAAC,CACZ,CAAC;EAEpB,CAAC,EACD,CAAClB,KAAK,EAAEH,WAAW,EAAEkB,aAAa,EAAEN,YAAY,CAClD,CAAC;EAED,MAAMe,aAAa,GAAGnD,WAAW,CAC/B,CAACoD,CAAM,EAAEP,KAAa,MAAM;IAC1BQ,MAAM,EAAE1B,KAAK;IACb2B,MAAM,EAAE3B,KAAK,GAAGkB,KAAK;IACrBA;EACF,CAAC,CAAC,EACF,CAAClB,KAAK,CACR,CAAC;EAED,MAAM4B,YAAY,GAAGvD,WAAW,CAAC,CAAC4C,IAAO,EAAEC,KAAa,KAAK,SAASA,KAAK,IAAID,IAAI,EAAE,EAAE,EAAE,CAAC;EAE1F,MAAMY,OAAO,GAAGtD,OAAO,CAAC,MAAM;IAC5B,OAAOM,OAAO,CAACiD,IAAI,CAAClB,cAAc,EAAEC,WAAW,CAAC;EAClD,CAAC,EAAE,CAACA,WAAW,EAAED,cAAc,CAAC,CAAC;EAEjCtC,SAAS,CAAC,MAAM;IACdW,QAAQ,CAAC8C,aAAa,CAACpC,EAAE,CAAC;IAE1B,OAAO,MAAMV,QAAQ,CAAC+C,aAAa,CAACrC,EAAE,CAAC;EACzC,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAER,MAAMsC,aAAa,gBACjB7C,IAAA,CAACL,sBAAsB;IAAAU,QAAA,eACrBL,IAAA,CAACN,eAAe;MAAC+C,OAAO,EAAEA,OAAQ;MAAApC,QAAA,eAChCH,KAAA,CAACX,IAAI;QAACyC,KAAK,EAAE,CAACc,MAAM,CAACC,SAAS,EAAE9B,cAAc,CAAE;QAAAZ,QAAA,gBAC9CL,IAAA,CAACJ,QAAQ,CAACL,IAAI;UAACyC,KAAK,EAAE,CAACc,MAAM,CAACE,UAAU,EAAEhC,kBAAkB,EAAED,aAAa;QAAE,CAAE,CAAC,eAChFf,IAAA,CAACT,IAAI;UAACyC,KAAK,EAAEc,MAAM,CAACG,OAAQ;UAAA5C,QAAA,eAC1BL,IAAA,CAACW,aAAa;YACZuC,GAAG,EAAE5B,WAAY;YACjBd,IAAI,EAAEA,IAAK;YACXoB,UAAU,EAAEA,UAAW;YACvBY,YAAY,EAAEA,YAAa;YAC3BW,UAAU;YACVC,aAAa;YACbC,aAAa,EAAE,CAAC9B,QAAS;YACzB+B,8BAA8B,EAAE,KAAM;YACtC5B,mBAAmB,EAAEA,mBAAoB;YACzCU,aAAa,EAAEA,aAAc;YAC7BmB,kBAAkB,EAAErC,YAAa;YACjCsC,UAAU,EAAE,CAAE;YACdC,mBAAmB,EAAE,CAAE;YACvBC,qBAAqB,EAAE;YACvB;YAAA;YAAA,IACKtE,QAAQ,CAACgB,EAAE,KAAK,KAAK,IAAI;cAAEuD,OAAO,EAAE;gBAAE,oBAAoB,EAAE;cAAK;YAAE,CAAC;YAAA,GACrE7C;UAAS,CACd;QAAC,CACE,CAAC,eACPd,IAAA,CAACG,YAAY,IAAE,CAAC;MAAA,CACZ;IAAC,CACQ;EAAC,CACI,CACzB;EAED,OAAOO,eAAe,GAAGA,eAAe,CAACmC,aAAa,CAAC,GAAGA,aAAa;AACzE;AAEA,MAAMC,MAAM,GAAGzD,UAAU,CAACuE,MAAM,CAAC;EAC/Bb,SAAS,EAAE;IACTc,IAAI,EAAE;EACR,CAAC;EACDZ,OAAO,EAAE;IACPY,IAAI,EAAE,CAAC;IACPjD,KAAK,EAAE,MAAM;IACbqB,MAAM,EAAE;EACV,CAAC;EACDe,UAAU,EAAE;IACVc,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useMemo","Platform","StyleSheet","useWindowDimensions","View","FlatList","Gesture","GestureDetector","GestureHandlerRootView","Animated","registry","useGestureImageViewer","jsx","_jsx","jsxs","_jsxs","WebPagingFix","OS","children","GestureImageViewer","id","data","renderImage","renderContainer","ListComponent","width","customWidth","listProps","backdropStyle","backdropStyleProps","containerStyle","initialIndex","itemSpacing","props","screenWidth","flatListRef","isZoomed","dismissGesture","zoomGesture","onMomentumScrollEnd","animatedStyle","renderItem","item","index","style","height","justifyContent","alignItems","marginHorizontal","getItemLayout","_","length","offset","keyExtractor","gesture","Race","createManager","deleteManager","listComponent","styles","container","background","content","ref","horizontal","scrollEnabled","showsHorizontalScrollIndicator","initialScrollIndex","windowSize","maxToRenderPerBatch","removeClippedSubviews","snapToInterval","estimatedItemSize","snapToAlignment","decelerationRate","scrollEventThrottle","dataSet","create","flex","position","top","left","right","bottom","backgroundColor"],"sourceRoot":"../../src","sources":["GestureImageViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/useGestureImageViewer.js

@@ -22,6 +22,7 @@ export const useGestureImageViewer = ({
   enableDoubleTapGesture = true,
   enableZoomPanGesture = true,
   maxZoomScale = 2,
+  itemSpacing = 0,
   id = 'default'
 }) => {
   const {
@@ -107,7 +108,7 @@ export const useGestureImageViewer = ({
       return;
     }
     const contentOffset = event.nativeEvent.contentOffset;
-    const newIndex = Math.round(contentOffset.x / width);
+    const newIndex = Math.round(contentOffset.x / (width + itemSpacing));
     if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
       if (manager) {
         manager.setCurrentIndex(newIndex);
@@ -121,7 +122,7 @@ export const useGestureImageViewer = ({
       startScale.value = withTiming(1);
       scale.value = withTiming(1);
     }
-  }, [manager, currentIndex, dataLength, width, enableSwipeGesture, translateX, translateY, scale, initialTranslateX, initialTranslateY, startScale]);
+  }, [manager, currentIndex, dataLength, width, itemSpacing, 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;

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","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":[]}
+{"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","itemSpacing","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/typescript/src/GestureImageViewer.d.ts

@@ -1,3 +1,3 @@
 import type { GestureImageViewerProps } from './types';
-export declare function GestureImageViewer<T = any>({ id, data, renderImage, renderContainer, ListComponent, width: customWidth, listProps, backdropStyle: backdropStyleProps, containerStyle, initialIndex, ...props }: GestureImageViewerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function GestureImageViewer<T = any>({ id, data, renderImage, renderContainer, ListComponent, width: customWidth, listProps, backdropStyle: backdropStyleProps, containerStyle, initialIndex, itemSpacing, ...props }: GestureImageViewerProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GestureImageViewer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAWvD,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1C,EAAc,EACd,IAAI,EACJ,WAAW,EACX,eAAe,EACf,aAAwB,EACxB,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAmG5B"}
+{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAWvD,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1C,EAAc,EACd,IAAI,EACJ,WAAW,EACX,eAAe,EACf,aAAwB,EACxB,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CA8F5B"}

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

@@ -24,6 +24,7 @@ export interface GestureImageViewerProps<T = any> {
     enableZoomGesture?: boolean;
     enableDoubleTapGesture?: boolean;
     maxZoomScale?: number;
+    itemSpacing?: number;
 }
 export interface GestureState {
     currentIndex: number;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,GAAG;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC5D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,YAAY,GAAG,UAAU,GAAG,IAAI,CAAC;CACjD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,GAAG;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC5D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,YAAY,GAAG,UAAU,GAAG,IAAI,CAAC;CACjD"}

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

@@ -1,7 +1,7 @@
 import { type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';
 import type { GestureImageViewerProps } from './types';
 type UseGestureImageViewerProps<T = any> = Omit<GestureImageViewerProps<T>, 'renderImage' | 'renderContainer' | 'ListComponent' | 'listProps' | 'containerStyle' | 'backdropStyle'>;
-export declare const useGestureImageViewer: <T = any>({ data, initialIndex, onIndexChange, onDismiss, width: customWidth, dismissThreshold, resistance, animateBackdrop, enableDismissGesture, enableSwipeGesture, enableZoomGesture, enableDoubleTapGesture, enableZoomPanGesture, maxZoomScale, id, }: UseGestureImageViewerProps<T>) => {
+export declare const useGestureImageViewer: <T = any>({ data, initialIndex, onIndexChange, onDismiss, width: customWidth, dismissThreshold, resistance, animateBackdrop, enableDismissGesture, enableSwipeGesture, enableZoomGesture, enableDoubleTapGesture, enableZoomPanGesture, maxZoomScale, itemSpacing, id, }: UseGestureImageViewerProps<T>) => {
     currentIndex: number;
     dataLength: number;
     translateY: import("react-native-reanimated").SharedValue<number>;

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;;;;;;;;iCAwGpB,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,gQAmB5C,0BAA0B,CAAC,CAAC,CAAC;;;;;;;;iCAwGpB,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;CA2LlD,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "0.3.1",
-  "description": "react-native-gesture-image-viewer",
+  "version": "0.4.0",
+  "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/GestureImageViewer.tsx

@@ -25,59 +25,51 @@ export function GestureImageViewer<T = any>({
   backdropStyle: backdropStyleProps,
   containerStyle,
   initialIndex = 0,
+  itemSpacing = 0,
   ...props
 }: GestureImageViewerProps<T>) {
   const { width: screenWidth } = useWindowDimensions();
 
   const width = customWidth || screenWidth;
 
-  const {
-    currentIndex,
-    flatListRef,
-    isZoomed,
-    dismissGesture,
-    zoomGesture,
-    onMomentumScrollEnd,
-    animatedStyle,
-    backdropStyle,
-  } = useGestureImageViewer({
-    id,
-    data,
-    width,
-    initialIndex,
-    ...props,
-  });
+  const { flatListRef, isZoomed, dismissGesture, zoomGesture, onMomentumScrollEnd, animatedStyle, backdropStyle } =
+    useGestureImageViewer({
+      id,
+      data,
+      width,
+      initialIndex,
+      itemSpacing,
+      ...props,
+    });
 
   const renderItem = useCallback(
     ({ item, index }: { item: T; index: number }) => {
-      const isActive = index === currentIndex;
-
       return (
-        <Animated.View
+        <View
           style={[
             {
-              width,
+              width: width,
               height: '100%',
               justifyContent: 'center',
               alignItems: 'center',
+              marginHorizontal: itemSpacing / 2,
             },
-            isActive && animatedStyle,
           ]}
         >
           {renderImage(item, index)}
-        </Animated.View>
+        </View>
       );
     },
-    [width, renderImage, animatedStyle, currentIndex],
+    [width, itemSpacing, renderImage],
   );
 
   const getItemLayout = useCallback(
     (_: any, index: number) => ({
-      length: width,
-      offset: width * index,
+      length: width + itemSpacing,
+      offset: (width + itemSpacing) * index,
       index,
     }),
-    [width],
+    [width, itemSpacing],
   );
 
   const keyExtractor = useCallback((item: T, index: number) => `image-${index}-${item}`, []);
@@ -97,14 +89,13 @@ export function GestureImageViewer<T = any>({
       <GestureDetector gesture={gesture}>
         <View style={[styles.container, containerStyle]}>
           <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
-          <View style={styles.content}>
+          <Animated.View style={[styles.content, animatedStyle]}>
             <ListComponent
               ref={flatListRef}
               data={data}
               renderItem={renderItem}
               keyExtractor={keyExtractor}
               horizontal
-              pagingEnabled
               scrollEnabled={!isZoomed}
               showsHorizontalScrollIndicator={false}
               onMomentumScrollEnd={onMomentumScrollEnd}
@@ -112,12 +103,17 @@ export function GestureImageViewer<T = any>({
               initialScrollIndex={initialIndex}
               windowSize={3}
               maxToRenderPerBatch={3}
-              removeClippedSubviews={true}
+              removeClippedSubviews
+              snapToInterval={width + itemSpacing}
+              estimatedItemSize={width + itemSpacing}
+              snapToAlignment="center"
+              decelerationRate="fast"
+              scrollEventThrottle={16}
               // NOTE - https://github.com/necolas/react-native-web/issues/1299
               {...(Platform.OS === 'web' && { dataSet: { 'paging-enabled-fix': true } })}
               {...listProps}
             />
-          </View>
+          </Animated.View>
           <WebPagingFix />
         </View>
       </GestureDetector>

package/src/types.ts

@@ -25,6 +25,7 @@ export interface GestureImageViewerProps<T = any> {
   enableZoomGesture?: boolean;
   enableDoubleTapGesture?: boolean;
   maxZoomScale?: number;
+  itemSpacing?: number;
 }
 
 export interface GestureState {

package/src/useGestureImageViewer.ts

@@ -42,6 +42,7 @@ export const useGestureImageViewer = <T = any>({
   enableDoubleTapGesture = true,
   enableZoomPanGesture = true,
   maxZoomScale = 2,
+  itemSpacing = 0,
   id = 'default',
 }: UseGestureImageViewerProps<T>) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
@@ -153,7 +154,7 @@ export const useGestureImageViewer = <T = any>({
       }
 
       const contentOffset = event.nativeEvent.contentOffset;
-      const newIndex = Math.round(contentOffset.x / width);
+      const newIndex = Math.round(contentOffset.x / (width + itemSpacing));
 
       if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
         if (manager) {
@@ -175,6 +176,7 @@ export const useGestureImageViewer = <T = any>({
       currentIndex,
       dataLength,
       width,
+      itemSpacing,
       enableSwipeGesture,
       translateX,
       translateY,