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

package/src/GestureViewer.tsx

@@ -1,145 +1,117 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-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 { useEffect, useMemo } from 'react';
+import { StyleSheet, useWindowDimensions, View, type ViewStyle } from 'react-native';
+import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, {
+  type AnimatedStyle,
+  type SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+import { composeGestureViewerGestures } from './gestureViewerGestures';
 import { registry } from './GestureViewerRegistry';
+import { getWebContentProps } from './getWebContentProps';
+import type { RenderWindowSlot } from './renderWindow';
 import type { GestureViewerProps } from './types';
 import { useGestureViewer } from './useGestureViewer';
-import {
-  createLoopData,
-  isFlashListLike,
-  isFlatListLike,
-  isScrollViewLike,
-  shouldUseNativeScrollGesture,
-} from './utils';
-import WebPagingFixStyle from './WebPagingFixStyle';
 
-export function GestureViewer<ItemT, LC>({
+type RenderWindowSlotViewProps<ItemT> = {
+  animatedStyle: AnimatedStyle<ViewStyle>;
+  height: number;
+  isActive: boolean;
+  pageStride: number;
+  renderItem: GestureViewerProps<ItemT>['renderItem'];
+  slot: RenderWindowSlot<ItemT>;
+  visualPage: SharedValue<number>;
+  width: number;
+};
+
+function RenderWindowSlotView<ItemT>({
+  animatedStyle,
+  height,
+  isActive,
+  pageStride,
+  renderItem,
+  slot,
+  visualPage,
+  width,
+}: RenderWindowSlotViewProps<ItemT>) {
+  const slotAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: (slot.virtualIndex - visualPage.get()) * pageStride }],
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.slot,
+        {
+          height,
+          width,
+        },
+        slotAnimatedStyle,
+      ]}
+    >
+      <Animated.View style={[styles.page, isActive && animatedStyle]}>
+        <View style={[styles.item, { height, width }]}>
+          {renderItem(slot.item, slot.logicalIndex, { isActive })}
+        </View>
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+export function GestureViewer<ItemT>({
   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
-}: GestureViewerProps<ItemT, LC>) {
-  const Component = ListComponent as React.ComponentType<any>;
-
-  const dataRef = useRef(data);
-
+}: GestureViewerProps<ItemT>) {
   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,
+    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: ItemT, index: number) => {
-      if (enableLoop) {
-        return typeof item === 'string' ? `${item}-${index}` : `item-${index}`;
-      }
-
-      return typeof item === 'string' ? item : `image-${index}`;
-    },
-    [enableLoop],
-  );
-
-  const renderItem = useCallback(
-    ({ item, index, target }: { item: ItemT; index: number; target?: string }) => {
-      const isFlashListCell = !isFlashList || target === undefined || target === 'Cell';
-
-      return (
-        <View
-          key={isScrollView ? keyExtractor(item, index) : undefined}
-          style={[
-            {
-              width,
-              height,
-              marginHorizontal: itemSpacing / 2,
-            },
-            styles.item,
-          ]}
-        >
-          {renderItemProp(item, index, {
-            isActive: index === activeListIndex && isFlashListCell,
-          })}
-        </View>
-      );
-    },
-    [
-      activeListIndex,
-      width,
-      itemSpacing,
-      renderItemProp,
-      keyExtractor,
-      isScrollView,
-      isFlashList,
-      height,
-    ],
-  );
-
-  const getItemLayout = useCallback(
-    (_: ArrayLike<ItemT> | null | undefined, index: number) => ({
-      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);
@@ -147,126 +119,59 @@ export function GestureViewer<ItemT, LC>({
     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,
-      }) satisfies ScrollViewProps,
-    [
-      width,
-      itemSpacing,
-      isZoomed,
-      isRotated,
-      isPinching,
-      onMomentumScrollEnd,
-      onScroll,
-      onScrollBeginDrag,
-      enableSnapMode,
-    ],
-  );
-
   const control = useMemo(() => ({ dismiss: handleDismiss }), [handleDismiss]);
+  const webContentProps = getWebContentProps(onWebClick);
 
-  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 = (
+  const viewer = (
     <GestureHandlerRootView>
       <GestureDetector gesture={gesture}>
-        <View style={[{ width, height }, containerStyle]}>
+        <View style={[styles.container, { height, width }, containerStyle]}>
           <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
-          <Animated.View
-            style={[styles.content, animatedStyle]}
-            {...(Platform.OS === 'web' && {
-              onClick: onWebClick,
-            })}
-            {...(Platform.OS === 'web' &&
-              isFlashList && { dataSet: { 'flash-list-paging-enabled-fix': true } })}
-          >
-            {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}
-                    {...(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 })}
-                    // 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 style={styles.content} {...webContentProps}>
+            {renderWindowSlots.map((slot) => (
+              <RenderWindowSlotView
+                animatedStyle={animatedStyle}
+                height={height}
+                isActive={slot.virtualIndex === centerVirtualIndex}
+                key={slot.slotKey}
+                pageStride={pageStride}
+                renderItem={renderItem}
+                slot={slot}
+                visualPage={visualPage}
+                width={width}
+              />
+            ))}
           </Animated.View>
-          <WebPagingFixStyle Component={Component} />
         </View>
       </GestureDetector>
     </GestureHandlerRootView>
   );
 
-  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',
+    justifyContent: 'center',
   },
-  background: {
+  page: {
+    flex: 1,
+  },
+  slot: {
+    left: 0,
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'black',
   },
 });

package/src/GestureViewerManager.ts

@@ -6,29 +6,45 @@ import type {
   GestureViewerEventType,
   GestureViewerState,
 } from './types';
-import { createBoundsConstraint, createScrollAction } from './utils';
+import { createBoundsConstraint } from './utils';
+
+export type GestureViewerNavigationOptions = {
+  animated?: boolean;
+};
+
+export type GestureViewerNavigationAdapter = {
+  goToIndex: (index: number, options?: GestureViewerNavigationOptions) => void;
+  goToNext: () => void;
+  goToPrevious: () => void;
+};
+
+export type GestureViewerStateReader = () => GestureViewerState;
+
+type GestureViewerEventListenerPresenceCallback = (
+  eventType: GestureViewerEventType,
+  hasListeners: boolean,
+) => void;
+
+const DEFAULT_STATE_READER: GestureViewerStateReader = () => ({
+  currentIndex: 0,
+  totalCount: 0,
+});
 
 class GestureViewerManager {
-  private currentIndex = 0;
-  private dataLength = 0;
   private width = 0;
   private height = 0;
   private maxZoomScale = 2;
-  private enableHorizontalSwipe = true;
-  private enableLoop = false;
-  private listRef: any | null = null;
+  private navigationAdapter: GestureViewerNavigationAdapter | null = null;
+  private stateReader = DEFAULT_STATE_READER;
 
   private scale: SharedValue<number> | null = null;
   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>>();
+  private eventListenerPresenceSubscribers = new Set<GestureViewerEventListenerPresenceCallback>();
 
   private notifyListeners() {
     const state = this.getState();
@@ -53,6 +69,7 @@ class GestureViewerManager {
     }
 
     this.eventListeners.get(eventType)?.add(callback);
+    this.notifyEventListenerPresence(eventType);
 
     return () => {
       const listeners = this.eventListeners.get(eventType);
@@ -64,9 +81,40 @@ class GestureViewerManager {
           this.eventListeners.delete(eventType);
         }
       }
+
+      this.notifyEventListenerPresence(eventType);
+    };
+  }
+
+  subscribeToEventListenerPresence(callback: GestureViewerEventListenerPresenceCallback) {
+    this.eventListenerPresenceSubscribers.add(callback);
+
+    this.notifyEventListenerPresenceSubscriber(callback, 'zoomChange');
+    this.notifyEventListenerPresenceSubscriber(callback, 'rotationChange');
+    this.notifyEventListenerPresenceSubscriber(callback, 'tap');
+
+    return () => {
+      this.eventListenerPresenceSubscribers.delete(callback);
     };
   }
 
+  hasEventListeners(eventType: GestureViewerEventType) {
+    return (this.eventListeners.get(eventType)?.size ?? 0) > 0;
+  }
+
+  private notifyEventListenerPresence(eventType: GestureViewerEventType) {
+    this.eventListenerPresenceSubscribers.forEach((callback) => {
+      this.notifyEventListenerPresenceSubscriber(callback, eventType);
+    });
+  }
+
+  private notifyEventListenerPresenceSubscriber(
+    callback: GestureViewerEventListenerPresenceCallback,
+    eventType: GestureViewerEventType,
+  ) {
+    callback(eventType, this.hasEventListeners(eventType));
+  }
+
   private emitEvent<T extends GestureViewerEventType>(
     eventType: T,
     data: GestureViewerEventData[T],
@@ -91,18 +139,7 @@ class GestureViewerManager {
   };
 
   getState(): GestureViewerState {
-    return {
-      currentIndex: this.currentIndex,
-      totalCount: this.dataLength,
-    };
-  }
-
-  getProgrammaticScrollVersion() {
-    return this.programmaticScrollVersion;
-  }
-
-  setEnableLoop(enabled: boolean) {
-    this.enableLoop = enabled;
+    return this.stateReader();
   }
 
   setWidth(width: number) {
@@ -113,22 +150,12 @@ class GestureViewerManager {
     this.height = height;
   }
 
-  setListRef(ref: any) {
-    this.listRef = ref;
-  }
-
-  setDataLength(length: number) {
-    this.dataLength = length;
+  setNavigationAdapter(adapter: GestureViewerNavigationAdapter | null) {
+    this.navigationAdapter = adapter;
   }
 
-  setEnableHorizontalSwipe(enabled: boolean) {
-    this.enableHorizontalSwipe = enabled;
-  }
-
-  setCurrentIndex(index: number) {
-    if (index !== this.currentIndex) {
-      this.currentIndex = index;
-    }
+  setStateReader(reader: GestureViewerStateReader | null) {
+    this.stateReader = reader ?? DEFAULT_STATE_READER;
   }
 
   setZoomSharedValues(
@@ -143,10 +170,6 @@ class GestureViewerManager {
     this.maxZoomScale = maxZoomScale;
   }
 
-  setResetTransformCallback(callback: (() => void) | null) {
-    this.resetTransformCallback = callback;
-  }
-
   notifyStateChange() {
     this.notifyListeners();
   }
@@ -266,110 +289,42 @@ class GestureViewerManager {
     this.translateY.set(withTiming(0));
   };
 
-  goToIndex = (index: number) => {
-    if (!this.enableHorizontalSwipe || !this.listRef) {
+  goToIndex = (index: number, options?: GestureViewerNavigationOptions) => {
+    if (!this.navigationAdapter) {
       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;
-    }
+    this.navigationAdapter.goToIndex(index, options);
+  };
 
-    if (index < 0 || index >= this.dataLength) {
+  goToPrevious = () => {
+    if (!this.navigationAdapter) {
       return;
     }
 
-    this.resetTransformCallback?.();
-    this.programmaticScrollVersion += 1;
-    scrollTo(index, true);
-    this.updateCurrentIndex(index);
+    this.navigationAdapter.goToPrevious();
   };
 
-  handleMomentumScrollEnd = (scrollIndex: number) => {
-    if (!this.loopCallback) {
-      return false;
-    }
-
-    if (scrollIndex === 0 || scrollIndex === this.dataLength + 1) {
-      this.loopCallback();
-      return true;
+  goToNext = () => {
+    if (!this.navigationAdapter) {
+      return;
     }
 
-    this.cancelPendingLoopTransition();
-    return true;
-  };
-
-  cancelPendingLoopTransition = () => {
-    this.loopCallback = null;
-  };
-
-  handleScrollBeginDrag = () => {
-    this.cancelPendingLoopTransition();
-  };
-
-  goToPrevious = () => {
-    this.goToIndex(this.currentIndex - 1);
-  };
-
-  goToNext = () => {
-    this.goToIndex(this.currentIndex + 1);
+    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();
   }
-
-  private updateCurrentIndex = (targetIndex: number) => {
-    this.currentIndex = targetIndex;
-    this.notifyListeners();
-  };
 }
 
 export default GestureViewerManager;

package/src/gestureViewerAnimation.ts

@@ -0,0 +1,18 @@
+import { Easing } from 'react-native-reanimated';
+
+export const PAGE_TRANSITION_CONFIG = {
+  duration: 240,
+  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+};
+
+export const PAGE_SPRING_CONFIG = {
+  damping: 35,
+  energyThreshold: 6e-9,
+  mass: 1,
+  overshootClamping: false,
+  stiffness: 360,
+};
+
+export const SWIPE_THRESHOLD_RATIO = 0.25;
+export const SWIPE_VELOCITY_THRESHOLD = 800;
+export const EDGE_RESISTANCE = 0.35;