@souscheflabs/reanimated-flashlist 0.3.3 → 0.3.5

package/lib/AnimatedFlashList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedFlashList.d.ts","sourceRoot":"","sources":["../src/AnimatedFlashList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAyYjB,eAAO,MAAM,iBAAiB,EAAyC,CACrE,CAAC,SAAS,gBAAgB,EAE1B,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
+{"version":3,"file":"AnimatedFlashList.d.ts","sourceRoot":"","sources":["../src/AnimatedFlashList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAwdjB,eAAO,MAAM,iBAAiB,EAAyC,CACrE,CAAC,SAAS,gBAAgB,EAE1B,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}

package/lib/AnimatedFlashList.js

@@ -40,11 +40,29 @@ const flash_list_1 = require("@shopify/flash-list");
 const contexts_1 = require("./contexts");
 const AnimatedFlashListItem_1 = require("./AnimatedFlashListItem");
 const constants_1 = require("./constants");
+class AnimationErrorBoundary extends react_1.default.Component {
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        if (__DEV__) {
+            console.warn('[AnimatedFlashList] Animation error caught by error boundary. ' +
+                'Falling back to non-animated list.', error);
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback;
+        }
+        return this.props.children;
+    }
+}
 const ItemWrapper = react_1.default.memo(function ItemWrapper({ item, index, totalItemsRef, renderItem, canDrag, dragEnabled, onReorderByDelta, onHapticFeedback, }) {
     const isDragEnabled = dragEnabled && (canDrag ? canDrag(item, index) : true);
     return (<AnimatedFlashListItem_1.AnimatedFlashListItem item={item} index={index} totalItems={totalItemsRef.current ?? 0} isDragEnabled={isDragEnabled} renderItem={renderItem} onReorderByDelta={onReorderByDelta} onHapticFeedback={onHapticFeedback}/>);
 });
-function InnerFlashList({ data, totalItemsRef, flashListRef, renderItem, keyExtractor, canDrag, dragEnabled, onReorderByDelta, onHapticFeedback, itemHeight, ListFooterComponent, onEndReached, onEndReachedThreshold, onRefresh, refreshing, refreshTintColor, contentContainerStyle, drawDistance = 500, showsVerticalScrollIndicator = true, }) {
+function InnerFlashList({ data, totalItemsRef, flashListRef, renderItem, keyExtractor, canDrag, dragEnabled, onReorderByDelta, onHapticFeedback, itemHeight, ListFooterComponent, ListEmptyComponent, onEndReached, onEndReachedThreshold, onRefresh, refreshing, refreshTintColor, contentContainerStyle, drawDistance = 500, showsVerticalScrollIndicator = true, }) {
     // Get drag state context for scroll tracking
     const { scrollOffset, contentHeight, visibleHeight, listTopY, setListRef, totalItems } = (0, contexts_1.useDragState)();
     // Register FlashList ref with drag context for autoscroll
@@ -96,7 +114,7 @@ function InnerFlashList({ data, totalItemsRef, flashListRef, renderItem, keyExtr
         // FlashList v2 uses this for span, but we extend for size in drag calculations
         layout.size = itemHeight;
     }, [itemHeight]);
-    return (<flash_list_1.FlashList ref={flashListRef} data={data} renderItem={flashListRenderItem} keyExtractor={keyExtractor} getItemType={getItemType} overrideItemLayout={overrideItemLayout} onScroll={handleScroll} onContentSizeChange={handleContentSizeChange} onLayout={handleLayout} scrollEventThrottle={16} drawDistance={drawDistance} maintainVisibleContentPosition={{ disabled: true }} showsVerticalScrollIndicator={showsVerticalScrollIndicator} contentContainerStyle={contentContainerStyle} ListFooterComponent={ListFooterComponent ?? undefined} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} refreshControl={onRefresh ? (<react_native_1.RefreshControl refreshing={refreshing ?? false} onRefresh={onRefresh} tintColor={refreshTintColor} colors={refreshTintColor ? [refreshTintColor] : undefined}/>) : undefined}/>);
+    return (<flash_list_1.FlashList ref={flashListRef} data={data} renderItem={flashListRenderItem} keyExtractor={keyExtractor} getItemType={getItemType} overrideItemLayout={overrideItemLayout} onScroll={handleScroll} onContentSizeChange={handleContentSizeChange} onLayout={handleLayout} scrollEventThrottle={16} drawDistance={drawDistance} maintainVisibleContentPosition={{ disabled: true }} showsVerticalScrollIndicator={showsVerticalScrollIndicator} contentContainerStyle={contentContainerStyle} ListFooterComponent={ListFooterComponent ?? undefined} ListEmptyComponent={ListEmptyComponent ?? undefined} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} refreshControl={onRefresh ? (<react_native_1.RefreshControl refreshing={refreshing ?? false} onRefresh={onRefresh} tintColor={refreshTintColor} colors={refreshTintColor ? [refreshTintColor] : undefined}/>) : undefined}/>);
 }
 /**
  * AnimatedFlashList - High-performance animated list with drag-to-reorder
@@ -128,7 +146,7 @@ function InnerFlashList({ data, totalItemsRef, flashListRef, renderItem, keyExtr
  * ```
  */
 function AnimatedFlashListInner(props, ref) {
-    const { data, keyExtractor, renderItem, dragEnabled = false, onReorder, onReorderByNeighbors, canDrag, onHapticFeedback, config, onPrepareLayoutAnimation, ListFooterComponent, onRefresh, refreshing = false, onEndReached, onEndReachedThreshold = 0.5, contentContainerStyle, estimatedItemSize, ...flashListProps } = props;
+    const { data, keyExtractor, renderItem, dragEnabled = false, onReorder, onReorderByNeighbors, canDrag, onHapticFeedback, config, onPrepareLayoutAnimation, ListFooterComponent, ListEmptyComponent, onRefresh, refreshing = false, onEndReached, onEndReachedThreshold = 0.5, contentContainerStyle, estimatedItemSize, ...flashListProps } = props;
     // Merge config with defaults
     // Use estimatedItemSize as default itemHeight if not explicitly configured
     const dragConfig = (0, react_1.useMemo)(() => ({
@@ -193,22 +211,46 @@ function AnimatedFlashListInner(props, ref) {
     totalItemsRef.current = data.length;
     // Early return for empty data
     if (!data || !Array.isArray(data) || data.length === 0) {
-        if (ListFooterComponent) {
+        const emptyContent = ListEmptyComponent
+            ? react_1.default.isValidElement(ListEmptyComponent)
+                ? ListEmptyComponent
+                : react_1.default.createElement(ListEmptyComponent)
+            : null;
+        const footerContent = ListFooterComponent
+            ? react_1.default.isValidElement(ListFooterComponent)
+                ? ListFooterComponent
+                : react_1.default.createElement(ListFooterComponent)
+            : null;
+        if (emptyContent || footerContent) {
             return (<react_native_1.View style={containerStyle}>
-          {react_1.default.isValidElement(ListFooterComponent)
-                    ? ListFooterComponent
-                    : react_1.default.createElement(ListFooterComponent)}
+          {emptyContent}
+          {footerContent}
         </react_native_1.View>);
         }
         return null;
     }
-    return (<contexts_1.ListAnimationProvider>
-      <contexts_1.DragStateProvider config={dragConfig}>
-        <react_native_1.View style={containerStyle}>
-          <InnerFlashList data={data} totalItemsRef={totalItemsRef} flashListRef={flashListRef} renderItem={renderItem} keyExtractor={keyExtractor} canDrag={canDrag} dragEnabled={dragEnabled} onReorderByDelta={onReorder || onReorderByNeighbors ? handleReorderByDelta : undefined} onHapticFeedback={onHapticFeedback} itemHeight={dragConfig.itemHeight} ListFooterComponent={ListFooterComponent} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} onRefresh={onRefresh} refreshing={refreshing} contentContainerStyle={contentContainerStyle} {...flashListProps}/>
-        </react_native_1.View>
-      </contexts_1.DragStateProvider>
-    </contexts_1.ListAnimationProvider>);
+    const plainFlashListFallback = (<react_native_1.View style={containerStyle}>
+      <flash_list_1.FlashList ref={flashListRef} data={data} renderItem={({ item, index }) => renderItem({
+            item,
+            index,
+            totalItems: data.length,
+            animatedStyle: {},
+            dragHandleProps: null,
+            isDragging: false,
+            isDragEnabled: false,
+            triggerExitAnimation: () => { },
+            resetExitAnimation: () => { },
+        })} keyExtractor={keyExtractor} contentContainerStyle={contentContainerStyle} ListFooterComponent={ListFooterComponent ?? undefined} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold}/>
+    </react_native_1.View>);
+    return (<AnimationErrorBoundary fallback={plainFlashListFallback}>
+      <contexts_1.ListAnimationProvider>
+        <contexts_1.DragStateProvider config={dragConfig}>
+          <react_native_1.View style={containerStyle}>
+            <InnerFlashList data={data} totalItemsRef={totalItemsRef} flashListRef={flashListRef} renderItem={renderItem} keyExtractor={keyExtractor} canDrag={canDrag} dragEnabled={dragEnabled} onReorderByDelta={onReorder || onReorderByNeighbors ? handleReorderByDelta : undefined} onHapticFeedback={onHapticFeedback} itemHeight={dragConfig.itemHeight} ListFooterComponent={ListFooterComponent} ListEmptyComponent={ListEmptyComponent} onEndReached={onEndReached} onEndReachedThreshold={onEndReachedThreshold} onRefresh={onRefresh} refreshing={refreshing} contentContainerStyle={contentContainerStyle} {...flashListProps}/>
+          </react_native_1.View>
+        </contexts_1.DragStateProvider>
+      </contexts_1.ListAnimationProvider>
+    </AnimationErrorBoundary>);
 }
 const containerStyle = {
     flex: 1,

package/lib/AnimatedFlashListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedFlashListItem.d.ts","sourceRoot":"","sources":["../src/AnimatedFlashListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAY7E,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,UAAU,0BAA0B,CAAC,CAAC,SAAS,gBAAgB;IAC7D,oBAAoB;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACpE,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;;;GAUG;AACH,iBAAS,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,EAAE,EAC9D,IAAI,EACJ,KAAK,EACL,UAAU,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,0BAA0B,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA8J3D;AAGD,eAAO,MAAM,qBAAqB,EAE7B,OAAO,0BAA0B,CAAC"}
+{"version":3,"file":"AnimatedFlashListItem.d.ts","sourceRoot":"","sources":["../src/AnimatedFlashListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAaxF,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAMjB,UAAU,0BAA0B,CAAC,CAAC,SAAS,gBAAgB;IAC7D,oBAAoB;IACpB,IAAI,EAAE,CAAC,CAAC;IACR,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACpE,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;;;GAUG;AACH,iBAAS,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,EAAE,EAC9D,IAAI,EACJ,KAAK,EACL,UAAU,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,gBAAgB,GACjB,EAAE,0BAA0B,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAkO3D;AAGD,eAAO,MAAM,qBAAqB,EAE7B,OAAO,0BAA0B,CAAC"}

package/lib/AnimatedFlashListItem.js

@@ -38,6 +38,10 @@ const react_1 = __importStar(require("react"));
 const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 const hooks_1 = require("./hooks");
 const contexts_1 = require("./contexts");
+const constants_1 = require("./constants");
+// Debug: Track component instances to detect recycling.
+// Note: IDs are not stable across hot reloads (counter persists at module scope).
+let instanceCounter = 0;
 /**
  * Internal item wrapper that provides all animation functionality.
  *
@@ -50,10 +54,68 @@ const contexts_1 = require("./contexts");
  * @internal
  */
 function AnimatedFlashListItemInner({ item, index, totalItems, isDragEnabled, renderItem, onReorderByDelta, onHapticFeedback, }) {
+    // Debug: Track this component instance (only incremented in DEV)
+    const instanceIdRef = (0, react_1.useRef)(null);
+    if (__DEV__ && instanceIdRef.current === null) {
+        instanceIdRef.current = ++instanceCounter;
+    }
+    const instanceId = instanceIdRef.current;
+    // Track previous itemId to detect recycling
+    const prevItemIdRef = (0, react_1.useRef)(item.id);
+    // Log every render with instance tracking (verbose only - fires per render per item)
+    if (__DEV__ && constants_1.VERBOSE_DRAG_DEBUG) {
+        const isRecycled = prevItemIdRef.current !== item.id;
+        console.log(`[FlashListItem:inst${instanceId}] RENDER: itemId=${item.id}, index=${index}` +
+            (isRecycled ? ` (RECYCLED from ${prevItemIdRef.current})` : ''));
+        prevItemIdRef.current = item.id;
+    }
+    // Track mount/unmount
+    (0, react_1.useEffect)(() => {
+        if (__DEV__) {
+            console.log(`[FlashListItem:inst${instanceId}] MOUNT: itemId=${item.id}, index=${index}`);
+        }
+        return () => {
+            if (__DEV__) {
+                console.log(`[FlashListItem:inst${instanceId}] UNMOUNT: was itemId=${item.id}`);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Empty deps - only track actual mount/unmount
+    // Create shared value for index (for UI-thread access in animations)
+    // This allows worklets to read the current index without closure stale capture
+    const indexShared = (0, react_native_reanimated_1.useSharedValue)(index);
     // Register this item's index in the central registry
     // This handles FlashList's recycling behavior where components may not re-render
     // after data changes, leaving their index props stale
-    const { updateItemIndex } = (0, contexts_1.useDragState)();
+    const { updateItemIndex, isDragging: globalIsDragging, isDropping } = (0, contexts_1.useDragState)();
+    // Sync index to SharedValue on every render, but skip during active drag/drop
+    // This prevents stale React props from corrupting the index during the drop phase
+    // when FlashList re-renders with new data order
+    (0, react_1.useLayoutEffect)(() => {
+        // Don't update during active drag/drop to prevent race conditions
+        // The registry handles correct index lookup during these phases
+        if (globalIsDragging.value || isDropping.value) {
+            return;
+        }
+        indexShared.value = index;
+    }, [index, indexShared, globalIsDragging, isDropping]);
+    // Secondary sync: Catch the case where React re-rendered with new index during drop phase.
+    // The primary useLayoutEffect bails out during drop (guards=true), and when guards are
+    // released, it doesn't re-run because `index` didn't change. This effect forces the sync
+    // on every render when guards are down and there's a mismatch.
+    //
+    // This effect intentionally has NO dependency array. Adding deps would defeat its purpose:
+    // it needs to run on EVERY render to catch the window where guards drop but `index` hasn't
+    // changed (so the primary useLayoutEffect won't re-fire). The body is lightweight (three
+    // SharedValue reads + one conditional write) so the per-render cost is negligible.
+    (0, react_1.useEffect)(() => {
+        if (globalIsDragging.value || isDropping.value || indexShared.value === index)
+            return;
+        if (__DEV__ && constants_1.VERBOSE_DRAG_DEBUG) {
+            console.log(`[FlashListItem:${item.id}] Secondary sync: indexShared ${indexShared.value} → ${index}`);
+        }
+        indexShared.value = index;
+    });
     // Update item index in useLayoutEffect to avoid side effects during render
     // useLayoutEffect runs synchronously after DOM mutations but before paint,
     // ensuring the registry is up-to-date before any visual updates

package/lib/constants/drag.d.ts

@@ -1,4 +1,12 @@
 import type { DragConfig } from '../types';
+/**
+ * Enable verbose per-frame drag debug logging.
+ * When false (default), only critical lifecycle logs (drag start/end, errors)
+ * are emitted under __DEV__. When true, per-frame and per-render logs are
+ * also emitted. These produce ~480 console.log calls/second during drag
+ * (8 visible items * 60fps), which can lag Metro debugger.
+ */
+export declare const VERBOSE_DRAG_DEBUG = false;
 /**
  * Unified animation timing configuration for consistency across all drag hooks.
  * Using consistent timing prevents visual "mismatches" during complex interactions.

package/lib/constants/drag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../src/constants/drag.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAM3C;;;GAGG;AACH,eAAO,MAAM,gBAAgB;IAC3B,wEAAwE;;IAExE,wFAAwF;;IAExF,kDAAkD;;IAElD,4DAA4D;;CAEpD,CAAC;AAMX;;;GAGG;AACH,eAAO,MAAM,eAAe;IAC1B;;;;;OAKG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;CAEK,CAAC;AAMX;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAoCjC,CAAC;AAEF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,CAG5E"}
+{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../src/constants/drag.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAM3C;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,QAAQ,CAAC;AAMxC;;;GAGG;AACH,eAAO,MAAM,gBAAgB;IAC3B,wEAAwE;;IAExE,wFAAwF;;IAExF,kDAAkD;;IAElD,4DAA4D;;CAEpD,CAAC;AAMX;;;GAGG;AACH,eAAO,MAAM,eAAe;IAC1B;;;;;OAKG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;CAEK,CAAC;AAMX;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAoCjC,CAAC;AAEF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,CAG5E"}

package/lib/constants/drag.js

@@ -1,8 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_DRAG_CONFIG = exports.DRAG_THRESHOLDS = exports.ANIMATION_TIMING = void 0;
+exports.DEFAULT_DRAG_CONFIG = exports.DRAG_THRESHOLDS = exports.ANIMATION_TIMING = exports.VERBOSE_DRAG_DEBUG = void 0;
 exports.createDragConfig = createDragConfig;
 // ============================================================================
+// Debug Configuration
+// ============================================================================
+/**
+ * Enable verbose per-frame drag debug logging.
+ * When false (default), only critical lifecycle logs (drag start/end, errors)
+ * are emitted under __DEV__. When true, per-frame and per-render logs are
+ * also emitted. These produce ~480 console.log calls/second during drag
+ * (8 visible items * 60fps), which can lag Metro debugger.
+ */
+exports.VERBOSE_DRAG_DEBUG = false;
+// ============================================================================
 // Animation Timing & Easing Constants
 // ============================================================================
 /**

package/lib/contexts/DragStateContext.d.ts

@@ -39,6 +39,10 @@ export interface DragStateContextValue {
     isDropping: SharedValue<boolean>;
     /** Counter incremented on each drag start, used to force shift recalculation */
     dragSequence: SharedValue<number>;
+    /** Expected index after drop (for handoff detection) */
+    expectedDropIndex: SharedValue<number>;
+    /** Frozen mismatch offset computed at drop time to prevent double compensation */
+    dropMismatchOffset: SharedValue<number>;
     /** Register the FlashList ref for autoscroll operations */
     setListRef: (ref: FlashListRef<unknown> | null) => void;
     /** Scroll the list to a specific offset (for autoscroll during drag) */
@@ -75,11 +79,6 @@ export interface DragStateContextValue {
      * Call this when reorder completes to keep indices accurate.
      */
     applyReorderToRegistry: (fromId: string, fromIndex: number, toIndex: number) => void;
-    /**
-     * Mark registry as recently updated to protect against stale overwrites.
-     * Call this from handleDragEnd after onEnd updates the registry.
-     */
-    markRegistryUpdated: () => void;
     /** Total number of items in the list (synced from data.length) */
     totalItems: SharedValue<number>;
 }

package/lib/contexts/DragStateContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragStateContext.d.ts","sourceRoot":"","sources":["../../src/contexts/DragStateContext.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DragStateContext.d.ts","sourceRoot":"","sources":["../../src/contexts/DragStateContext.tsx"],"names":[],"mappings":"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"}

package/lib/contexts/DragStateContext.js

@@ -130,6 +130,12 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     const isDropping = (0, react_native_reanimated_1.useSharedValue)(false);
     // Counter incremented on each drag start, used to force shift recalculation
     const dragSequence = (0, react_native_reanimated_1.useSharedValue)(0);
+    // Expected index after drop (for handoff detection)
+    const expectedDropIndex = (0, react_native_reanimated_1.useSharedValue)(-1);
+    // Frozen mismatch offset computed at drop time to prevent double compensation
+    // This ensures mismatchOffset + currentTranslateY remains constant even if
+    // useAnimatedStyle evaluates between registry update and currentTranslateY adjustment
+    const dropMismatchOffset = (0, react_native_reanimated_1.useSharedValue)(0);
     // Index registry for tracking itemId -> index mapping
     // This handles FlashList's recycling behavior where components may not re-render
     // after data changes, leaving their index props stale
@@ -138,8 +144,6 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     const dragStartIndexSnapshot = (0, react_native_reanimated_1.useSharedValue)({});
     // Total number of items in the list (synced from data.length by InnerFlashList)
     const totalItems = (0, react_native_reanimated_1.useSharedValue)(0);
-    // Timestamp when registry was last updated by onEnd (for protecting against stale overwrites)
-    const registryUpdateTimestamp = (0, react_1.useRef)(0);
     // Ref to FlashList for autoscroll operations
     const listRef = (0, react_1.useRef)(null);
     // Register the FlashList ref
@@ -157,32 +161,27 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     // Update an item's index in the registry
     // Uses scheduleOnUI to ensure SharedValue modifications are immediately visible
     // to UI thread worklets (fixing the registry sync bug).
-    // Also uses timestamp-based guard to prevent stale React props from overwriting
-    // correct indices set by onEnd. We protect updates for 500ms after onEnd runs.
+    // Uses state-based guards (isDragging/isDropping) to prevent stale React props
+    // from overwriting correct indices during active drag/drop operations.
     const updateItemIndex = (0, react_1.useCallback)((itemId, index) => {
         // Read current value (may be slightly stale from JS thread, but OK for guard logic)
         const existingIndex = itemIndexRegistry.value[itemId];
-        const timeSinceUpdate = Date.now() - registryUpdateTimestamp.current;
-        const isProtected = timeSinceUpdate < 500; // 500ms protection window
         // Add new items always - schedule on UI thread for immediate visibility (or synchronous fallback in tests)
         if (existingIndex === undefined) {
             scheduleOnUIOrImmediate(updateRegistryOnUI, itemIndexRegistry, itemId, index);
             return;
         }
-        // Skip update if within protection window (onEnd just updated the registry)
+        // Skip updates during active drag/drop operations
         // This prevents stale React props from overwriting correct indices
-        if (isProtected) {
+        // State-based guard is more reliable than time-based (works on all devices)
+        if (isDragging.value || isDropping.value) {
             return;
         }
-        // Outside protection window, update if value changed - schedule on UI thread
+        // Outside active drag/drop, update if value changed - schedule on UI thread
         if (existingIndex !== index) {
             scheduleOnUIOrImmediate(updateRegistryOnUI, itemIndexRegistry, itemId, index);
         }
-    }, [itemIndexRegistry]);
-    // Mark registry as recently updated (call this from handleDragEnd)
-    const markRegistryUpdated = (0, react_1.useCallback)(() => {
-        registryUpdateTimestamp.current = Date.now();
-    }, []);
+    }, [itemIndexRegistry, isDragging, isDropping]);
     // Get an item's index from the registry
     const getItemIndex = (0, react_1.useCallback)((itemId) => {
         return itemIndexRegistry.value[itemId];
@@ -231,8 +230,20 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         dragStartScrollOffset.value = 0;
         measuredItemHeight.value = 0;
         isDropping.value = false;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        expectedDropIndex.value = -1;
+        dropMismatchOffset.value = 0;
+    }, [
+        isDragging,
+        draggedIndex,
+        draggedItemId,
+        currentTranslateY,
+        draggedScale,
+        dragStartScrollOffset,
+        measuredItemHeight,
+        isDropping,
+        expectedDropIndex,
+        dropMismatchOffset,
+    ]);
     // Context value is stable since SharedValue references don't change
     const value = (0, react_1.useMemo)(() => ({
         isDragging,
@@ -248,6 +259,8 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         measuredItemHeight,
         isDropping,
         dragSequence,
+        expectedDropIndex,
+        dropMismatchOffset,
         setListRef,
         scrollToOffset,
         prepareForLayoutAnimationRender,
@@ -259,7 +272,6 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         dragStartIndexSnapshot,
         snapshotRegistryForDrag,
         applyReorderToRegistry,
-        markRegistryUpdated,
         totalItems,
     }), [
         isDragging,
@@ -275,8 +287,11 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         measuredItemHeight,
         isDropping,
         dragSequence,
+        expectedDropIndex,
+        dropMismatchOffset,
         setListRef,
         scrollToOffset,
+        prepareForLayoutAnimationRender,
         resetDragState,
         config,
         itemIndexRegistry,
@@ -285,7 +300,6 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         dragStartIndexSnapshot,
         snapshotRegistryForDrag,
         applyReorderToRegistry,
-        markRegistryUpdated,
         totalItems,
     ]);
     return (<DragStateContext.Provider value={value}>

package/lib/contexts/ListAnimationContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListAnimationContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ListAnimationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EAEtB,MAAM,UAAU,CAAC;AAElB;;;;;;;;GAQG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,wBAAwB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAElF;;;OAGG;IACH,0BAA0B,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,oBAAoB,EAAE,CACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,MAAM,IAAI,KACnB,OAAO,CAAC;IAEb;;;OAGG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7E;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,qBAAqB,GAAG,IAAI,CAAC;IAEtE;;;OAGG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7E;;OAEG;IACH,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEjD;;;OAGG;IACH,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAEzC;;OAEG;IACH,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAID;;;GAGG;AACH,eAAO,MAAM,gBAAgB,QAAO,yBAMnC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAAO,yBAAyB,GAAG,IAEvE,CAAC;AAEF,UAAU,0BAA0B;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAkMtE,CAAC"}
+{"version":3,"file":"ListAnimationContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ListAnimationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EAEtB,MAAM,UAAU,CAAC;AAElB;;;;;;;;GAQG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,wBAAwB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAElF;;;OAGG;IACH,0BAA0B,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,oBAAoB,EAAE,CACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,MAAM,IAAI,KACnB,OAAO,CAAC;IAEb;;;OAGG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7E;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,qBAAqB,GAAG,IAAI,CAAC;IAEtE;;;OAGG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7E;;OAEG;IACH,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEjD;;;OAGG;IACH,mBAAmB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAEzC;;OAEG;IACH,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAID;;;GAGG;AACH,eAAO,MAAM,gBAAgB,QAAO,yBAMnC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAAO,yBAAyB,GAAG,IAEvE,CAAC;AAEF,UAAU,0BAA0B;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAyMtE,CAAC"}

package/lib/contexts/ListAnimationContext.js

@@ -193,14 +193,20 @@ const ListAnimationProvider = ({ children, entryAnimationTimeout = 5000, layoutA
     ]);
     // Cleanup all Maps and timers on unmount to prevent memory leaks
     (0, react_1.useEffect)(() => {
+        // Capture ref values at setup time to satisfy react-hooks/exhaustive-deps
+        // This ensures cleanup uses the same Map instances that were set up
+        const timeouts = timeoutIdsRef.current;
+        const triggers = animationTriggersRef.current;
+        const pending = pendingEntriesRef.current;
+        const exiting = exitingItemsRef.current;
         return () => {
             // Clear all pending timeouts
-            timeoutIdsRef.current.forEach(timeoutId => clearTimeout(timeoutId));
-            timeoutIdsRef.current.clear();
+            timeouts.forEach(timeoutId => clearTimeout(timeoutId));
+            timeouts.clear();
             // Clear all Maps
-            animationTriggersRef.current.clear();
-            pendingEntriesRef.current.clear();
-            exitingItemsRef.current.clear();
+            triggers.clear();
+            pending.clear();
+            exiting.clear();
         };
     }, []);
     return (<ListAnimationContext.Provider value={value}>

package/lib/hooks/animations/useListEntryAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListEntryAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/animations/useListEntryAnimation.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,MAAM,EACd,kBAAkB,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;CAsEhD,CAAC"}
+{"version":3,"file":"useListEntryAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/animations/useListEntryAnimation.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,MAAM,EACd,kBAAkB,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;CA6EhD,CAAC"}

package/lib/hooks/animations/useListEntryAnimation.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListEntryAnimation = void 0;
 const react_1 = require("react");
 const react_native_reanimated_1 = require("react-native-reanimated");
+const flash_list_1 = require("@shopify/flash-list");
 const animations_1 = require("../../constants/animations");
 const ListAnimationContext_1 = require("../../contexts/ListAnimationContext");
 /**
@@ -42,15 +43,21 @@ const useListEntryAnimation = (itemId, configOverrides) => {
     const opacity = (0, react_native_reanimated_1.useSharedValue)(1);
     // Track if we've already checked for entry animation for this item
     const hasCheckedRef = (0, react_1.useRef)(false);
-    const lastItemIdRef = (0, react_1.useRef)(itemId);
-    // Reset check flag when item ID changes (view recycled)
-    if (lastItemIdRef.current !== itemId) {
-        lastItemIdRef.current = itemId;
-        hasCheckedRef.current = false;
-        // Reset animation values for new item
-        translateX.value = 0;
-        opacity.value = 1;
-    }
+    // Use FlashList's useRecyclingState to detect when view is recycled
+    // This tracks the previous itemId so we can reset state when the view
+    // is reused for a different item
+    const [prevItemId] = (0, flash_list_1.useRecyclingState)(itemId, [itemId]);
+    // Reset animation state when view is recycled (item ID changes)
+    // Using useLayoutEffect to run before paint and prevent visual glitches
+    // IMPORTANT: SharedValue writes must happen in effects, not during render
+    (0, react_1.useLayoutEffect)(() => {
+        if (prevItemId !== itemId) {
+            hasCheckedRef.current = false;
+            // Reset animation values for new item
+            translateX.value = 0;
+            opacity.value = 1;
+        }
+    }, [itemId, prevItemId, translateX, opacity]);
     // Check for pending entry animation on mount
     (0, react_1.useEffect)(() => {
         if (!animationContext || hasCheckedRef.current)

package/lib/hooks/animations/useListExitAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListExitAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/animations/useListExitAnimation.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAE3E;;GAEG;AACH,UAAU,0BAA0B;IAClC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,iEAAiE;IACjE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,SAAS,0BAA0B;;;;;;;;;;;6BA2EpB,kBAAkB,cACjB,MAAM,IAAI,WACd,mBAAmB;;CAwDhC,CAAC"}
+{"version":3,"file":"useListExitAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/animations/useListExitAnimation.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAE3E;;GAEG;AACH,UAAU,0BAA0B;IAClC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,iEAAiE;IACjE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EACd,SAAS,0BAA0B;;;;;;;;;;;6BA6EpB,kBAAkB,cACjB,MAAM,IAAI,WACd,mBAAmB;;CAwDhC,CAAC"}

package/lib/hooks/animations/useListExitAnimation.js

@@ -67,14 +67,16 @@ const useListExitAnimation = (itemId, config) => {
             // Cancel any running animation to prevent callbacks firing after unmount
             (0, react_native_reanimated_1.cancelAnimation)(exitDirection);
         };
-    }, [exitDirection]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Cleanup effect - SharedValues are stable refs, no deps needed
     // Reset animation state when view is recycled (item ID changes)
     (0, react_1.useEffect)(() => {
         exitDirection.value = 0;
         slideDistance.value = animations_1.FAST_EXIT_ANIMATION.slide.distance;
         scaleToValue.value = animations_1.FAST_EXIT_ANIMATION.scale.toValue;
         isAnimatingRef.current = false;
-    }, [itemId, exitDirection, slideDistance, scaleToValue]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [itemId]); // Only itemId triggers reset - SharedValues are stable refs
     // Exit animated style (slide, fade, scale)
     const exitAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         // Fast path: no animation active, return static values

package/lib/hooks/drag/useDragAnimatedStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDragAnimatedStyle.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragAnimatedStyle.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAChC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAC/B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,GAC1B,0BAA0B,CAmF5B"}
+{"version":3,"file":"useDragAnimatedStyle.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragAnimatedStyle.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAO9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAChC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAC/B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,GAC1B,0BAA0B,CA4T5B"}