react-native-gesture-image-viewer 2.1.2 → 2.1.4

package/src/GestureViewer.tsx

@@ -1,11 +1,24 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Platform, type ScrollViewProps, StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  Platform,
+  type ScrollViewProps,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
+
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerProps } from './types';
 import { useGestureViewer } from './useGestureViewer';
-import { createLoopData, isFlashListLike, isFlatListLike, isScrollViewLike } from './utils';
+import {
+  createLoopData,
+  isFlashListLike,
+  isFlatListLike,
+  isScrollViewLike,
+  shouldUseNativeScrollGesture,
+} from './utils';
 import WebPagingFixStyle from './WebPagingFixStyle';
 
 export function GestureViewer<ItemT, LC>({
@@ -45,7 +58,10 @@ export function GestureViewer<ItemT, LC>({
     isPinching,
     dismissGesture,
     zoomGesture,
+    nativeScrollGesture,
+    onWebDoubleClick,
     onMomentumScrollEnd,
+    onScroll,
     onScrollBeginDrag,
     animatedStyle,
     backdropStyle,
@@ -122,7 +138,8 @@ export function GestureViewer<ItemT, LC>({
         horizontal: true,
         scrollEnabled: !isZoomed && !isRotated && !isPinching,
         showsHorizontalScrollIndicator: false,
-        onMomentumScrollEnd: onMomentumScrollEnd,
+        onMomentumScrollEnd,
+        onScroll,
         onScrollBeginDrag,
         ...(enableSnapMode
           ? {
@@ -136,11 +153,37 @@ export function GestureViewer<ItemT, LC>({
         scrollEventThrottle: 16,
         removeClippedSubviews: true,
       }) satisfies ScrollViewProps,
-    [width, itemSpacing, isZoomed, isRotated, isPinching, onMomentumScrollEnd, onScrollBeginDrag, enableSnapMode],
+    [
+      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: React.ReactNode) => {
+      if (!shouldWrapScrollableWithNativeGesture) {
+        return children;
+      }
+
+      return <GestureDetector gesture={nativeScrollGesture}>{children}</GestureDetector>;
+    },
+    [nativeScrollGesture, shouldWrapScrollableWithNativeGesture],
+  );
+
   const listComponent = (
     <GestureHandlerRootView>
       <GestureDetector gesture={gesture}>
@@ -148,33 +191,39 @@ export function GestureViewer<ItemT, LC>({
           <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
           <Animated.View
             style={[styles.content, animatedStyle]}
+            {...(Platform.OS === 'web' && { onClick: onWebDoubleClick })}
             {...(Platform.OS === 'web' &&
               isFlashListLike(Component) && { dataSet: { 'flash-list-paging-enabled-fix': true } })}
           >
-            {isScrollView ? (
-              <Component ref={listRef} {...commonProps} {...listProps}>
-                {loopData.map((item, index) => renderItem({ item, index }))}
-              </Component>
-            ) : (
-              isFlatListLike(Component) && (
-                <Component
-                  ref={listRef}
-                  {...commonProps}
-                  data={loopData}
-                  renderItem={renderItem}
-                  initialScrollIndex={enableLoop && data.length > 1 ? initialIndex + 1 : initialIndex}
-                  keyExtractor={keyExtractor}
-                  {...(isFlashListLike(Component)
-                    ? // NOTE - Deprecated estimatedItemSize for FlashList V2 (https://shopify.github.io/flash-list/docs/v2-changes#deprecated)
-                      { estimatedItemSize: width + itemSpacing }
-                    : { windowSize: 3, maxToRenderPerBatch: 3, getItemLayout })}
-                  // NOTE - https://github.com/necolas/react-native-web/issues/1299
-                  {...(Platform.OS === 'web' &&
-                    isFlatListLike(Component) && { dataSet: { 'flat-list-paging-enabled-fix': true } })}
-                  {...listProps}
-                />
-              )
-            )}
+            {isScrollView
+              ? maybeWrapWithNativeScrollGesture(
+                  <Component ref={listRef} {...commonProps} {...listProps}>
+                    {loopData.map((item, index) => renderItem({ item, index }))}
+                  </Component>,
+                )
+              : isFlatListLike(Component) &&
+                maybeWrapWithNativeScrollGesture(
+                  <Component
+                    ref={listRef}
+                    {...commonProps}
+                    data={loopData}
+                    renderItem={renderItem}
+                    initialScrollIndex={
+                      enableLoop && data.length > 1 ? initialIndex + 1 : initialIndex
+                    }
+                    keyExtractor={keyExtractor}
+                    {...(isFlashListLike(Component)
+                      ? // NOTE - Deprecated estimatedItemSize for FlashList V2 (https://shopify.github.io/flash-list/docs/v2-changes#deprecated)
+                        { estimatedItemSize: width + itemSpacing }
+                      : { windowSize: 3, maxToRenderPerBatch: 3, getItemLayout })}
+                    // NOTE - https://github.com/necolas/react-native-web/issues/1299
+                    {...(Platform.OS === 'web' &&
+                      isFlatListLike(Component) && {
+                        dataSet: { 'flat-list-paging-enabled-fix': true },
+                      })}
+                    {...listProps}
+                  />,
+                )}
           </Animated.View>
           <WebPagingFixStyle Component={Component} />
         </View>

package/src/GestureViewerManager.ts

@@ -1,4 +1,5 @@
 import { type SharedValue, withTiming } from 'react-native-reanimated';
+
 import type {
   GestureViewerEventCallback,
   GestureViewerEventData,
@@ -21,8 +22,10 @@ class GestureViewerManager {
   private rotation: SharedValue<number> | null = null;
   private translateX: SharedValue<number> | null = null;
   private translateY: SharedValue<number> | null = null;
+  private resetTransformCallback: (() => void) | null = null;
 
   private loopCallback: (() => void) | null = null;
+  private programmaticScrollVersion = 0;
 
   private listeners = new Set<(state: GestureViewerState) => void>();
   private eventListeners = new Map<GestureViewerEventType, Set<(data: any) => void>>();
@@ -41,7 +44,10 @@ class GestureViewerManager {
     };
   }
 
-  addEventListener<T extends GestureViewerEventType>(eventType: T, callback: GestureViewerEventCallback<T>) {
+  addEventListener<T extends GestureViewerEventType>(
+    eventType: T,
+    callback: GestureViewerEventCallback<T>,
+  ) {
     if (!this.eventListeners.has(eventType)) {
       this.eventListeners.set(eventType, new Set());
     }
@@ -61,7 +67,10 @@ class GestureViewerManager {
     };
   }
 
-  private emitEvent<T extends GestureViewerEventType>(eventType: T, data: GestureViewerEventData[T]) {
+  private emitEvent<T extends GestureViewerEventType>(
+    eventType: T,
+    data: GestureViewerEventData[T],
+  ) {
     const listeners = this.eventListeners.get(eventType);
 
     if (listeners) {
@@ -84,6 +93,10 @@ class GestureViewerManager {
     };
   }
 
+  getProgrammaticScrollVersion() {
+    return this.programmaticScrollVersion;
+  }
+
   setEnableLoop(enabled: boolean) {
     this.enableLoop = enabled;
   }
@@ -126,6 +139,10 @@ class GestureViewerManager {
     this.maxZoomScale = maxZoomScale;
   }
 
+  setResetTransformCallback(callback: (() => void) | null) {
+    this.resetTransformCallback = callback;
+  }
+
   notifyStateChange() {
     this.notifyListeners();
   }
@@ -154,7 +171,9 @@ class GestureViewerManager {
     }
 
     if (angle === 360) {
-      this.rotation.value = withTiming(clockwise ? this.rotation.value + MAX_ANGLE : this.rotation.value - MAX_ANGLE);
+      this.rotation.value = withTiming(
+        clockwise ? this.rotation.value + MAX_ANGLE : this.rotation.value - MAX_ANGLE,
+      );
       return;
     }
 
@@ -164,7 +183,13 @@ class GestureViewerManager {
   };
 
   zoomIn = (multiplier = 0.25) => {
-    if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
+    if (
+      !this.scale ||
+      !this.translateX ||
+      !this.translateY ||
+      multiplier < 0.01 ||
+      multiplier > 1
+    ) {
       return;
     }
 
@@ -186,7 +211,13 @@ class GestureViewerManager {
   };
 
   zoomOut = (multiplier = 0.25) => {
-    if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
+    if (
+      !this.scale ||
+      !this.translateX ||
+      !this.translateY ||
+      multiplier < 0.01 ||
+      multiplier > 1
+    ) {
       return;
     }
 
@@ -214,7 +245,13 @@ class GestureViewerManager {
   };
 
   resetZoom = (scale = 1) => {
-    if (!this.scale || !this.translateX || !this.translateY || scale <= 0 || scale > this.maxZoomScale) {
+    if (
+      !this.scale ||
+      !this.translateX ||
+      !this.translateY ||
+      scale <= 0 ||
+      scale > this.maxZoomScale
+    ) {
       return;
     }
 
@@ -228,7 +265,7 @@ class GestureViewerManager {
       return;
     }
 
-    this.loopCallback = null;
+    this.cancelPendingLoopTransition();
 
     const { scrollTo } = createScrollAction(this.listRef, this.width);
 
@@ -237,9 +274,11 @@ class GestureViewerManager {
         this.loopCallback = () => {
           scrollTo(this.dataLength, false);
           this.updateCurrentIndex(this.dataLength - 1);
-          this.loopCallback = null;
+          this.cancelPendingLoopTransition();
         };
 
+        this.resetTransformCallback?.();
+        this.programmaticScrollVersion += 1;
         scrollTo(0, true);
         return;
       }
@@ -248,13 +287,17 @@ class GestureViewerManager {
         this.loopCallback = () => {
           scrollTo(1, false);
           this.updateCurrentIndex(0);
-          this.loopCallback = null;
+          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);
 
@@ -265,6 +308,8 @@ class GestureViewerManager {
       return;
     }
 
+    this.resetTransformCallback?.();
+    this.programmaticScrollVersion += 1;
     scrollTo(index, true);
     this.updateCurrentIndex(index);
   };
@@ -279,14 +324,18 @@ class GestureViewerManager {
       return true;
     }
 
-    this.loopCallback = null;
+    this.cancelPendingLoopTransition();
     return true;
   };
 
-  handleScrollBeginDrag = () => {
+  cancelPendingLoopTransition = () => {
     this.loopCallback = null;
   };
 
+  handleScrollBeginDrag = () => {
+    this.cancelPendingLoopTransition();
+  };
+
   goToPrevious = () => {
     this.goToIndex(this.currentIndex - 1);
   };
@@ -296,7 +345,7 @@ class GestureViewerManager {
   };
 
   cleanUp() {
-    this.loopCallback = null;
+    this.cancelPendingLoopTransition();
     this.listeners.clear();
     this.listRef = null;
     this.enableHorizontalSwipe = true;
@@ -307,6 +356,7 @@ class GestureViewerManager {
     this.translateX = null;
     this.translateY = null;
     this.rotation = null;
+    this.resetTransformCallback = null;
     this.eventListeners.clear();
   }
 

package/src/GestureViewerRegistry.ts

@@ -1,4 +1,5 @@
 import type { View } from 'react-native';
+
 import GestureViewerManager from './GestureViewerManager';
 
 class GestureViewerRegistry {

package/src/WebPagingFixStyle.tsx

@@ -1,4 +1,5 @@
 import { Platform } from 'react-native';
+
 import { isFlashListLike, isFlatListLike } from './utils';
 
 type WebPagingFixStyleProps = {

package/src/types.ts

@@ -9,7 +9,10 @@ import type {
   ViewStyle,
   ViewToken,
 } from 'react-native';
-import type { FlatList as GHFlatList, ScrollView as GHScrollView } from 'react-native-gesture-handler';
+import type {
+  FlatList as GHFlatList,
+  ScrollView as GHScrollView,
+} from 'react-native-gesture-handler';
 import type { WithTimingConfig } from 'react-native-reanimated';
 
 export type FlatListComponent<ItemT> = typeof RNFlatList<ItemT> | typeof GHFlatList<ItemT>;
@@ -17,39 +20,43 @@ export type ScrollViewComponent = typeof RNScrollView | typeof GHScrollView;
 
 interface ViewabilityConfigCallbackPair<TItem> {
   viewabilityConfig: ViewabilityConfig;
-  onViewableItemsChanged: ((info: { viewableItems: ViewToken<TItem>[]; changed: ViewToken<TItem>[] }) => void) | null;
+  onViewableItemsChanged:
+    | ((info: { viewableItems: ViewToken<TItem>[]; changed: ViewToken<TItem>[] }) => void)
+    | null;
 }
 
 // Helper type to instantiate generic components with specific type parameter
-export type InstantiateGeneric<ItemT, LC> = LC extends React.ComponentType<infer P>
-  ? P extends Record<string, any>
-    ? {
-        [K in keyof P]: K extends 'data'
-          ? ArrayLike<ItemT> | null | undefined
-          : K extends 'renderItem'
-            ? ListRenderItem<ItemT>
-            : K extends 'keyExtractor'
-              ? (item: ItemT, index: number) => string
-              : K extends 'getItemType'
-                ? (item: ItemT, index: number, extraData?: any) => string | number | undefined
-                : K extends 'overrideItemLayout'
-                  ? (
-                      layout: { span?: number; size?: number },
-                      item: ItemT,
-                      index: number,
-                      maxColumns?: number,
-                      extraData?: any,
-                    ) => void
-                  : K extends 'onViewableItemsChanged'
-                    ? FlatListProps<ItemT>['onViewableItemsChanged']
-                    : K extends 'viewabilityConfigCallbackPairs'
-                      ? ViewabilityConfigCallbackPair<ItemT>[]
-                      : P[K];
-      }
-    : P
-  : never;
+export type InstantiateGeneric<ItemT, LC> =
+  LC extends React.ComponentType<infer P>
+    ? P extends Record<string, any>
+      ? {
+          [K in keyof P]: K extends 'data'
+            ? ArrayLike<ItemT> | null | undefined
+            : K extends 'renderItem'
+              ? ListRenderItem<ItemT>
+              : K extends 'keyExtractor'
+                ? (item: ItemT, index: number) => string
+                : K extends 'getItemType'
+                  ? (item: ItemT, index: number, extraData?: any) => string | number | undefined
+                  : K extends 'overrideItemLayout'
+                    ? (
+                        layout: { span?: number; size?: number },
+                        item: ItemT,
+                        index: number,
+                        maxColumns?: number,
+                        extraData?: any,
+                      ) => void
+                    : K extends 'onViewableItemsChanged'
+                      ? FlatListProps<ItemT>['onViewableItemsChanged']
+                      : K extends 'viewabilityConfigCallbackPairs'
+                        ? ViewabilityConfigCallbackPair<ItemT>[]
+                        : P[K];
+        }
+      : P
+    : never;
 
-export type GetComponentProps<ItemT, LC> = LC extends React.ComponentType<any> ? InstantiateGeneric<ItemT, LC> : never;
+export type GetComponentProps<ItemT, LC> =
+  LC extends React.ComponentType<any> ? InstantiateGeneric<ItemT, LC> : never;
 
 type ConditionalListProps<ItemT, LC> = LC extends typeof RNFlatList<ItemT>
   ? React.ComponentProps<typeof RNFlatList<ItemT>>
@@ -123,7 +130,10 @@ export interface GestureViewerProps<ItemT, LC> {
    * @param helpers - Control helpers for the viewer. Currently includes `dismiss()`.
    * @returns A React element that wraps and renders the provided `children`.
    */
-  renderContainer?: (children: React.ReactElement, helpers: { dismiss: () => void }) => React.ReactElement;
+  renderContainer?: (
+    children: React.ReactElement,
+    helpers: { dismiss: () => void },
+  ) => React.ReactElement;
   /**
    * Support for any list component like `ScrollView`, `FlatList`, `FlashList` through the `ListComponent` prop.
    */
@@ -422,4 +432,6 @@ export type GestureViewerEventData = {
   rotationChange: { rotation: number; previousRotation: number | null };
 };
 
-export type GestureViewerEventCallback<T extends GestureViewerEventType> = (data: GestureViewerEventData[T]) => void;
+export type GestureViewerEventCallback<T extends GestureViewerEventType> = (
+  data: GestureViewerEventData[T],
+) => void;