@momo-kits/carousel 0.159.1-beta.5 → 0.160.1-beta.10-test.1

package/index.tsx

@@ -8,7 +8,6 @@ import React, {
   useState,
 } from 'react';
 import {
-  Animated,
   Dimensions,
   FlatList,
   GestureResponderEvent,
@@ -17,14 +16,79 @@ import {
   NativeSyntheticEvent,
   Platform,
   StyleSheet,
-  View
+  View,
 } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  runOnJS,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { CarouselProps, CarouselRef } from './types';
 
 const { width: viewportWidth } = Dimensions.get('window');
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
+type CarouselItemProps = {
+  index: number;
+  itemWidth: number;
+  scrollX: SharedValue<number>;
+  inactiveSlideOpacity: number;
+  inactiveSlideScale: number;
+  slideStyle: any;
+  children: React.ReactNode;
+};
+
+const CarouselItem: React.FC<CarouselItemProps> = ({
+  index,
+  itemWidth,
+  scrollX,
+  inactiveSlideOpacity,
+  inactiveSlideScale,
+  slideStyle,
+  children,
+}) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    const inputRange = [
+      (index - 1) * itemWidth,
+      index * itemWidth,
+      (index + 1) * itemWidth,
+    ];
+    const opacity =
+      inactiveSlideOpacity < 1
+        ? interpolate(
+            scrollX.value,
+            inputRange,
+            [inactiveSlideOpacity, 1, inactiveSlideOpacity],
+            Extrapolation.CLAMP,
+          )
+        : 1;
+    const scale =
+      inactiveSlideScale < 1
+        ? interpolate(
+            scrollX.value,
+            inputRange,
+            [inactiveSlideScale, 1, inactiveSlideScale],
+            Extrapolation.CLAMP,
+          )
+        : 1;
+    return {
+      opacity,
+      transform: [{ scale }],
+    };
+  });
+
+  return (
+    <Animated.View style={[{ width: itemWidth }, slideStyle, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+};
+
 const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const {
     data,
@@ -62,7 +126,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
 
   const flatListRef = useRef<FlatList>(null);
   const autoplayTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const scrollXRef = useRef(new Animated.Value(0)).current;
+  const scrollX = useSharedValue(0);
   const containerWidthRef = useRef(viewportWidth);
   const isAutoplayPausedRef = useRef(false);
   const currentIndexRef = useRef(firstItem);
@@ -111,6 +175,17 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     return result;
   }, [data, loop, loopClonesPerSide]);
 
+  // Explicit per-item snap offsets for the default snap path. Unlike
+  // snapToInterval (a single fixed step that can overshoot the content end and
+  // leave the last item unreachable), snapToOffsets combined with RN's
+  // snapToEnd (default true) always lets the scroll settle on the last item.
+  const snapOffsets = useMemo(() => {
+    if (!enableSnap || snapToIntervalProp !== undefined) {
+      return undefined;
+    }
+    return dataWithClones.map((_, i) => i * itemWidth);
+  }, [enableSnap, snapToIntervalProp, dataWithClones, itemWidth]);
+
   const getRealIndex = useCallback(
     (index: number) => {
       if (!loop) return index;
@@ -245,32 +320,82 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     [loop, data.length, loopClonesPerSide, itemWidth, getLoopIndex]
   );
 
+  const resolveIndex = useCallback(
+    (offsetX: number, layoutWidth: number, contentWidth: number) => {
+      const count = dataWithClones.length;
+      // Derive the per-item width from the *native* scroll geometry rather than
+      // the JS-side itemWidth (measured via onLayout / Dimensions). In some hosts
+      // (e.g. miniapp runtimes) those two coordinate spaces don't line up, which
+      // made Math.round(offsetX / itemWidth) land one item short of the end.
+      const measuredItemWidth =
+        contentWidth > 0 && count > 0 ? contentWidth / count : itemWidth;
+      const unit = measuredItemWidth || itemWidth;
+      let index = unit > 0 ? Math.round(offsetX / unit) : 0;
+
+      // Once the content end is reached, snap to the very last item regardless of
+      // sub-pixel rounding drift (only when a single item fills the viewport).
+      const singleVisible =
+        layoutWidth > 0 && layoutWidth <= measuredItemWidth + 1;
+      if (
+        singleVisible &&
+        contentWidth > 0 &&
+        offsetX + layoutWidth >= contentWidth - 1
+      ) {
+        index = count - 1;
+      }
+
+      if (index < 0) {
+        index = 0;
+      }
+      if (count > 0 && index > count - 1) {
+        index = count - 1;
+      }
+      return index;
+    },
+    [dataWithClones.length, itemWidth]
+  );
+
   const handleScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offsetX = event.nativeEvent.contentOffset.x;
-      const index = Math.round(offsetX / itemWidth);
+    (offsetX: number, layoutWidth: number, contentWidth: number) => {
+      const index = resolveIndex(offsetX, layoutWidth, contentWidth);
       const realIndex = getRealIndex(index);
 
       if (realIndex !== currentIndexRef.current) {
         currentIndexRef.current = realIndex;
         setCurrentIndex(realIndex);
-        
+
         if (onScrollIndexChanged) {
           onScrollIndexChanged(realIndex);
         }
       }
     },
-    [itemWidth, getRealIndex, onScrollIndexChanged]
+    [resolveIndex, getRealIndex, onScrollIndexChanged]
   );
 
   const handleMomentumScrollEnd = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offsetX = event.nativeEvent.contentOffset.x;
-      const index = Math.round(offsetX / itemWidth);
+      const { contentOffset, layoutMeasurement, contentSize } =
+        event.nativeEvent;
+      const offsetX = contentOffset.x;
+      const index = resolveIndex(
+        offsetX,
+        layoutMeasurement.width,
+        contentSize.width
+      );
       const realIndex = getRealIndex(index);
 
-      currentIndexRef.current = realIndex;
-      setCurrentIndex(realIndex);
+      // Report the final resting index here as well. The reanimated scroll
+      // handler isn't guaranteed to deliver the last momentum frame to JS in
+      // every runtime (e.g. miniapp hosts), so relying on handleScroll alone
+      // can leave onScrollIndexChanged stuck one item short of the end.
+      if (realIndex !== currentIndexRef.current) {
+        currentIndexRef.current = realIndex;
+        setCurrentIndex(realIndex);
+
+        if (onScrollIndexChanged) {
+          onScrollIndexChanged(realIndex);
+        }
+      }
 
       if (onSnapToItem) {
         onSnapToItem(realIndex);
@@ -282,7 +407,33 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         onMomentumScrollEndProp(event);
       }
     },
-    [itemWidth, getRealIndex, onSnapToItem, handleLoopReposition, onMomentumScrollEndProp]
+    [resolveIndex, getRealIndex, onScrollIndexChanged, onSnapToItem, handleLoopReposition, onMomentumScrollEndProp]
+  );
+
+  const handleScrollEndDrag = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      // Fallback for a drag released without enough velocity to fire a momentum
+      // scroll: report the resting index so onScrollIndexChanged isn't left
+      // stuck one item short of the end.
+      const { contentOffset, layoutMeasurement, contentSize } =
+        event.nativeEvent;
+      const index = resolveIndex(
+        contentOffset.x,
+        layoutMeasurement.width,
+        contentSize.width
+      );
+      const realIndex = getRealIndex(index);
+
+      if (realIndex !== currentIndexRef.current) {
+        currentIndexRef.current = realIndex;
+        setCurrentIndex(realIndex);
+
+        if (onScrollIndexChanged) {
+          onScrollIndexChanged(realIndex);
+        }
+      }
+    },
+    [resolveIndex, getRealIndex, onScrollIndexChanged]
   );
 
   const handleTouchStart = useCallback(
@@ -351,41 +502,17 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         );
       }
 
-      const inputRange = [
-        (index - 1) * itemWidth,
-        index * itemWidth,
-        (index + 1) * itemWidth,
-      ];
-
-      const opacity = hasOpacityAnimation
-        ? scrollXRef.interpolate({
-            inputRange,
-            outputRange: [inactiveSlideOpacity, 1, inactiveSlideOpacity],
-            extrapolate: 'clamp',
-          })
-        : 1;
-
-      const scale = hasScaleAnimation
-        ? scrollXRef.interpolate({
-            inputRange,
-            outputRange: [inactiveSlideScale, 1, inactiveSlideScale],
-            extrapolate: 'clamp',
-          })
-        : 1;
-
       return (
-        <Animated.View
-          style={[
-            { width: itemWidth },
-            slideStyle,
-            {
-              opacity,
-              transform: [{ scale }],
-            },
-          ]}
+        <CarouselItem
+          index={index}
+          itemWidth={itemWidth}
+          scrollX={scrollX}
+          inactiveSlideOpacity={inactiveSlideOpacity}
+          inactiveSlideScale={inactiveSlideScale}
+          slideStyle={slideStyle}
         >
           {renderItem({ item, index: realIndex })}
-        </Animated.View>
+        </CarouselItem>
       );
     },
     [
@@ -395,7 +522,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       itemWidth,
       slideStyle,
       renderItem,
-      scrollXRef,
+      scrollX,
     ]
   );
 
@@ -409,24 +536,28 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     [keyExtractor]
   );
 
-  const onScrollEvent = useMemo(() => {
-    const scrollHandler = Animated.event(
-      [{ nativeEvent: { contentOffset: { x: scrollXRef } } }],
-      {
-        useNativeDriver: true,
-        listener: handleScroll,
+  const emitScrollProp = useCallback(
+    (offsetX: number) => {
+      if (onScrollProp) {
+        onScrollProp({
+          nativeEvent: { contentOffset: { x: offsetX, y: 0 } },
+        } as NativeSyntheticEvent<NativeScrollEvent>);
       }
-    );
-
-    if (onScrollProp) {
-      return (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        scrollHandler(event);
-        onScrollProp(event);
-      };
-    }
+    },
+    [onScrollProp],
+  );
 
-    return scrollHandler;
-  }, [scrollXRef, handleScroll, onScrollProp]);
+  const onScrollEvent = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      scrollX.value = event.contentOffset.x;
+      runOnJS(handleScroll)(
+        event.contentOffset.x,
+        event.layoutMeasurement.width,
+        event.contentSize.width,
+      );
+      runOnJS(emitScrollProp)(event.contentOffset.x);
+    },
+  });
 
   useEffect(() => {
     if (isLayoutReady && firstItem > 0 && firstItem < data.length) {
@@ -486,9 +617,15 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         scrollEventThrottle={16}
         onScroll={onScrollEvent}
         onMomentumScrollEnd={handleMomentumScrollEnd}
+        onScrollEndDrag={handleScrollEndDrag}
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
-        snapToInterval={enableSnap ? (snapToInterval as number) : undefined}
+        snapToOffsets={snapOffsets}
+        snapToInterval={
+          enableSnap && snapToIntervalProp !== undefined
+            ? (snapToInterval as number)
+            : undefined
+        }
         snapToAlignment={enableSnap ? 'start' : undefined}
         decelerationRate={enableSnap ? 'fast' : 'normal'}
         disableIntervalMomentum={disableIntervalMomentum}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/carousel",
-    "version": "0.159.1-beta.5",
+    "version": "0.160.1-beta.10-test.1",
     "private": false,
     "main": "index.tsx",
     "peerDependencies": {