@souscheflabs/reanimated-flashlist 0.2.6 → 0.2.7

package/README.md

@@ -2,6 +2,10 @@
 
 A high-performance animated FlashList with drag-to-reorder and entry/exit animations for React Native.
 
+<p align="center">
+  <img src="assets/example-screenshot.png" width="300" alt="Example screenshot showing drag-to-reorder list" />
+</p>
+
 ## Features
 
 - **Drag-to-reorder** with smooth animations and autoscroll

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;AA6XjB,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;AAsYjB,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

@@ -120,12 +120,20 @@ 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, ...flashListProps } = props;
+    const { data, keyExtractor, renderItem, dragEnabled = false, onReorder, onReorderByNeighbors, canDrag, onHapticFeedback, config, onPrepareLayoutAnimation, ListFooterComponent, onRefresh, refreshing = false, onEndReached, onEndReachedThreshold = 0.5, contentContainerStyle, estimatedItemSize, ...flashListProps } = props;
     // Merge config with defaults
-    const dragConfig = (0, react_1.useMemo)(() => ({
-        ...constants_1.DEFAULT_DRAG_CONFIG,
-        ...config?.drag,
-    }), [config?.drag]);
+    // Use estimatedItemSize as default itemHeight if not explicitly configured
+    const dragConfig = (0, react_1.useMemo)(() => {
+        const mergedConfig = {
+            ...constants_1.DEFAULT_DRAG_CONFIG,
+            ...config?.drag,
+            itemHeight: config?.drag?.itemHeight ?? estimatedItemSize ?? constants_1.DEFAULT_DRAG_CONFIG.itemHeight,
+        };
+        if (__DEV__) {
+            console.log(`[AnimatedFlashList] dragConfig.itemHeight=${mergedConfig.itemHeight}, estimatedItemSize=${estimatedItemSize}, config.drag?.itemHeight=${config?.drag?.itemHeight}`);
+        }
+        return mergedConfig;
+    }, [config?.drag, estimatedItemSize]);
     // Ref to FlashList
     const flashListRef = (0, react_1.useRef)(null);
     // Expose methods to parent via ref

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,CAkJ3D;AAGD,eAAO,MAAM,qBAAqB,EAE7B,OAAO,0BAA0B,CAAC"}
+{"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,CA+J3D;AAGD,eAAO,MAAM,qBAAqB,EAE7B,OAAO,0BAA0B,CAAC"}

package/lib/AnimatedFlashListItem.js

@@ -50,6 +50,17 @@ const contexts_1 = require("./contexts");
  * @internal
  */
 function AnimatedFlashListItemInner({ item, index, totalItems, isDragEnabled, renderItem, onReorderByDelta, onHapticFeedback, }) {
+    // DEBUG: Log renders
+    if (__DEV__) {
+        console.log(`[AnimatedFlashListItem] RENDER ${item.id} at index=${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)();
+    // Call updateItemIndex synchronously during render to ensure the registry
+    // is always up-to-date when any item renders
+    updateItemIndex(item.id, index);
     // Animated ref for measuring item height on drag start
     const containerRef = (0, react_native_reanimated_1.useAnimatedRef)();
     // Track measured height for layout compensation

package/lib/contexts/DragStateContext.d.ts

@@ -37,6 +37,8 @@ export interface DragStateContextValue {
     measuredItemHeight: SharedValue<number>;
     /** Flag to freeze shift values during drop transition */
     isDropping: SharedValue<boolean>;
+    /** Counter incremented on each drag start, used to force shift recalculation */
+    dragSequence: 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) */
@@ -45,6 +47,27 @@ export interface DragStateContextValue {
     resetDragState: () => void;
     /** Current drag configuration */
     config: DragConfig;
+    /**
+     * Index registry for tracking itemId -> index mapping.
+     * Updated on every item render to handle FlashList recycling.
+     * Stored on UI thread as SharedValue for worklet access.
+     */
+    itemIndexRegistry: SharedValue<Record<string, number>>;
+    /** Update an item's index in the registry (call from JS thread) */
+    updateItemIndex: (itemId: string, index: number) => void;
+    /** Get an item's index from the registry */
+    getItemIndex: (itemId: string) => number | undefined;
+    /**
+     * Snapshot of itemIndexRegistry taken at drag start.
+     * Used during drag to ensure consistent index lookup regardless of
+     * React re-renders or FlashList recycling.
+     */
+    dragStartIndexSnapshot: SharedValue<Record<string, number>>;
+    /**
+     * Capture a snapshot of the current itemIndexRegistry for use during drag.
+     * Call this at the start of a drag operation.
+     */
+    snapshotRegistryForDrag: () => void;
 }
 /**
  * Hook to access shared drag state from context.

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

@@ -1 +1 @@
-{"version":3,"file":"DragStateContext.d.ts","sourceRoot":"","sources":["../../src/contexts/DragStateContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C;;;;;;;;;GASG;AACH,MAAM,WAAW,qBAAqB;IACpC,2CAA2C;IAC3C,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,oEAAoE;IACpE,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,oFAAoF;IACpF,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,iFAAiF;IACjF,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,sEAAsE;IACtE,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,+DAA+D;IAC/D,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,uFAAuF;IACvF,qBAAqB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,yEAAyE;IACzE,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,qDAAqD;IACrD,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,mFAAmF;IACnF,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,4EAA4E;IAC5E,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxC,yDAAyD;IACzD,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,2DAA2D;IAC3D,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,wEAAwE;IACxE,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,sDAAsD;IACtD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iCAAiC;IACjC,MAAM,EAAE,UAAU,CAAC;CACpB;AAID;;;GAGG;AACH,eAAO,MAAM,YAAY,QAAO,qBAM/B,CAAC;AAEF,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC9B;AAmDD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsG9D,CAAC"}
+{"version":3,"file":"DragStateContext.d.ts","sourceRoot":"","sources":["../../src/contexts/DragStateContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C;;;;;;;;;GASG;AACH,MAAM,WAAW,qBAAqB;IACpC,2CAA2C;IAC3C,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,oEAAoE;IACpE,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,oFAAoF;IACpF,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,iFAAiF;IACjF,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,sEAAsE;IACtE,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,+DAA+D;IAC/D,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,uFAAuF;IACvF,qBAAqB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3C,yEAAyE;IACzE,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,qDAAqD;IACrD,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,mFAAmF;IACnF,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,4EAA4E;IAC5E,kBAAkB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxC,yDAAyD;IACzD,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,gFAAgF;IAChF,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,2DAA2D;IAC3D,UAAU,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,wEAAwE;IACxE,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,sDAAsD;IACtD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iCAAiC;IACjC,MAAM,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACvD,mEAAmE;IACnE,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,4CAA4C;IAC5C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD;;;;OAIG;IACH,sBAAsB,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5D;;;OAGG;IACH,uBAAuB,EAAE,MAAM,IAAI,CAAC;CACrC;AAID;;;GAGG;AACH,eAAO,MAAM,YAAY,QAAO,qBAM/B,CAAC;AAEF,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CAC9B;AAmDD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2J9D,CAAC"}

package/lib/contexts/DragStateContext.js

@@ -106,6 +106,14 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     const measuredItemHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     // Flag to freeze shift values during drop transition
     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);
+    // 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
+    const itemIndexRegistry = (0, react_native_reanimated_1.useSharedValue)({});
+    // Snapshot of registry taken at drag start for consistent index lookup during drag
+    const dragStartIndexSnapshot = (0, react_native_reanimated_1.useSharedValue)({});
     // Ref to FlashList for autoscroll operations
     const listRef = (0, react_1.useRef)(null);
     // Register the FlashList ref
@@ -116,6 +124,27 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     const scrollToOffset = (0, react_1.useCallback)((offset, animated = false) => {
         listRef.current?.scrollToOffset({ offset, animated });
     }, []);
+    // Update an item's index in the registry
+    // Called on every item render to keep indices fresh
+    const updateItemIndex = (0, react_1.useCallback)((itemId, index) => {
+        // Only update if the value has changed to avoid unnecessary SharedValue updates
+        if (itemIndexRegistry.value[itemId] !== index) {
+            itemIndexRegistry.value = {
+                ...itemIndexRegistry.value,
+                [itemId]: index,
+            };
+        }
+    }, [itemIndexRegistry]);
+    // Get an item's index from the registry
+    const getItemIndex = (0, react_1.useCallback)((itemId) => {
+        return itemIndexRegistry.value[itemId];
+    }, [itemIndexRegistry]);
+    // Capture a snapshot of the registry at drag start
+    // This ensures consistent index lookup during the entire drag operation,
+    // regardless of React re-renders or FlashList recycling
+    const snapshotRegistryForDrag = (0, react_1.useCallback)(() => {
+        dragStartIndexSnapshot.value = { ...itemIndexRegistry.value };
+    }, [dragStartIndexSnapshot, itemIndexRegistry]);
     // Reset drag state after drop
     const resetDragState = (0, react_1.useCallback)(() => {
         isDragging.value = false;
@@ -142,10 +171,16 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         listTopY,
         measuredItemHeight,
         isDropping,
+        dragSequence,
         setListRef,
         scrollToOffset,
         resetDragState,
         config,
+        itemIndexRegistry,
+        updateItemIndex,
+        getItemIndex,
+        dragStartIndexSnapshot,
+        snapshotRegistryForDrag,
     }), [
         isDragging,
         draggedIndex,
@@ -159,10 +194,16 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         listTopY,
         measuredItemHeight,
         isDropping,
+        dragSequence,
         setListRef,
         scrollToOffset,
         resetDragState,
         config,
+        itemIndexRegistry,
+        updateItemIndex,
+        getItemIndex,
+        dragStartIndexSnapshot,
+        snapshotRegistryForDrag,
     ]);
     return (<DragStateContext.Provider value={value}>
       {children}

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,CAmE5B"}
+{"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,CAsF5B"}

package/lib/hooks/drag/useDragAnimatedStyle.js

@@ -64,20 +64,37 @@ function useDragAnimatedStyle(itemId, isDragging, translateY, shiftY) {
     // Animated style for drag offset with scale and shadow
     const dragAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         const isThisItemDragged = draggedItemId.value === itemId;
-        // Keep elevated if: actively dragging OR has offset (animating back)
-        const shouldBeElevated = isDragging.value ||
-            Math.abs(translateY.value) > constants_1.DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD;
+        const hasSignificantTranslateY = Math.abs(translateY.value) > constants_1.DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD;
         // Calculate scroll delta for position compensation during autoscroll
         const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
-        // Use drag translateY + scroll compensation for dragged item, shiftY for others
-        const yOffset = isThisItemDragged
+        // Determine when to use translateY for positioning:
+        // 1. Actively being dragged (isThisItemDragged && isDragging)
+        // 2. Animating/settling after drop (hasSignificantTranslateY)
+        //
+        // Case 2 handles the FALLBACK scenario where FlashList doesn't re-render
+        // after reorder. The item uses translateY to stay at its new position
+        // until FlashList eventually re-renders and useDropCompensation runs.
+        const shouldUseDragOffset = (isThisItemDragged && isDragging.value) || hasSignificantTranslateY;
+        // Use drag translateY + scroll compensation for dragged/settling item,
+        // shiftY for others or for items at rest
+        const yOffset = shouldUseDragOffset
             ? translateY.value + scrollDelta
             : shiftY.value;
+        // Only apply visual effects (scale, elevation, zIndex) when ACTIVELY dragging
+        // Not when just settling at new position after drop
+        const isActivelyDragging = isThisItemDragged && isDragging.value;
+        // Keep elevated zIndex when actively dragging OR when settling at new position
+        // This prevents the dropped item from appearing behind other items
+        // Note: We use hasSignificantTranslateY alone (not isThisItemDragged) because
+        // after FALLBACK completes, draggedItemId is reset to '' but translateY remains
+        const shouldBeElevated = isActivelyDragging || hasSignificantTranslateY;
         return {
             transform: [
                 { translateY: yOffset },
-                { scale: isThisItemDragged ? draggedScale.value : 1 },
+                // Only apply drag scale when actively dragging
+                { scale: isActivelyDragging ? draggedScale.value : 1 },
             ],
+            // Elevate zIndex when dragging or settling at new position
             zIndex: shouldBeElevated ? constants_1.DRAG_THRESHOLDS.ELEVATED_Z_INDEX : 0,
             // Use animated shadow opacity for smooth transitions
             shadowOpacity: animatedShadowOpacity.value,

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

@@ -1 +1 @@
-{"version":3,"file":"useDragGesture.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragGesture.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACrB,MAAM,aAAa,CAAC;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,oBAAoB,EAC5B,SAAS,EAAE,uBAAuB,GACjC,oBAAoB,CAqPtB"}
+{"version":3,"file":"useDragGesture.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragGesture.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EACV,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACrB,MAAM,aAAa,CAAC;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,oBAAoB,EAC5B,SAAS,EAAE,uBAAuB,GACjC,oBAAoB,CA8WtB"}

package/lib/hooks/drag/useDragGesture.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_native_reanimated_1 = require("react-native-reanimated");
 const react_native_gesture_handler_1 = require("react-native-gesture-handler");
 const react_native_worklets_1 = require("react-native-worklets");
+const flash_list_1 = require("@shopify/flash-list");
 const DragStateContext_1 = require("../../contexts/DragStateContext");
 /**
  * Hook that encapsulates all drag gesture logic.
@@ -40,28 +41,58 @@ function useDragGesture(config, callbacks) {
     const isDragging = (0, react_native_reanimated_1.useSharedValue)(false);
     const translateY = (0, react_native_reanimated_1.useSharedValue)(0);
     // Global drag state for coordinating animations across all items
-    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, currentTranslateY, draggedScale, scrollOffset, dragStartScrollOffset, contentHeight, visibleHeight, listTopY, measuredItemHeight, isDropping, scrollToOffset, config: dragConfig, } = (0, DragStateContext_1.useDragState)();
+    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, currentTranslateY, draggedScale, scrollOffset, dragStartScrollOffset, contentHeight, visibleHeight, listTopY, measuredItemHeight, isDropping, scrollToOffset, config: dragConfig, itemIndexRegistry, snapshotRegistryForDrag, dragSequence, } = (0, DragStateContext_1.useDragState)();
     // Performance optimization: Track last significant Y position and scroll time
     // to avoid updating on every pixel movement
     const lastSignificantY = (0, react_native_reanimated_1.useSharedValue)(0);
     const lastScrollTime = (0, react_native_reanimated_1.useSharedValue)(0);
+    // Track current index in SharedValue for worklet access
+    // This is critical because FlashList may not re-render items after reorder,
+    // leaving the closure-captured `index` stale
+    const currentIndex = (0, react_native_reanimated_1.useSharedValue)(index);
+    // 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 during autoscroll
+    const [prevItemId, setPrevItemId] = (0, flash_list_1.useRecyclingState)(itemId, [itemId]);
+    // Reset translateY and currentIndex when view is recycled
+    // Using useLayoutEffect to run before paint and prevent visual glitches
+    (0, react_1.useLayoutEffect)(() => {
+        if (prevItemId !== itemId) {
+            // View was recycled - reset local drag state to prevent stale values
+            // from the previous item affecting this item's position
+            (0, react_native_reanimated_1.cancelAnimation)(translateY);
+            translateY.value = 0;
+            isDragging.value = false;
+            currentIndex.value = index;
+            setPrevItemId(itemId);
+        }
+    }, [itemId, prevItemId, setPrevItemId, translateY, isDragging, currentIndex, index]);
+    // Sync index to SharedValue in useEffect (not during render per Reanimated docs)
+    (0, react_1.useEffect)(() => {
+        currentIndex.value = index;
+    }, [index, currentIndex]);
     // Store current values in refs for stable gesture callbacks
     const dragContextRef = (0, react_1.useRef)({
-        index,
         totalItems,
         itemId,
         onReorderByDelta,
     });
     // Keep ref in sync with current values
     dragContextRef.current = {
-        index,
         totalItems,
         itemId,
         onReorderByDelta,
     };
     // Calculate new position and call reorder callback
     const handleDragEnd = (0, react_1.useCallback)((finalTranslateY) => {
-        const { index: currentIndex, totalItems: total, itemId: currentItemId, onReorderByDelta: reorder, } = dragContextRef.current;
+        const { totalItems: total, itemId: currentItemId, onReorderByDelta: reorder, } = dragContextRef.current;
+        // Use draggedIndex from context, which was set in onStart using the registry
+        // This handles FlashList's recycling where closure-captured index may be stale
+        const currentIndex = draggedIndex.value;
+        if (currentIndex === -1) {
+            // Drag was cancelled or reset
+            return;
+        }
         // Use configured itemHeight for consistent position calculations
         const itemHeight = dragConfig.itemHeight;
         // Calculate how many positions to move based on drag offset
@@ -70,14 +101,67 @@ function useDragGesture(config, callbacks) {
         const newIndex = Math.max(0, Math.min(total - 1, currentIndex + positionDelta));
         const positionChanged = reorder && positionDelta !== 0 && newIndex !== currentIndex;
         if (positionChanged) {
-            // Position changes - call reorder, let useDropCompensation handle animation
+            // Position changes - call reorder and animate back
+            // useDropCompensation handles state reset if re-renders happen,
+            // but we also animate here as a fallback since FlashList's virtualization
+            // may not trigger re-renders when data changes.
             isDropping.value = true;
             onHapticFeedback?.('medium');
             reorder(currentItemId, positionDelta);
+            // Note: We no longer call applyReorderToRegistry here.
+            // The snapshot-based approach means shift calculations use the frozen
+            // snapshot taken at drag start. After drag ends, React re-renders
+            // will naturally update the registry via updateItemIndex calls.
             // Reset currentTranslateY to stop shift calculations for other items
-            // Note: dragStartScrollOffset is NOT reset here to prevent visual jump
-            // It will be reset after the settle animation completes in useDropCompensation
             currentTranslateY.value = 0;
+            // Trigger a micro-scroll to force FlashList to refresh its views
+            // This helps FlashList notice the data change and re-render
+            const currentOffset = scrollOffset.value;
+            (0, react_native_worklets_1.scheduleOnRN)(scrollToOffset, currentOffset + 1, false);
+            // Scroll back after a short delay
+            setTimeout(() => {
+                scrollToOffset(currentOffset, false);
+            }, 16);
+            // Fallback: If useDropCompensation doesn't run (no re-render from FlashList),
+            // we need to animate the item to its new position and reset state.
+            //
+            // Since FlashList hasn't re-rendered, the item's base position is still at the
+            // old index. To make it appear at the new index, we calculate the target translateY
+            // that positions the item correctly.
+            //
+            // When FlashList eventually re-renders (on scroll or interaction), useDropCompensation
+            // will see the index change and animate translateY back to 0.
+            (0, react_native_reanimated_1.cancelAnimation)(translateY);
+            // Calculate the target translateY to position item at its new index
+            // Since FlashList hasn't updated base position, we need:
+            // targetTranslateY = (newIndex - currentIndex) * itemHeight
+            const targetTranslateY = (newIndex - currentIndex) * itemHeight;
+            // Use a delayed animation to give useDropCompensation a chance to run first
+            translateY.value = (0, react_native_reanimated_1.withDelay)(150, // Delay to let React re-render and useDropCompensation run first
+            (0, react_native_reanimated_1.withTiming)(targetTranslateY, // Animate to the new position
+            { duration: 150, easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease) }, finished => {
+                'worklet';
+                // Only reset state if still in dropping state (useDropCompensation didn't handle it)
+                if (finished && isDropping.value) {
+                    // Reset all drag state - the item is now visually at its new position
+                    // via translateY offset. When FlashList re-renders, useDropCompensation
+                    // will compensate and animate to 0.
+                    globalIsDragging.value = false;
+                    isDropping.value = false;
+                    draggedIndex.value = -1;
+                    draggedItemId.value = '';
+                    measuredItemHeight.value = 0;
+                    dragStartScrollOffset.value = 0;
+                    // FlashList doesn't re-render visible items after data changes.
+                    // Since useDropCompensation won't run, we need to animate translateY
+                    // back to 0 ourselves. This causes a visual "snap" but prevents the
+                    // item from being stuck floating forever.
+                    translateY.value = (0, react_native_reanimated_1.withTiming)(0, {
+                        duration: 200,
+                        easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
+                    });
+                }
+            }));
         }
         else {
             // Same position - animate back and reset state
@@ -117,6 +201,17 @@ function useDragGesture(config, callbacks) {
         .enabled(enabled)
         .onStart(() => {
         'worklet';
+        // Reset any pending drop state from previous drag
+        // This is critical: if a new drag starts before the previous drop's
+        // fallback completed, isDropping would still be true, causing shift
+        // calculations to freeze at their previous values
+        if (isDropping.value) {
+            isDropping.value = false;
+        }
+        // Increment drag sequence to force all items to recalculate their shifts
+        // This handles the case where items had non-zero shiftY from a previous
+        // drag that didn't complete its animations
+        dragSequence.value = dragSequence.value + 1;
         // Measure actual item height for accurate drag calculations
         const measured = (0, react_native_reanimated_1.measure)(containerRef);
         if (measured) {
@@ -126,7 +221,13 @@ function useDragGesture(config, callbacks) {
         isDragging.value = true;
         // Global drag state for shift animations
         globalIsDragging.value = true;
-        draggedIndex.value = index;
+        // Use index from the central registry, which is updated on every item render
+        // This handles FlashList's recycling behavior where currentIndex.value might be stale
+        const registryIndex = itemIndexRegistry.value[itemId];
+        const actualIndex = registryIndex !== undefined ? registryIndex : currentIndex.value;
+        draggedIndex.value = actualIndex;
+        // Also update currentIndex to stay in sync
+        currentIndex.value = actualIndex;
         draggedItemId.value = itemId;
         dragStartScrollOffset.value = scrollOffset.value;
         currentTranslateY.value = 0;

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

@@ -1 +1 @@
-{"version":3,"file":"useDragShift.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragShift.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE1E;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,kBAAkB,CA2G3E"}
+{"version":3,"file":"useDragShift.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragShift.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE1E;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,kBAAkB,CAkK3E"}

package/lib/hooks/drag/useDragShift.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDragShift = useDragShift;
+const react_1 = require("react");
 const react_native_reanimated_1 = require("react-native-reanimated");
+const flash_list_1 = require("@shopify/flash-list");
 const DragStateContext_1 = require("../../contexts/DragStateContext");
 const constants_1 = require("../../constants");
 /**
@@ -25,15 +27,43 @@ const constants_1 = require("../../constants");
 function useDragShift(config) {
     const { itemId, index } = config;
     // Global drag state for coordinating animations across all items
-    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, currentTranslateY, scrollOffset, dragStartScrollOffset, measuredItemHeight, isDropping, config: dragConfig, } = (0, DragStateContext_1.useDragState)();
+    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, currentTranslateY, scrollOffset, dragStartScrollOffset, isDropping, config: dragConfig, itemIndexRegistry, dragSequence, } = (0, DragStateContext_1.useDragState)();
     // Shift animation SharedValue
     const shiftY = (0, react_native_reanimated_1.useSharedValue)(0);
+    // Track current index in SharedValue for worklet access
+    // This is critical because FlashList may not re-render items after reorder,
+    // leaving the closure-captured `index` stale
+    const currentIndex = (0, react_native_reanimated_1.useSharedValue)(index);
+    // 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 during autoscroll
+    const [prevItemId, setPrevItemId] = (0, flash_list_1.useRecyclingState)(itemId, [itemId]);
+    // Reset shiftY and update currentIndex immediately when view is recycled
+    // Using useLayoutEffect to run before paint and prevent visual glitches
+    (0, react_1.useLayoutEffect)(() => {
+        if (prevItemId !== itemId) {
+            // View was recycled - reset shiftY to prevent stale shift values
+            // from the previous item affecting this item's position
+            (0, react_native_reanimated_1.cancelAnimation)(shiftY);
+            shiftY.value = 0;
+            // Update currentIndex immediately for the new item
+            currentIndex.value = index;
+            setPrevItemId(itemId);
+        }
+    }, [itemId, prevItemId, setPrevItemId, shiftY, currentIndex, index]);
+    // Sync index to SharedValue in useEffect (not during render per Reanimated docs)
+    (0, react_1.useEffect)(() => {
+        currentIndex.value = index;
+    }, [index, currentIndex]);
     // Calculate target shift using useDerivedValue
     // Note: useDerivedValue automatically tracks SharedValue dependencies on UI thread,
     // so we don't need a manual trigger counter. When any read SharedValue changes,
     // Reanimated will re-execute this derived value.
     const targetShiftY = (0, react_native_reanimated_1.useDerivedValue)(() => {
         'worklet';
+        // Read dragSequence to force recalculation when a new drag starts
+        // This ensures stale shiftY values from previous drags are recalculated
+        const _sequence = dragSequence.value;
         // During drop transition, freeze shift values
         if (isDropping.value) {
             return shiftY.value;
@@ -42,6 +72,10 @@ function useDragShift(config) {
         const isDraggingNow = globalIsDragging.value;
         const translateYNow = currentTranslateY.value;
         const currentDraggedItemId = draggedItemId.value;
+        // Use index from the central registry if available, which is updated on every item render
+        // This handles FlashList's recycling behavior where currentIndex.value might be stale
+        const registryIndex = itemIndexRegistry.value[itemId];
+        const myIndex = registryIndex !== undefined ? registryIndex : currentIndex.value;
         // If I'm the dragged item, no shift needed
         if (currentDraggedItemId === itemId)
             return 0;
@@ -71,31 +105,43 @@ function useDragShift(config) {
         // Items outside [min(dragIdx, hoverIdx), max(dragIdx, hoverIdx)] can bail early
         const minAffectedIndex = Math.min(currentDraggedIndex, hoveredIndex);
         const maxAffectedIndex = Math.max(currentDraggedIndex, hoveredIndex);
-        if (index < minAffectedIndex || index > maxAffectedIndex) {
+        if (myIndex < minAffectedIndex || myIndex > maxAffectedIndex) {
             return 0;
         }
         // Moving DOWN: items between original and hovered positions shift UP
         if (hoveredIndex > currentDraggedIndex) {
-            if (index > currentDraggedIndex && index <= hoveredIndex) {
+            if (myIndex > currentDraggedIndex && myIndex <= hoveredIndex) {
                 return -itemHeight;
             }
         }
         // Moving UP: items between hovered and original positions shift DOWN
         else if (hoveredIndex < currentDraggedIndex) {
-            if (index < currentDraggedIndex && index >= hoveredIndex) {
+            if (myIndex < currentDraggedIndex && myIndex >= hoveredIndex) {
                 return itemHeight;
             }
         }
         return 0;
-    }, [index, itemId]);
-    // Animate shift when target changes
-    (0, react_native_reanimated_1.useAnimatedReaction)(() => targetShiftY.value, (target, prev) => {
+    }, [itemId]);
+    // Animate shift when target changes or when a new drag starts
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => ({
+        target: targetShiftY.value,
+        sequence: dragSequence.value,
+    }), (state, prev) => {
         'worklet';
-        if (target !== prev) {
+        const targetChanged = state.target !== prev?.target;
+        const newDragStarted = state.sequence !== prev?.sequence;
+        // Animate to target if:
+        // 1. The target changed, OR
+        // 2. A new drag started and we're not already at the target
+        const needsAnimation = targetChanged ||
+            (newDragStarted &&
+                Math.abs(shiftY.value - state.target) >
+                    constants_1.DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD);
+        if (needsAnimation) {
             // Cancel any in-flight animation before starting a new one
             // This prevents competing animations and visual glitches
             (0, react_native_reanimated_1.cancelAnimation)(shiftY);
-            shiftY.value = (0, react_native_reanimated_1.withTiming)(target, {
+            shiftY.value = (0, react_native_reanimated_1.withTiming)(state.target, {
                 duration: constants_1.ANIMATION_TIMING.SHIFT_DURATION,
                 easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
             });

package/lib/types/list.d.ts

@@ -115,6 +115,11 @@ export interface AnimatedFlashListProps<T extends AnimatedListItem> extends Omit
     onEndReached?: () => void;
     /** Pagination threshold */
     onEndReachedThreshold?: number;
+    /**
+     * Estimated size of each item (deprecated in FlashList v2, but used as default for drag itemHeight)
+     * @deprecated Use config.drag.itemHeight instead
+     */
+    estimatedItemSize?: number;
 }
 /**
  * Ref handle for AnimatedFlashList

package/lib/types/list.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@souscheflabs/reanimated-flashlist",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A high-performance animated FlashList with drag-to-reorder and entry/exit animations (New Architecture)",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -8,7 +8,8 @@
   "source": "src/index.ts",
   "files": [
     "lib",
-    "src"
+    "src",
+    "assets"
   ],
   "sideEffects": false,
   "scripts": {

package/src/AnimatedFlashList.tsx

@@ -274,16 +274,25 @@ function AnimatedFlashListInner<T extends AnimatedListItem>(
     onEndReached,
     onEndReachedThreshold = 0.5,
     contentContainerStyle,
+    estimatedItemSize,
     ...flashListProps
   } = props;
 
   // Merge config with defaults
+  // Use estimatedItemSize as default itemHeight if not explicitly configured
   const dragConfig = useMemo(
-    () => ({
-      ...DEFAULT_DRAG_CONFIG,
-      ...config?.drag,
-    }),
-    [config?.drag],
+    () => {
+      const mergedConfig = {
+        ...DEFAULT_DRAG_CONFIG,
+        ...config?.drag,
+        itemHeight: config?.drag?.itemHeight ?? estimatedItemSize ?? DEFAULT_DRAG_CONFIG.itemHeight,
+      };
+      if (__DEV__) {
+        console.log(`[AnimatedFlashList] dragConfig.itemHeight=${mergedConfig.itemHeight}, estimatedItemSize=${estimatedItemSize}, config.drag?.itemHeight=${config?.drag?.itemHeight}`);
+      }
+      return mergedConfig;
+    },
+    [config?.drag, estimatedItemSize],
   );
 
   // Ref to FlashList

package/src/AnimatedFlashListItem.tsx

@@ -9,7 +9,7 @@ import {
   useListExitAnimation,
   useListEntryAnimation,
 } from './hooks';
-import { useListAnimationOptional } from './contexts';
+import { useListAnimationOptional, useDragState } from './contexts';
 import type {
   AnimatedListItem,
   AnimatedRenderItemInfo,
@@ -53,6 +53,19 @@ function AnimatedFlashListItemInner<T extends AnimatedListItem>({
   onReorderByDelta,
   onHapticFeedback,
 }: AnimatedFlashListItemProps<T>): React.ReactElement | null {
+  // DEBUG: Log renders
+  if (__DEV__) {
+    console.log(`[AnimatedFlashListItem] RENDER ${item.id} at index=${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 } = useDragState();
+  // Call updateItemIndex synchronously during render to ensure the registry
+  // is always up-to-date when any item renders
+  updateItemIndex(item.id, index);
+
   // Animated ref for measuring item height on drag start
   const containerRef = useAnimatedRef<Animated.View>();
 

package/src/contexts/DragStateContext.tsx

@@ -46,6 +46,8 @@ export interface DragStateContextValue {
   measuredItemHeight: SharedValue<number>;
   /** Flag to freeze shift values during drop transition */
   isDropping: SharedValue<boolean>;
+  /** Counter incremented on each drag start, used to force shift recalculation */
+  dragSequence: 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) */
@@ -54,6 +56,27 @@ export interface DragStateContextValue {
   resetDragState: () => void;
   /** Current drag configuration */
   config: DragConfig;
+  /**
+   * Index registry for tracking itemId -> index mapping.
+   * Updated on every item render to handle FlashList recycling.
+   * Stored on UI thread as SharedValue for worklet access.
+   */
+  itemIndexRegistry: SharedValue<Record<string, number>>;
+  /** Update an item's index in the registry (call from JS thread) */
+  updateItemIndex: (itemId: string, index: number) => void;
+  /** Get an item's index from the registry */
+  getItemIndex: (itemId: string) => number | undefined;
+  /**
+   * Snapshot of itemIndexRegistry taken at drag start.
+   * Used during drag to ensure consistent index lookup regardless of
+   * React re-renders or FlashList recycling.
+   */
+  dragStartIndexSnapshot: SharedValue<Record<string, number>>;
+  /**
+   * Capture a snapshot of the current itemIndexRegistry for use during drag.
+   * Call this at the start of a drag operation.
+   */
+  snapshotRegistryForDrag: () => void;
 }
 
 const DragStateContext = createContext<DragStateContextValue | null>(null);
@@ -156,6 +179,17 @@ export const DragStateProvider: React.FC<DragStateProviderProps> = ({
   // Flag to freeze shift values during drop transition
   const isDropping = useSharedValue(false);
 
+  // Counter incremented on each drag start, used to force shift recalculation
+  const dragSequence = 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
+  const itemIndexRegistry = useSharedValue<Record<string, number>>({});
+
+  // Snapshot of registry taken at drag start for consistent index lookup during drag
+  const dragStartIndexSnapshot = useSharedValue<Record<string, number>>({});
+
   // Ref to FlashList for autoscroll operations
   const listRef = useRef<FlashListRef<unknown> | null>(null);
 
@@ -169,6 +203,36 @@ export const DragStateProvider: React.FC<DragStateProviderProps> = ({
     listRef.current?.scrollToOffset({ offset, animated });
   }, []);
 
+  // Update an item's index in the registry
+  // Called on every item render to keep indices fresh
+  const updateItemIndex = useCallback(
+    (itemId: string, index: number) => {
+      // Only update if the value has changed to avoid unnecessary SharedValue updates
+      if (itemIndexRegistry.value[itemId] !== index) {
+        itemIndexRegistry.value = {
+          ...itemIndexRegistry.value,
+          [itemId]: index,
+        };
+      }
+    },
+    [itemIndexRegistry],
+  );
+
+  // Get an item's index from the registry
+  const getItemIndex = useCallback(
+    (itemId: string): number | undefined => {
+      return itemIndexRegistry.value[itemId];
+    },
+    [itemIndexRegistry],
+  );
+
+  // Capture a snapshot of the registry at drag start
+  // This ensures consistent index lookup during the entire drag operation,
+  // regardless of React re-renders or FlashList recycling
+  const snapshotRegistryForDrag = useCallback(() => {
+    dragStartIndexSnapshot.value = { ...itemIndexRegistry.value };
+  }, [dragStartIndexSnapshot, itemIndexRegistry]);
+
   // Reset drag state after drop
   const resetDragState = useCallback(() => {
     isDragging.value = false;
@@ -197,10 +261,16 @@ export const DragStateProvider: React.FC<DragStateProviderProps> = ({
       listTopY,
       measuredItemHeight,
       isDropping,
+      dragSequence,
       setListRef,
       scrollToOffset,
       resetDragState,
       config,
+      itemIndexRegistry,
+      updateItemIndex,
+      getItemIndex,
+      dragStartIndexSnapshot,
+      snapshotRegistryForDrag,
     }),
     [
       isDragging,
@@ -215,10 +285,16 @@ export const DragStateProvider: React.FC<DragStateProviderProps> = ({
       listTopY,
       measuredItemHeight,
       isDropping,
+      dragSequence,
       setListRef,
       scrollToOffset,
       resetDragState,
       config,
+      itemIndexRegistry,
+      updateItemIndex,
+      getItemIndex,
+      dragStartIndexSnapshot,
+      snapshotRegistryForDrag,
     ],
   );
 

package/src/hooks/drag/useDragAnimatedStyle.ts

@@ -85,25 +85,44 @@ export function useDragAnimatedStyle(
   // Animated style for drag offset with scale and shadow
   const dragAnimatedStyle = useAnimatedStyle(() => {
     const isThisItemDragged = draggedItemId.value === itemId;
-
-    // Keep elevated if: actively dragging OR has offset (animating back)
-    const shouldBeElevated =
-      isDragging.value ||
-      Math.abs(translateY.value) > DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD;
+    const hasSignificantTranslateY = Math.abs(translateY.value) > DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD;
 
     // Calculate scroll delta for position compensation during autoscroll
     const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
 
-    // Use drag translateY + scroll compensation for dragged item, shiftY for others
-    const yOffset = isThisItemDragged
+    // Determine when to use translateY for positioning:
+    // 1. Actively being dragged (isThisItemDragged && isDragging)
+    // 2. Animating/settling after drop (hasSignificantTranslateY)
+    //
+    // Case 2 handles the FALLBACK scenario where FlashList doesn't re-render
+    // after reorder. The item uses translateY to stay at its new position
+    // until FlashList eventually re-renders and useDropCompensation runs.
+    const shouldUseDragOffset =
+      (isThisItemDragged && isDragging.value) || hasSignificantTranslateY;
+
+    // Use drag translateY + scroll compensation for dragged/settling item,
+    // shiftY for others or for items at rest
+    const yOffset = shouldUseDragOffset
       ? translateY.value + scrollDelta
       : shiftY.value;
 
+    // Only apply visual effects (scale, elevation, zIndex) when ACTIVELY dragging
+    // Not when just settling at new position after drop
+    const isActivelyDragging = isThisItemDragged && isDragging.value;
+
+    // Keep elevated zIndex when actively dragging OR when settling at new position
+    // This prevents the dropped item from appearing behind other items
+    // Note: We use hasSignificantTranslateY alone (not isThisItemDragged) because
+    // after FALLBACK completes, draggedItemId is reset to '' but translateY remains
+    const shouldBeElevated = isActivelyDragging || hasSignificantTranslateY;
+
     return {
       transform: [
         { translateY: yOffset },
-        { scale: isThisItemDragged ? draggedScale.value : 1 },
+        // Only apply drag scale when actively dragging
+        { scale: isActivelyDragging ? draggedScale.value : 1 },
       ],
+      // Elevate zIndex when dragging or settling at new position
       zIndex: shouldBeElevated ? DRAG_THRESHOLDS.ELEVATED_Z_INDEX : 0,
       // Use animated shadow opacity for smooth transitions
       shadowOpacity: animatedShadowOpacity.value,

package/src/hooks/drag/useDragGesture.ts

@@ -1,15 +1,17 @@
-import { useCallback, useRef, useMemo } from 'react';
+import { useCallback, useRef, useMemo, useEffect, useLayoutEffect } from 'react';
 import {
   useSharedValue,
   measure,
   withSpring,
   withTiming,
+  withDelay,
   cancelAnimation,
   Easing,
   interpolate,
 } from 'react-native-reanimated';
 import { Gesture } from 'react-native-gesture-handler';
 import { scheduleOnRN } from 'react-native-worklets';
+import { useRecyclingState } from '@shopify/flash-list';
 import { useDragState } from '../../contexts/DragStateContext';
 import type {
   UseDragGestureConfig,
@@ -71,6 +73,9 @@ export function useDragGesture(
     isDropping,
     scrollToOffset,
     config: dragConfig,
+    itemIndexRegistry,
+    snapshotRegistryForDrag,
+    dragSequence,
   } = useDragState();
 
   // Performance optimization: Track last significant Y position and scroll time
@@ -78,9 +83,37 @@ export function useDragGesture(
   const lastSignificantY = useSharedValue(0);
   const lastScrollTime = useSharedValue(0);
 
+  // Track current index in SharedValue for worklet access
+  // This is critical because FlashList may not re-render items after reorder,
+  // leaving the closure-captured `index` stale
+  const currentIndex = useSharedValue(index);
+
+  // 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 during autoscroll
+  const [prevItemId, setPrevItemId] = useRecyclingState(itemId, [itemId]);
+
+  // Reset translateY and currentIndex when view is recycled
+  // Using useLayoutEffect to run before paint and prevent visual glitches
+  useLayoutEffect(() => {
+    if (prevItemId !== itemId) {
+      // View was recycled - reset local drag state to prevent stale values
+      // from the previous item affecting this item's position
+      cancelAnimation(translateY);
+      translateY.value = 0;
+      isDragging.value = false;
+      currentIndex.value = index;
+      setPrevItemId(itemId);
+    }
+  }, [itemId, prevItemId, setPrevItemId, translateY, isDragging, currentIndex, index]);
+
+  // Sync index to SharedValue in useEffect (not during render per Reanimated docs)
+  useEffect(() => {
+    currentIndex.value = index;
+  }, [index, currentIndex]);
+
   // Store current values in refs for stable gesture callbacks
   const dragContextRef = useRef({
-    index,
     totalItems,
     itemId,
     onReorderByDelta,
@@ -88,7 +121,6 @@ export function useDragGesture(
 
   // Keep ref in sync with current values
   dragContextRef.current = {
-    index,
     totalItems,
     itemId,
     onReorderByDelta,
@@ -98,12 +130,19 @@ export function useDragGesture(
   const handleDragEnd = useCallback(
     (finalTranslateY: number) => {
       const {
-        index: currentIndex,
         totalItems: total,
         itemId: currentItemId,
         onReorderByDelta: reorder,
       } = dragContextRef.current;
 
+      // Use draggedIndex from context, which was set in onStart using the registry
+      // This handles FlashList's recycling where closure-captured index may be stale
+      const currentIndex = draggedIndex.value;
+      if (currentIndex === -1) {
+        // Drag was cancelled or reset
+        return;
+      }
+
       // Use configured itemHeight for consistent position calculations
       const itemHeight = dragConfig.itemHeight;
 
@@ -119,15 +158,79 @@ export function useDragGesture(
         reorder && positionDelta !== 0 && newIndex !== currentIndex;
 
       if (positionChanged) {
-        // Position changes - call reorder, let useDropCompensation handle animation
+        // Position changes - call reorder and animate back
+        // useDropCompensation handles state reset if re-renders happen,
+        // but we also animate here as a fallback since FlashList's virtualization
+        // may not trigger re-renders when data changes.
         isDropping.value = true;
         onHapticFeedback?.('medium');
         reorder(currentItemId, positionDelta);
 
+        // Note: We no longer call applyReorderToRegistry here.
+        // The snapshot-based approach means shift calculations use the frozen
+        // snapshot taken at drag start. After drag ends, React re-renders
+        // will naturally update the registry via updateItemIndex calls.
+
         // Reset currentTranslateY to stop shift calculations for other items
-        // Note: dragStartScrollOffset is NOT reset here to prevent visual jump
-        // It will be reset after the settle animation completes in useDropCompensation
         currentTranslateY.value = 0;
+
+        // Trigger a micro-scroll to force FlashList to refresh its views
+        // This helps FlashList notice the data change and re-render
+        const currentOffset = scrollOffset.value;
+        scheduleOnRN(scrollToOffset, currentOffset + 1, false);
+        // Scroll back after a short delay
+        setTimeout(() => {
+          scrollToOffset(currentOffset, false);
+        }, 16);
+
+        // Fallback: If useDropCompensation doesn't run (no re-render from FlashList),
+        // we need to animate the item to its new position and reset state.
+        //
+        // Since FlashList hasn't re-rendered, the item's base position is still at the
+        // old index. To make it appear at the new index, we calculate the target translateY
+        // that positions the item correctly.
+        //
+        // When FlashList eventually re-renders (on scroll or interaction), useDropCompensation
+        // will see the index change and animate translateY back to 0.
+        cancelAnimation(translateY);
+
+        // Calculate the target translateY to position item at its new index
+        // Since FlashList hasn't updated base position, we need:
+        // targetTranslateY = (newIndex - currentIndex) * itemHeight
+        const targetTranslateY = (newIndex - currentIndex) * itemHeight;
+
+        // Use a delayed animation to give useDropCompensation a chance to run first
+        translateY.value = withDelay(
+          150, // Delay to let React re-render and useDropCompensation run first
+          withTiming(
+            targetTranslateY, // Animate to the new position
+            { duration: 150, easing: Easing.out(Easing.ease) },
+            finished => {
+              'worklet';
+              // Only reset state if still in dropping state (useDropCompensation didn't handle it)
+              if (finished && isDropping.value) {
+                // Reset all drag state - the item is now visually at its new position
+                // via translateY offset. When FlashList re-renders, useDropCompensation
+                // will compensate and animate to 0.
+                globalIsDragging.value = false;
+                isDropping.value = false;
+                draggedIndex.value = -1;
+                draggedItemId.value = '';
+                measuredItemHeight.value = 0;
+                dragStartScrollOffset.value = 0;
+
+                // FlashList doesn't re-render visible items after data changes.
+                // Since useDropCompensation won't run, we need to animate translateY
+                // back to 0 ourselves. This causes a visual "snap" but prevents the
+                // item from being stuck floating forever.
+                translateY.value = withTiming(0, {
+                  duration: 200,
+                  easing: Easing.out(Easing.ease),
+                });
+              }
+            },
+          ),
+        );
       } else {
         // Same position - animate back and reset state
         // Cancel any existing animation before starting the return animation
@@ -176,6 +279,19 @@ export function useDragGesture(
         .enabled(enabled)
         .onStart(() => {
           'worklet';
+          // Reset any pending drop state from previous drag
+          // This is critical: if a new drag starts before the previous drop's
+          // fallback completed, isDropping would still be true, causing shift
+          // calculations to freeze at their previous values
+          if (isDropping.value) {
+            isDropping.value = false;
+          }
+
+          // Increment drag sequence to force all items to recalculate their shifts
+          // This handles the case where items had non-zero shiftY from a previous
+          // drag that didn't complete its animations
+          dragSequence.value = dragSequence.value + 1;
+
           // Measure actual item height for accurate drag calculations
           const measured = measure(containerRef);
           if (measured) {
@@ -186,7 +302,14 @@ export function useDragGesture(
           isDragging.value = true;
           // Global drag state for shift animations
           globalIsDragging.value = true;
-          draggedIndex.value = index;
+          // Use index from the central registry, which is updated on every item render
+          // This handles FlashList's recycling behavior where currentIndex.value might be stale
+          const registryIndex = itemIndexRegistry.value[itemId];
+          const actualIndex =
+            registryIndex !== undefined ? registryIndex : currentIndex.value;
+          draggedIndex.value = actualIndex;
+          // Also update currentIndex to stay in sync
+          currentIndex.value = actualIndex;
           draggedItemId.value = itemId;
           dragStartScrollOffset.value = scrollOffset.value;
           currentTranslateY.value = 0;

package/src/hooks/drag/useDragShift.ts

@@ -1,3 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
 import {
   useSharedValue,
   useDerivedValue,
@@ -6,6 +7,7 @@ import {
   cancelAnimation,
   Easing,
 } from 'react-native-reanimated';
+import { useRecyclingState } from '@shopify/flash-list';
 import { useDragState } from '../../contexts/DragStateContext';
 import { ANIMATION_TIMING, DRAG_THRESHOLDS } from '../../constants';
 import type { UseDragShiftConfig, UseDragShiftResult } from '../../types';
@@ -39,20 +41,54 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
     currentTranslateY,
     scrollOffset,
     dragStartScrollOffset,
-    measuredItemHeight,
     isDropping,
     config: dragConfig,
+    itemIndexRegistry,
+    dragSequence,
   } = useDragState();
 
   // Shift animation SharedValue
   const shiftY = useSharedValue(0);
 
+  // Track current index in SharedValue for worklet access
+  // This is critical because FlashList may not re-render items after reorder,
+  // leaving the closure-captured `index` stale
+  const currentIndex = useSharedValue(index);
+
+  // 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 during autoscroll
+  const [prevItemId, setPrevItemId] = useRecyclingState(itemId, [itemId]);
+
+  // Reset shiftY and update currentIndex immediately when view is recycled
+  // Using useLayoutEffect to run before paint and prevent visual glitches
+  useLayoutEffect(() => {
+    if (prevItemId !== itemId) {
+      // View was recycled - reset shiftY to prevent stale shift values
+      // from the previous item affecting this item's position
+      cancelAnimation(shiftY);
+      shiftY.value = 0;
+      // Update currentIndex immediately for the new item
+      currentIndex.value = index;
+      setPrevItemId(itemId);
+    }
+  }, [itemId, prevItemId, setPrevItemId, shiftY, currentIndex, index]);
+
+  // Sync index to SharedValue in useEffect (not during render per Reanimated docs)
+  useEffect(() => {
+    currentIndex.value = index;
+  }, [index, currentIndex]);
+
   // Calculate target shift using useDerivedValue
   // Note: useDerivedValue automatically tracks SharedValue dependencies on UI thread,
   // so we don't need a manual trigger counter. When any read SharedValue changes,
   // Reanimated will re-execute this derived value.
   const targetShiftY = useDerivedValue(() => {
     'worklet';
+    // Read dragSequence to force recalculation when a new drag starts
+    // This ensures stale shiftY values from previous drags are recalculated
+    const _sequence = dragSequence.value;
+
     // During drop transition, freeze shift values
     if (isDropping.value) {
       return shiftY.value;
@@ -62,6 +98,11 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
     const isDraggingNow = globalIsDragging.value;
     const translateYNow = currentTranslateY.value;
     const currentDraggedItemId = draggedItemId.value;
+    // Use index from the central registry if available, which is updated on every item render
+    // This handles FlashList's recycling behavior where currentIndex.value might be stale
+    const registryIndex = itemIndexRegistry.value[itemId];
+    const myIndex =
+      registryIndex !== undefined ? registryIndex : currentIndex.value;
 
     // If I'm the dragged item, no shift needed
     if (currentDraggedItemId === itemId) return 0;
@@ -75,6 +116,7 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
     // The configured itemHeight (content + margins) provides reliable, predictable behavior.
     const itemHeight = dragConfig.itemHeight;
 
+
     // Calculate effective translateY including scroll delta
     const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
     const effectiveTranslateY = translateYNow + scrollDelta;
@@ -97,36 +139,51 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
     // Items outside [min(dragIdx, hoverIdx), max(dragIdx, hoverIdx)] can bail early
     const minAffectedIndex = Math.min(currentDraggedIndex, hoveredIndex);
     const maxAffectedIndex = Math.max(currentDraggedIndex, hoveredIndex);
-    if (index < minAffectedIndex || index > maxAffectedIndex) {
+    if (myIndex < minAffectedIndex || myIndex > maxAffectedIndex) {
       return 0;
     }
 
     // Moving DOWN: items between original and hovered positions shift UP
     if (hoveredIndex > currentDraggedIndex) {
-      if (index > currentDraggedIndex && index <= hoveredIndex) {
+      if (myIndex > currentDraggedIndex && myIndex <= hoveredIndex) {
         return -itemHeight;
       }
     }
     // Moving UP: items between hovered and original positions shift DOWN
     else if (hoveredIndex < currentDraggedIndex) {
-      if (index < currentDraggedIndex && index >= hoveredIndex) {
+      if (myIndex < currentDraggedIndex && myIndex >= hoveredIndex) {
         return itemHeight;
       }
     }
 
     return 0;
-  }, [index, itemId]);
+  }, [itemId]);
 
-  // Animate shift when target changes
+  // Animate shift when target changes or when a new drag starts
   useAnimatedReaction(
-    () => targetShiftY.value,
-    (target, prev) => {
+    () => ({
+      target: targetShiftY.value,
+      sequence: dragSequence.value,
+    }),
+    (state, prev) => {
       'worklet';
-      if (target !== prev) {
+      const targetChanged = state.target !== prev?.target;
+      const newDragStarted = state.sequence !== prev?.sequence;
+
+      // Animate to target if:
+      // 1. The target changed, OR
+      // 2. A new drag started and we're not already at the target
+      const needsAnimation =
+        targetChanged ||
+        (newDragStarted &&
+          Math.abs(shiftY.value - state.target) >
+            DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD);
+
+      if (needsAnimation) {
         // Cancel any in-flight animation before starting a new one
         // This prevents competing animations and visual glitches
         cancelAnimation(shiftY);
-        shiftY.value = withTiming(target, {
+        shiftY.value = withTiming(state.target, {
           duration: ANIMATION_TIMING.SHIFT_DURATION,
           easing: Easing.out(Easing.ease),
         });

package/src/types/list.ts

@@ -155,6 +155,12 @@ export interface AnimatedFlashListProps<T extends AnimatedListItem>
 
   /** Pagination threshold */
   onEndReachedThreshold?: number;
+
+  /**
+   * Estimated size of each item (deprecated in FlashList v2, but used as default for drag itemHeight)
+   * @deprecated Use config.drag.itemHeight instead
+   */
+  estimatedItemSize?: number;
 }
 
 /**