react-native-gesture-image-viewer 2.4.0 → 3.0.0-beta.1

package/README.md

@@ -23,7 +23,7 @@ Existing libraries often have limited customization options or performance issue
 - 🎨 **Full Customization** - Total control over components, styles, and gesture behavior
 - 🎛️ **External Control API** - Trigger actions programmatically from buttons or other UI components
 - 🧩 **Multi-Instance Management** - Manage multiple viewers independently using unique IDs
-- 🧬 **Flexible Integration** - Use with Modal, [React Native Modal](https://www.npmjs.com/package/react-native-modal), ScrollView, FlatList, [FlashList](https://www.npmjs.com/package/@shopify/flash-list), [Expo Image](https://www.npmjs.com/package/expo-image), [FastImage](https://github.com/DylanVann/react-native-fast-image), and more
+- 🧬 **Flexible Integration** - Use with Modal, [React Native Modal](https://www.npmjs.com/package/react-native-modal), [Expo Image](https://www.npmjs.com/package/expo-image), [FastImage](https://github.com/DylanVann/react-native-fast-image), videos, and custom content
 - 🧠 **Full TypeScript Support** - Great developer experience with type inference and safety
 - 🌐 **Cross-Platform** - Runs on iOS, Android, and Web with Expo Go and New Architecture compatibility
 - 🪄 **Easy-to-Use API** - Simple and intuitive API that requires minimal setup
@@ -34,6 +34,8 @@ Existing libraries often have limited customization options or performance issue
 
 Full documentation is available at: <https://react-native-gesture-image-viewer.pages.dev>
 
+> v3 is currently in beta. Install it with `react-native-gesture-image-viewer@beta` and use the [v3 beta docs](https://react-native-gesture-image-viewer.pages.dev/3.x-beta/). The docs root still points to the stable v2 documentation.
+
 ### Examples & Demo
 
 - [📁 Example Project](/example/) - Real implementation code with various use cases
@@ -50,7 +52,7 @@ Full documentation is available at: <https://react-native-gesture-image-viewer.p
 
 ```tsx
 import { useCallback, useState } from 'react';
-import { ScrollView, Image, Modal, View, Text, Button, Pressable } from 'react-native';
+import { Image, Modal, View, Text, Button, Pressable } from 'react-native';
 import {
   GestureViewer,
   GestureTrigger,
@@ -95,7 +97,7 @@ function App() {
           data={images}
           initialIndex={selectedIndex}
           renderItem={renderImage}
-          ListComponent={ScrollView}
+          pageSpacing={16}
           onDismiss={() => setVisible(false)}
         />
         <View>

package/lib/module/GestureViewer.js

@@ -1,212 +1,161 @@
 "use strict";
 
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import { useEffect, useMemo } from 'react';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { composeGestureViewerGestures } from "./gestureViewerGestures.js";
 import { registry } from "./GestureViewerRegistry.js";
+import { getWebContentProps } from './getWebContentProps';
 import { useGestureViewer } from "./useGestureViewer.js";
-import { createLoopData, isFlashListLike, isFlatListLike, isScrollViewLike, shouldUseNativeScrollGesture } from "./utils/index.js";
-import WebPagingFixStyle from "./WebPagingFixStyle.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function RenderWindowSlotView({
+  animatedStyle,
+  height,
+  isActive,
+  pageStride,
+  renderItem,
+  slot,
+  visualPage,
+  width
+}) {
+  const slotAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: (slot.virtualIndex - visualPage.get()) * pageStride
+    }]
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.slot, {
+      height,
+      width
+    }, slotAnimatedStyle],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.page, isActive && animatedStyle],
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.item, {
+          height,
+          width
+        }],
+        children: renderItem(slot.item, slot.logicalIndex, {
+          isActive
+        })
+      })
+    })
+  });
+}
 export function GestureViewer({
   id = 'default',
   data,
-  renderItem: renderItemProp,
+  renderItem,
   renderContainer,
-  ListComponent,
   width: customWidth,
   height: customHeight,
-  listProps,
   backdropStyle: backdropStyleProps,
   containerStyle,
   initialIndex = 0,
-  itemSpacing = 0,
-  enableSnapMode = false,
+  pageSpacing = 0,
+  windowSize = 3,
   enableLoop = false,
   ...props
 }) {
-  const Component = ListComponent;
-  const dataRef = useRef(data);
   const {
     width: screenWidth,
     height: screenHeight
   } = useWindowDimensions();
   const width = customWidth || screenWidth;
   const height = customHeight || screenHeight;
-  const loopData = useMemo(() => createLoopData(dataRef, enableLoop), [enableLoop]);
-  const isScrollView = isScrollViewLike(Component);
-  const isFlashList = isFlashListLike(Component);
   const {
-    activeListIndex,
-    listRef,
-    isZoomed,
-    isRotated,
-    isPinching,
-    dismissGesture,
-    zoomGesture,
-    nativeScrollGesture,
-    onWebClick,
-    onMomentumScrollEnd,
-    onScroll,
-    onScrollBeginDrag,
     animatedStyle,
     backdropStyle,
-    handleDismiss
+    centerVirtualIndex,
+    dismissGesture,
+    handleDismiss,
+    horizontalPagingGesture,
+    onWebClick,
+    pageStride,
+    renderWindowSlots,
+    visualPage,
+    zoomGesture,
+    zoomPinchGesture
   } = useGestureViewer({
     id,
     data,
     width,
     height,
     initialIndex,
-    itemSpacing,
+    pageSpacing,
+    windowSize,
     enableLoop,
     ...props
   });
-  const keyExtractor = useCallback((item, index) => {
-    if (enableLoop) {
-      return typeof item === 'string' ? `${item}-${index}` : `item-${index}`;
-    }
-    return typeof item === 'string' ? item : `image-${index}`;
-  }, [enableLoop]);
-  const renderItem = useCallback(({
-    item,
-    index,
-    target
-  }) => {
-    const isFlashListCell = !isFlashList || target === undefined || target === 'Cell';
-    return /*#__PURE__*/_jsx(View, {
-      style: [{
-        width,
-        height,
-        marginHorizontal: itemSpacing / 2
-      }, styles.item],
-      children: renderItemProp(item, index, {
-        isActive: index === activeListIndex && isFlashListCell
-      })
-    }, isScrollView ? keyExtractor(item, index) : undefined);
-  }, [activeListIndex, width, itemSpacing, renderItemProp, keyExtractor, isScrollView, isFlashList, height]);
-  const getItemLayout = useCallback((_, index) => ({
-    length: width + itemSpacing,
-    offset: (width + itemSpacing) * index,
-    index
-  }), [width, itemSpacing]);
   const gesture = useMemo(() => {
-    return Gesture.Race(dismissGesture, zoomGesture);
-  }, [zoomGesture, dismissGesture]);
-  useEffect(() => {
-    dataRef.current = data;
-  }, [data]);
+    return composeGestureViewerGestures({
+      dismissGesture,
+      horizontalPagingGesture,
+      zoomGesture,
+      zoomPinchGesture
+    });
+  }, [dismissGesture, horizontalPagingGesture, zoomGesture, zoomPinchGesture]);
   useEffect(() => {
     registry.createManager(id);
     return () => registry.deleteManager(id);
   }, [id]);
-  const commonProps = useMemo(() => ({
-    horizontal: true,
-    scrollEnabled: !isZoomed && !isRotated && !isPinching,
-    showsHorizontalScrollIndicator: false,
-    onMomentumScrollEnd,
-    onScroll,
-    onScrollBeginDrag,
-    ...(enableSnapMode ? {
-      snapToInterval: width + itemSpacing,
-      snapToAlignment: 'center',
-      decelerationRate: 'fast'
-    } : {
-      pagingEnabled: true
-    }),
-    scrollEventThrottle: 16,
-    removeClippedSubviews: true
-  }), [width, itemSpacing, isZoomed, isRotated, isPinching, onMomentumScrollEnd, onScroll, onScrollBeginDrag, enableSnapMode]);
   const control = useMemo(() => ({
     dismiss: handleDismiss
   }), [handleDismiss]);
-  const shouldWrapScrollableWithNativeGesture = shouldUseNativeScrollGesture(Platform.OS, Component);
-  const maybeWrapWithNativeScrollGesture = useCallback(children => {
-    if (!shouldWrapScrollableWithNativeGesture) {
-      return children;
-    }
-    return /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: nativeScrollGesture,
-      children: children
-    });
-  }, [nativeScrollGesture, shouldWrapScrollableWithNativeGesture]);
-  const listComponent = /*#__PURE__*/_jsx(GestureHandlerRootView, {
+  const webContentProps = getWebContentProps(onWebClick);
+  const viewer = /*#__PURE__*/_jsx(GestureHandlerRootView, {
     children: /*#__PURE__*/_jsx(GestureDetector, {
       gesture: gesture,
       children: /*#__PURE__*/_jsxs(View, {
-        style: [{
-          width,
-          height
+        style: [styles.container, {
+          height,
+          width
         }, containerStyle],
         children: [/*#__PURE__*/_jsx(Animated.View, {
           style: [styles.background, backdropStyleProps, backdropStyle]
         }), /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.content, animatedStyle],
-          ...(Platform.OS === 'web' && {
-            onClick: onWebClick
-          }),
-          ...(Platform.OS === 'web' && isFlashList && {
-            dataSet: {
-              'flash-list-paging-enabled-fix': true
-            }
-          }),
-          children: isScrollView ? maybeWrapWithNativeScrollGesture(/*#__PURE__*/_jsx(Component, {
-            ref: listRef,
-            ...commonProps,
-            ...listProps,
-            children: loopData.map((item, index) => renderItem({
-              item,
-              index
-            }))
-          })) : isFlatListLike(Component) && maybeWrapWithNativeScrollGesture(/*#__PURE__*/_jsx(Component, {
-            ref: listRef,
-            ...commonProps,
-            data: loopData,
+          style: styles.content,
+          ...webContentProps,
+          children: renderWindowSlots.map(slot => /*#__PURE__*/_jsx(RenderWindowSlotView, {
+            animatedStyle: animatedStyle,
+            height: height,
+            isActive: slot.virtualIndex === centerVirtualIndex,
+            pageStride: pageStride,
             renderItem: renderItem,
-            initialScrollIndex: enableLoop && data.length > 1 ? initialIndex + 1 : initialIndex,
-            keyExtractor: keyExtractor,
-            ...(isFlashList ?
-            // NOTE - Deprecated estimatedItemSize for FlashList V2 (https://shopify.github.io/flash-list/docs/v2-changes#deprecated)
-            {
-              estimatedItemSize: width + itemSpacing
-            } : {
-              windowSize: 3,
-              maxToRenderPerBatch: 3,
-              getItemLayout
-            }),
-            ...(Platform.OS === 'web' && isFlatListLike(Component) && {
-              dataSet: {
-                'flat-list-paging-enabled-fix': true
-              }
-            }),
-            ...listProps
-          }))
-        }), /*#__PURE__*/_jsx(WebPagingFixStyle, {
-          Component: Component
+            slot: slot,
+            visualPage: visualPage,
+            width: width
+          }, slot.slotKey))
         })]
       })
     })
   });
-  return renderContainer ? renderContainer(listComponent, control) : listComponent;
+  return renderContainer ? renderContainer(viewer, control) : viewer;
 }
 const styles = StyleSheet.create({
+  background: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: '#000'
+  },
+  container: {
+    overflow: 'hidden'
+  },
   content: {
-    flex: 1,
-    width: '100%',
-    height: '100%'
+    ...StyleSheet.absoluteFill,
+    overflow: 'hidden'
   },
   item: {
-    justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  background: {
-    position: 'absolute',
-    top: 0,
+  page: {
+    flex: 1
+  },
+  slot: {
     left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'black'
+    position: 'absolute',
+    top: 0
   }
 });
 //# sourceMappingURL=GestureViewer.js.map

package/lib/module/GestureViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useMemo","useRef","Platform","StyleSheet","useWindowDimensions","View","Gesture","GestureDetector","GestureHandlerRootView","Animated","registry","useGestureViewer","createLoopData","isFlashListLike","isFlatListLike","isScrollViewLike","shouldUseNativeScrollGesture","WebPagingFixStyle","jsx","_jsx","jsxs","_jsxs","GestureViewer","id","data","renderItem","renderItemProp","renderContainer","ListComponent","width","customWidth","height","customHeight","listProps","backdropStyle","backdropStyleProps","containerStyle","initialIndex","itemSpacing","enableSnapMode","enableLoop","props","Component","dataRef","screenWidth","screenHeight","loopData","isScrollView","isFlashList","activeListIndex","listRef","isZoomed","isRotated","isPinching","dismissGesture","zoomGesture","nativeScrollGesture","onWebClick","onMomentumScrollEnd","onScroll","onScrollBeginDrag","animatedStyle","handleDismiss","keyExtractor","item","index","target","isFlashListCell","undefined","style","marginHorizontal","styles","children","isActive","getItemLayout","_","length","offset","gesture","Race","current","createManager","deleteManager","commonProps","horizontal","scrollEnabled","showsHorizontalScrollIndicator","snapToInterval","snapToAlignment","decelerationRate","pagingEnabled","scrollEventThrottle","removeClippedSubviews","control","dismiss","shouldWrapScrollableWithNativeGesture","OS","maybeWrapWithNativeScrollGesture","listComponent","background","content","onClick","dataSet","ref","map","initialScrollIndex","estimatedItemSize","windowSize","maxToRenderPerBatch","create","flex","justifyContent","alignItems","position","top","left","right","bottom","backgroundColor"],"sourceRoot":"../../src","sources":["GestureViewer.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","StyleSheet","useWindowDimensions","View","GestureDetector","GestureHandlerRootView","Animated","useAnimatedStyle","composeGestureViewerGestures","registry","getWebContentProps","useGestureViewer","jsx","_jsx","jsxs","_jsxs","RenderWindowSlotView","animatedStyle","height","isActive","pageStride","renderItem","slot","visualPage","width","slotAnimatedStyle","transform","translateX","virtualIndex","get","style","styles","children","page","item","logicalIndex","GestureViewer","id","data","renderContainer","customWidth","customHeight","backdropStyle","backdropStyleProps","containerStyle","initialIndex","pageSpacing","windowSize","enableLoop","props","screenWidth","screenHeight","centerVirtualIndex","dismissGesture","handleDismiss","horizontalPagingGesture","onWebClick","renderWindowSlots","zoomGesture","zoomPinchGesture","gesture","createManager","deleteManager","control","dismiss","webContentProps","viewer","container","background","content","map","slotKey","create","absoluteFill","backgroundColor","overflow","alignItems","justifyContent","flex","left","position","top"],"sourceRoot":"../../src","sources":["GestureViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/GestureViewerManager.js

@@ -1,25 +1,24 @@
 "use strict";
 
 import { withTiming } from 'react-native-reanimated';
-import { createBoundsConstraint, createScrollAction } from "./utils/index.js";
+import { createBoundsConstraint } from "./utils/index.js";
+const DEFAULT_STATE_READER = () => ({
+  currentIndex: 0,
+  totalCount: 0
+});
 class GestureViewerManager {
-  currentIndex = 0;
-  dataLength = 0;
   width = 0;
   height = 0;
   maxZoomScale = 2;
-  enableHorizontalSwipe = true;
-  enableLoop = false;
-  listRef = null;
+  navigationAdapter = null;
+  stateReader = DEFAULT_STATE_READER;
   scale = null;
   rotation = null;
   translateX = null;
   translateY = null;
-  resetTransformCallback = null;
-  loopCallback = null;
-  programmaticScrollVersion = 0;
   listeners = new Set();
   eventListeners = new Map();
+  eventListenerPresenceSubscribers = new Set();
   notifyListeners() {
     const state = this.getState();
     this.listeners.forEach(listener => listener(state));
@@ -35,6 +34,7 @@ class GestureViewerManager {
       this.eventListeners.set(eventType, new Set());
     }
     this.eventListeners.get(eventType)?.add(callback);
+    this.notifyEventListenerPresence(eventType);
     return () => {
       const listeners = this.eventListeners.get(eventType);
       if (listeners) {
@@ -43,8 +43,29 @@ class GestureViewerManager {
           this.eventListeners.delete(eventType);
         }
       }
+      this.notifyEventListenerPresence(eventType);
     };
   }
+  subscribeToEventListenerPresence(callback) {
+    this.eventListenerPresenceSubscribers.add(callback);
+    this.notifyEventListenerPresenceSubscriber(callback, 'zoomChange');
+    this.notifyEventListenerPresenceSubscriber(callback, 'rotationChange');
+    this.notifyEventListenerPresenceSubscriber(callback, 'tap');
+    return () => {
+      this.eventListenerPresenceSubscribers.delete(callback);
+    };
+  }
+  hasEventListeners(eventType) {
+    return (this.eventListeners.get(eventType)?.size ?? 0) > 0;
+  }
+  notifyEventListenerPresence(eventType) {
+    this.eventListenerPresenceSubscribers.forEach(callback => {
+      this.notifyEventListenerPresenceSubscriber(callback, eventType);
+    });
+  }
+  notifyEventListenerPresenceSubscriber(callback, eventType) {
+    callback(eventType, this.hasEventListeners(eventType));
+  }
   emitEvent(eventType, data) {
     const listeners = this.eventListeners.get(eventType);
     if (listeners) {
@@ -67,16 +88,7 @@ class GestureViewerManager {
     this.emitEvent('tap', data);
   };
   getState() {
-    return {
-      currentIndex: this.currentIndex,
-      totalCount: this.dataLength
-    };
-  }
-  getProgrammaticScrollVersion() {
-    return this.programmaticScrollVersion;
-  }
-  setEnableLoop(enabled) {
-    this.enableLoop = enabled;
+    return this.stateReader();
   }
   setWidth(width) {
     this.width = width;
@@ -84,19 +96,11 @@ class GestureViewerManager {
   setHeight(height) {
     this.height = height;
   }
-  setListRef(ref) {
-    this.listRef = ref;
-  }
-  setDataLength(length) {
-    this.dataLength = length;
-  }
-  setEnableHorizontalSwipe(enabled) {
-    this.enableHorizontalSwipe = enabled;
+  setNavigationAdapter(adapter) {
+    this.navigationAdapter = adapter;
   }
-  setCurrentIndex(index) {
-    if (index !== this.currentIndex) {
-      this.currentIndex = index;
-    }
+  setStateReader(reader) {
+    this.stateReader = reader ?? DEFAULT_STATE_READER;
   }
   setZoomSharedValues(scale, translateX, translateY, maxZoomScale) {
     this.scale = scale;
@@ -104,9 +108,6 @@ class GestureViewerManager {
     this.translateY = translateY;
     this.maxZoomScale = maxZoomScale;
   }
-  setResetTransformCallback(callback) {
-    this.resetTransformCallback = callback;
-  }
   notifyStateChange() {
     this.notifyListeners();
   }
@@ -184,93 +185,36 @@ class GestureViewerManager {
     this.translateX.set(withTiming(0));
     this.translateY.set(withTiming(0));
   };
-  goToIndex = index => {
-    if (!this.enableHorizontalSwipe || !this.listRef) {
-      return;
-    }
-    this.cancelPendingLoopTransition();
-    const {
-      scrollTo
-    } = createScrollAction(this.listRef, this.width);
-    if (this.enableLoop && this.dataLength > 1) {
-      if (index < 0) {
-        this.loopCallback = () => {
-          scrollTo(this.dataLength, false);
-          this.updateCurrentIndex(this.dataLength - 1);
-          this.cancelPendingLoopTransition();
-        };
-        this.resetTransformCallback?.();
-        this.programmaticScrollVersion += 1;
-        scrollTo(0, true);
-        return;
-      }
-      if (index >= this.dataLength) {
-        this.loopCallback = () => {
-          scrollTo(1, false);
-          this.updateCurrentIndex(0);
-          this.cancelPendingLoopTransition();
-        };
-        this.resetTransformCallback?.();
-        this.programmaticScrollVersion += 1;
-        scrollTo(this.dataLength + 1, true);
-        return;
-      }
-      this.resetTransformCallback?.();
-      this.programmaticScrollVersion += 1;
-      scrollTo(index + 1, true);
-      this.updateCurrentIndex(index);
-      return;
-    }
-    if (index < 0 || index >= this.dataLength) {
+  goToIndex = (index, options) => {
+    if (!this.navigationAdapter) {
       return;
     }
-    this.resetTransformCallback?.();
-    this.programmaticScrollVersion += 1;
-    scrollTo(index, true);
-    this.updateCurrentIndex(index);
-  };
-  handleMomentumScrollEnd = scrollIndex => {
-    if (!this.loopCallback) {
-      return false;
-    }
-    if (scrollIndex === 0 || scrollIndex === this.dataLength + 1) {
-      this.loopCallback();
-      return true;
-    }
-    this.cancelPendingLoopTransition();
-    return true;
-  };
-  cancelPendingLoopTransition = () => {
-    this.loopCallback = null;
-  };
-  handleScrollBeginDrag = () => {
-    this.cancelPendingLoopTransition();
+    this.navigationAdapter.goToIndex(index, options);
   };
   goToPrevious = () => {
-    this.goToIndex(this.currentIndex - 1);
+    if (!this.navigationAdapter) {
+      return;
+    }
+    this.navigationAdapter.goToPrevious();
   };
   goToNext = () => {
-    this.goToIndex(this.currentIndex + 1);
+    if (!this.navigationAdapter) {
+      return;
+    }
+    this.navigationAdapter.goToNext();
   };
   cleanUp() {
-    this.cancelPendingLoopTransition();
     this.listeners.clear();
-    this.listRef = null;
-    this.enableHorizontalSwipe = true;
-    this.currentIndex = 0;
-    this.dataLength = 0;
+    this.navigationAdapter = null;
+    this.stateReader = DEFAULT_STATE_READER;
     this.maxZoomScale = 2;
     this.scale = null;
     this.translateX = null;
     this.translateY = null;
     this.rotation = null;
-    this.resetTransformCallback = null;
     this.eventListeners.clear();
+    this.eventListenerPresenceSubscribers.clear();
   }
-  updateCurrentIndex = targetIndex => {
-    this.currentIndex = targetIndex;
-    this.notifyListeners();
-  };
 }
 export default GestureViewerManager;
 //# sourceMappingURL=GestureViewerManager.js.map