@momo-kits/carousel 0.160.1-beta.12 → 0.160.1-beta.14

package/index.tsx

@@ -16,6 +16,7 @@ import {
   NativeSyntheticEvent,
   Platform,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
 import Animated, {
@@ -31,6 +32,11 @@ import { CarouselProps, CarouselRef } from './types';
 
 const { width: viewportWidth } = Dimensions.get('window');
 
+// TEMP: force the diagnostic overlay on for every carousel in this beta so it
+// shows regardless of whether the consumer screen passes `debug`. Flip to false
+// (or delete) once the miniapp index bug is root-caused.
+const FORCE_DEBUG = true;
+
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
 type CarouselItemProps = {
@@ -122,19 +128,37 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     onTouchEnd: onTouchEndProp,
     onLayout: onLayoutProp,
     getItemLayout: getItemLayoutProp,
+    debug = false,
   } = props;
 
+  const debugEnabled = debug || FORCE_DEBUG;
+
   const flatListRef = useRef<FlatList>(null);
   const autoplayTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const scrollX = useSharedValue(0);
   const containerWidthRef = useRef(viewportWidth);
   const isAutoplayPausedRef = useRef(false);
   const currentIndexRef = useRef(firstItem);
+  // DEBUG: fire counters for each index-reporting source (visible via overlay).
+  const debugCountsRef = useRef({ s: 0, m: 0, d: 0, p: 0 });
 
   const [currentIndex, setCurrentIndex] = useState(firstItem);
   const [containerWidth, setContainerWidth] = useState(viewportWidth);
   const [isVisible, setIsVisible] = useState(apparitionDelay === 0);
   const [isLayoutReady, setIsLayoutReady] = useState(false);
+  const [debugInfo, setDebugInfo] = useState({
+    s: 0,
+    m: 0,
+    d: 0,
+    p: 0,
+    tag: '-',
+    off: 0,
+    lw: 0,
+    cw: 0,
+    iw: 0,
+    idx: -1,
+    real: -1,
+  });
 
   const itemWidth = useMemo(() => {
     if (full) {
@@ -355,99 +379,92 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     [dataWithClones.length, itemWidth]
   );
 
-  const handleScroll = useCallback(
-    (offsetX: number, layoutWidth: number, contentWidth: number) => {
+  // Single index reporter shared by every source (scroll frames + settle
+  // events). `tag` identifies which source fired, surfaced in the debug overlay.
+  const reportResting = useCallback(
+    (offsetX: number, layoutWidth: number, contentWidth: number, tag: string) => {
       const index = resolveIndex(offsetX, layoutWidth, contentWidth);
       const realIndex = getRealIndex(index);
+      const changed = realIndex !== currentIndexRef.current;
+
+      if (debugEnabled && (tag !== 's' || changed)) {
+        const c = debugCountsRef.current;
+        setDebugInfo({
+          s: c.s,
+          m: c.m,
+          d: c.d,
+          p: c.p,
+          tag,
+          off: offsetX,
+          lw: layoutWidth,
+          cw: contentWidth,
+          iw: itemWidth,
+          idx: index,
+          real: realIndex,
+        });
+      }
 
-      if (realIndex !== currentIndexRef.current) {
-        // eslint-disable-next-line no-console
-        console.log(
-          `[Carousel] SCROLL idx=${index} real=${realIndex} offsetX=${offsetX.toFixed(1)} layoutW=${layoutWidth.toFixed(1)} contentW=${contentWidth.toFixed(1)} itemWidth=${itemWidth.toFixed(1)} count=${dataWithClones.length}`
-        );
+      if (changed) {
         currentIndexRef.current = realIndex;
         setCurrentIndex(realIndex);
-
         if (onScrollIndexChanged) {
           onScrollIndexChanged(realIndex);
         }
       }
+      return index;
     },
-    [resolveIndex, getRealIndex, onScrollIndexChanged, itemWidth, dataWithClones.length]
+    [resolveIndex, getRealIndex, onScrollIndexChanged, debugEnabled, itemWidth]
   );
 
-  const handleMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const { contentOffset, layoutMeasurement, contentSize } =
-        event.nativeEvent;
-      const offsetX = contentOffset.x;
-      const index = resolveIndex(
-        offsetX,
-        layoutMeasurement.width,
-        contentSize.width
-      );
-      const realIndex = getRealIndex(index);
-
-      // eslint-disable-next-line no-console
-      console.log(
-        `[Carousel] MOMENTUM_END idx=${index} real=${realIndex} offsetX=${offsetX.toFixed(1)} layoutW=${layoutMeasurement.width.toFixed(1)} contentW=${contentSize.width.toFixed(1)} itemWidth=${itemWidth.toFixed(1)} count=${dataWithClones.length}`
-      );
-
-      // 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);
-        }
-      }
+  const handleScroll = useCallback(
+    (offsetX: number, layoutWidth: number, contentWidth: number) => {
+      debugCountsRef.current.s += 1;
+      reportResting(offsetX, layoutWidth, contentWidth, 's');
+    },
+    [reportResting]
+  );
 
+  // Reliable settle path: reanimated owns the native scroll subscription, so its
+  // onMomentumEnd / onEndDrag worklets fire even when the plain FlatList
+  // onMomentumScrollEnd prop doesn't (observed in the miniapp host).
+  const handleMomentumSettle = useCallback(
+    (offsetX: number, layoutWidth: number, contentWidth: number) => {
+      debugCountsRef.current.m += 1;
+      const index = reportResting(offsetX, layoutWidth, contentWidth, 'm');
       if (onSnapToItem) {
-        onSnapToItem(realIndex);
+        onSnapToItem(getRealIndex(index));
       }
-
       handleLoopReposition(index);
+    },
+    [reportResting, onSnapToItem, getRealIndex, handleLoopReposition]
+  );
 
-      if (onMomentumScrollEndProp) {
-        onMomentumScrollEndProp(event);
-      }
+  const handleDragSettle = useCallback(
+    (offsetX: number, layoutWidth: number, contentWidth: number) => {
+      debugCountsRef.current.d += 1;
+      reportResting(offsetX, layoutWidth, contentWidth, 'd');
     },
-    [resolveIndex, getRealIndex, onScrollIndexChanged, onSnapToItem, handleLoopReposition, onMomentumScrollEndProp, itemWidth, dataWithClones.length]
+    [reportResting]
   );
 
-  const handleScrollEndDrag = useCallback(
+  // Kept so the consumer's onMomentumScrollEnd prop still fires, and to measure
+  // (counter `p`) whether the plain FlatList momentum event reaches JS at all.
+  const handleMomentumScrollEnd = 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(
+      debugCountsRef.current.p += 1;
+      reportResting(
         contentOffset.x,
         layoutMeasurement.width,
-        contentSize.width
-      );
-      const realIndex = getRealIndex(index);
-
-      // eslint-disable-next-line no-console
-      console.log(
-        `[Carousel] DRAG_END idx=${index} real=${realIndex} offsetX=${contentOffset.x.toFixed(1)} layoutW=${layoutMeasurement.width.toFixed(1)} contentW=${contentSize.width.toFixed(1)} itemWidth=${itemWidth.toFixed(1)} count=${dataWithClones.length}`
+        contentSize.width,
+        'p'
       );
-
-      if (realIndex !== currentIndexRef.current) {
-        currentIndexRef.current = realIndex;
-        setCurrentIndex(realIndex);
-
-        if (onScrollIndexChanged) {
-          onScrollIndexChanged(realIndex);
-        }
+      if (onMomentumScrollEndProp) {
+        onMomentumScrollEndProp(event);
       }
     },
-    [resolveIndex, getRealIndex, onScrollIndexChanged, itemWidth, dataWithClones.length]
+    [reportResting, onMomentumScrollEndProp]
   );
 
   const handleTouchStart = useCallback(
@@ -477,10 +494,6 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
       const { width } = event.nativeEvent.layout;
-      // eslint-disable-next-line no-console
-      console.log(
-        `[Carousel] LAYOUT width=${width.toFixed(1)} window=${viewportWidth.toFixed(1)} full=${full}`
-      );
       containerWidthRef.current = width;
       setContainerWidth(width);
       setIsLayoutReady(true);
@@ -489,7 +502,7 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         onLayoutProp(event);
       }
     },
-    [onLayoutProp, full]
+    [onLayoutProp]
   );
 
   const getItemLayout = useCallback(
@@ -575,6 +588,20 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       );
       runOnJS(emitScrollProp)(event.contentOffset.x);
     },
+    onMomentumEnd: (event) => {
+      runOnJS(handleMomentumSettle)(
+        event.contentOffset.x,
+        event.layoutMeasurement.width,
+        event.contentSize.width,
+      );
+    },
+    onEndDrag: (event) => {
+      runOnJS(handleDragSettle)(
+        event.contentOffset.x,
+        event.layoutMeasurement.width,
+        event.contentSize.width,
+      );
+    },
   });
 
   useEffect(() => {
@@ -635,7 +662,6 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         scrollEventThrottle={16}
         onScroll={onScrollEvent}
         onMomentumScrollEnd={handleMomentumScrollEnd}
-        onScrollEndDrag={handleScrollEndDrag}
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
         snapToOffsets={snapOffsets}
@@ -654,6 +680,16 @@ const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
         maxToRenderPerBatch={5}
         windowSize={5}
       />
+      {debugEnabled && (
+        <View style={styles.debugOverlay} pointerEvents="none">
+          <Text style={styles.debugText}>
+            {`S${debugInfo.s} M${debugInfo.m} D${debugInfo.d} P${debugInfo.p} [${debugInfo.tag}] idx=${debugInfo.idx} real=${debugInfo.real}`}
+          </Text>
+          <Text style={styles.debugText}>
+            {`off=${debugInfo.off.toFixed(0)} lW=${debugInfo.lw.toFixed(0)} cW=${debugInfo.cw.toFixed(0)} iw=${debugInfo.iw.toFixed(0)}`}
+          </Text>
+        </View>
+      )}
     </View>
   );
 });
@@ -662,6 +698,20 @@ const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',
   },
+  debugOverlay: {
+    position: 'absolute',
+    top: 4,
+    left: 4,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 4,
+  },
+  debugText: {
+    color: '#0f0',
+    fontSize: 11,
+    fontWeight: '700',
+  },
 });
 
 Carousel.displayName = 'Carousel';

package/package.json

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

package/types.ts

@@ -43,6 +43,8 @@ export type CarouselProps = {
   contentContainerStyle?: StyleProp<ViewStyle>;
   full?: boolean;
   snapToInterval?: number | Animated.Value | Animated.AnimatedInterpolation<number | string> | undefined
+  /** Renders an on-screen diagnostic overlay (fire counters + native scroll geometry). */
+  debug?: boolean;
 };
 
 export type CarouselRef = {