@souscheflabs/reanimated-flashlist 0.2.7 → 0.3.0

package/lib/contexts/DragStateContext.d.ts

@@ -1,7 +1,7 @@
-import React, { type ReactNode } from 'react';
-import { type SharedValue } from 'react-native-reanimated';
-import type { FlashListRef } from '@shopify/flash-list';
-import type { DragConfig } from '../types';
+import React, { type ReactNode } from "react";
+import { type SharedValue } from "react-native-reanimated";
+import type { FlashListRef } from "@shopify/flash-list";
+import type { DragConfig } from "../types";
 /**
  * Centralized drag state for coordinating animations across list items.
  * All animation values are Reanimated SharedValues for 60fps UI thread performance.
@@ -43,6 +43,8 @@ export interface DragStateContextValue {
     setListRef: (ref: FlashListRef<unknown> | null) => void;
     /** Scroll the list to a specific offset (for autoscroll during drag) */
     scrollToOffset: (offset: number, animated?: boolean) => void;
+    /** Ask FlashList to prepare cells for layout animation on the next render */
+    prepareForLayoutAnimationRender: () => void;
     /** Reset drag state after drop animation completes */
     resetDragState: () => void;
     /** Current drag configuration */
@@ -68,6 +70,16 @@ export interface DragStateContextValue {
      * Call this at the start of a drag operation.
      */
     snapshotRegistryForDrag: () => void;
+    /**
+     * Update registry after reorder to handle FlashList not re-rendering.
+     * 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;
 }
 /**
  * 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,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"}
+{"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;AAE3E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAoB3C;;;;;;;;;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,6EAA6E;IAC7E,+BAA+B,EAAE,MAAM,IAAI,CAAC;IAC5C,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;IACpC;;;OAGG;IACH,sBAAsB,EAAE,CACtB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,KACZ,IAAI,CAAC;IACV;;;OAGG;IACH,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;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,CA+N9D,CAAC"}

package/lib/contexts/DragStateContext.js

@@ -36,7 +36,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DragStateProvider = exports.useDragState = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_reanimated_1 = require("react-native-reanimated");
+const react_native_worklets_1 = require("react-native-worklets");
 const constants_1 = require("../constants");
+/**
+ * Worklet that updates the item index registry on the UI thread.
+ * Using scheduleOnUI ensures the SharedValue modification is immediately
+ * visible to other worklets (like onStart in useDragGesture).
+ */
+const updateRegistryOnUI = (registry, itemId, index) => {
+    "worklet";
+    const existingIndex = registry.value[itemId];
+    if (existingIndex === undefined || existingIndex !== index) {
+        registry.value = { ...registry.value, [itemId]: index };
+    }
+};
 const DragStateContext = (0, react_1.createContext)(null);
 /**
  * Hook to access shared drag state from context.
@@ -45,7 +58,7 @@ const DragStateContext = (0, react_1.createContext)(null);
 const useDragState = () => {
     const context = (0, react_1.useContext)(DragStateContext);
     if (!context) {
-        throw new Error('useDragState must be used within DragStateProvider');
+        throw new Error("useDragState must be used within DragStateProvider");
     }
     return context;
 };
@@ -67,19 +80,19 @@ exports.useDragState = useDragState;
 function validateConfig(config) {
     if (__DEV__) {
         if (config.itemHeight <= 0) {
-            console.warn('[AnimatedFlashList] Invalid itemHeight: must be positive. Got:', config.itemHeight);
+            console.warn("[AnimatedFlashList] Invalid itemHeight: must be positive. Got:", config.itemHeight);
         }
         if (config.longPressDuration <= 0) {
-            console.warn('[AnimatedFlashList] Invalid longPressDuration: must be positive. Got:', config.longPressDuration);
+            console.warn("[AnimatedFlashList] Invalid longPressDuration: must be positive. Got:", config.longPressDuration);
         }
         if (config.dragScale <= 0) {
-            console.warn('[AnimatedFlashList] Invalid dragScale: must be positive. Got:', config.dragScale);
+            console.warn("[AnimatedFlashList] Invalid dragScale: must be positive. Got:", config.dragScale);
         }
         if (config.edgeThreshold < 0) {
-            console.warn('[AnimatedFlashList] Invalid edgeThreshold: must be non-negative. Got:', config.edgeThreshold);
+            console.warn("[AnimatedFlashList] Invalid edgeThreshold: must be non-negative. Got:", config.edgeThreshold);
         }
         if (config.maxScrollSpeed <= 0) {
-            console.warn('[AnimatedFlashList] Invalid maxScrollSpeed: must be positive. Got:', config.maxScrollSpeed);
+            console.warn("[AnimatedFlashList] Invalid maxScrollSpeed: must be positive. Got:", config.maxScrollSpeed);
         }
     }
 }
@@ -93,7 +106,7 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     // Shared values are created once and persist for the lifetime of the provider
     const isDragging = (0, react_native_reanimated_1.useSharedValue)(false);
     const draggedIndex = (0, react_native_reanimated_1.useSharedValue)(-1);
-    const draggedItemId = (0, react_native_reanimated_1.useSharedValue)('');
+    const draggedItemId = (0, react_native_reanimated_1.useSharedValue)("");
     const currentTranslateY = (0, react_native_reanimated_1.useSharedValue)(0);
     const draggedScale = (0, react_native_reanimated_1.useSharedValue)(1);
     // Scroll state for viewport-aware calculations and autoscroll
@@ -114,6 +127,8 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     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)({});
+    // 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
@@ -124,17 +139,39 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     const scrollToOffset = (0, react_1.useCallback)((offset, animated = false) => {
         listRef.current?.scrollToOffset({ offset, animated });
     }, []);
+    // Request FlashList to prepare cells for layout animation on next render
+    const prepareForLayoutAnimationRender = (0, react_1.useCallback)(() => {
+        listRef.current?.prepareForLayoutAnimationRender?.();
+    }, []);
     // Update an item's index in the registry
-    // Called on every item render to keep indices fresh
+    // 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.
     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,
-            };
+        // 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
+        if (existingIndex === undefined) {
+            (0, react_native_worklets_1.scheduleOnUI)(updateRegistryOnUI, itemIndexRegistry, itemId, index);
+            return;
+        }
+        // Skip update if within protection window (onEnd just updated the registry)
+        // This prevents stale React props from overwriting correct indices
+        if (isProtected) {
+            return;
+        }
+        // Outside protection window, update if value changed - schedule on UI thread
+        if (existingIndex !== index) {
+            (0, react_native_worklets_1.scheduleOnUI)(updateRegistryOnUI, itemIndexRegistry, itemId, index);
         }
     }, [itemIndexRegistry]);
+    // Mark registry as recently updated (call this from handleDragEnd)
+    const markRegistryUpdated = (0, react_1.useCallback)(() => {
+        registryUpdateTimestamp.current = Date.now();
+    }, []);
     // Get an item's index from the registry
     const getItemIndex = (0, react_1.useCallback)((itemId) => {
         return itemIndexRegistry.value[itemId];
@@ -145,11 +182,39 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     const snapshotRegistryForDrag = (0, react_1.useCallback)(() => {
         dragStartIndexSnapshot.value = { ...itemIndexRegistry.value };
     }, [dragStartIndexSnapshot, itemIndexRegistry]);
+    // Update registry after reorder to handle FlashList not re-rendering
+    const applyReorderToRegistry = (0, react_1.useCallback)((fromId, fromIndex, toIndex) => {
+        const registry = itemIndexRegistry.value;
+        const newRegistry = { ...registry };
+        if (toIndex > fromIndex) {
+            // Moving down: items between from and to shift UP (index decreases)
+            for (const [id, idx] of Object.entries(registry)) {
+                if (idx > fromIndex && idx <= toIndex) {
+                    newRegistry[id] = idx - 1;
+                }
+            }
+        }
+        else if (toIndex < fromIndex) {
+            // Moving up: items between to and from shift DOWN (index increases)
+            for (const [id, idx] of Object.entries(registry)) {
+                if (idx >= toIndex && idx < fromIndex) {
+                    newRegistry[id] = idx + 1;
+                }
+            }
+        }
+        newRegistry[fromId] = toIndex;
+        itemIndexRegistry.value = newRegistry;
+    }, [itemIndexRegistry]);
     // Reset drag state after drop
+    // Note: We intentionally do NOT clear itemIndexRegistry here.
+    // The registry persists across drags and is updated by:
+    // 1. applyReorderToRegistry() in useDragGesture.onEnd after each reorder
+    // 2. updateItemIndex() when items render
+    // Clearing it would cause subsequent drags to fall back to stale React props.
     const resetDragState = (0, react_1.useCallback)(() => {
         isDragging.value = false;
         draggedIndex.value = -1;
-        draggedItemId.value = '';
+        draggedItemId.value = "";
         currentTranslateY.value = 0;
         draggedScale.value = 1;
         dragStartScrollOffset.value = 0;
@@ -174,6 +239,7 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         dragSequence,
         setListRef,
         scrollToOffset,
+        prepareForLayoutAnimationRender,
         resetDragState,
         config,
         itemIndexRegistry,
@@ -181,6 +247,8 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         getItemIndex,
         dragStartIndexSnapshot,
         snapshotRegistryForDrag,
+        applyReorderToRegistry,
+        markRegistryUpdated,
     }), [
         isDragging,
         draggedIndex,
@@ -204,6 +272,8 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         getItemIndex,
         dragStartIndexSnapshot,
         snapshotRegistryForDrag,
+        applyReorderToRegistry,
+        markRegistryUpdated,
     ]);
     return (<DragStateContext.Provider value={value}>
       {children}

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

@@ -1,5 +1,5 @@
-import type { SharedValue } from 'react-native-reanimated';
-import type { UseDragAnimatedStyleResult } from '../../types';
+import type { SharedValue } from "react-native-reanimated";
+import type { UseDragAnimatedStyleResult } from "../../types";
 /**
  * Hook that creates animated styles for drag operations.
  *

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

package/lib/hooks/drag/useDragAnimatedStyle.js

@@ -35,7 +35,7 @@ const constants_1 = require("../../constants");
  */
 function useDragAnimatedStyle(itemId, isDragging, translateY, shiftY) {
     // Global drag state for scale, identity check, and scroll compensation
-    const { draggedItemId, draggedScale, config, scrollOffset, dragStartScrollOffset } = (0, DragStateContext_1.useDragState)();
+    const { draggedItemId, draggedScale, config, scrollOffset, dragStartScrollOffset, } = (0, DragStateContext_1.useDragState)();
     // Issue 2 Fix: Track shadow opacity with smooth transitions to prevent "flash"
     // When drag ends, shadow opacity should fade smoothly instead of snapping
     const animatedShadowOpacity = (0, react_native_reanimated_1.useSharedValue)(0.1);
@@ -44,7 +44,7 @@ function useDragAnimatedStyle(itemId, isDragging, translateY, shiftY) {
         isThisItemDragged: draggedItemId.value === itemId,
         scale: draggedScale.value,
     }), (current, previous) => {
-        'worklet';
+        "worklet";
         if (current.isThisItemDragged) {
             // When dragged, interpolate shadow opacity based on scale
             const targetOpacity = (0, react_native_reanimated_1.interpolate)(current.scale, [1, config.dragScale], [0.1, config.dragShadowOpacity]);
@@ -67,14 +67,9 @@ function useDragAnimatedStyle(itemId, isDragging, translateY, shiftY) {
         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;
-        // 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 translateY only while actively dragging. Once drop begins we rely on
+        // the new base layout (shiftY/FlashList) to avoid any post-drop bounce.
+        const shouldUseDragOffset = isThisItemDragged && isDragging.value;
         // Use drag translateY + scroll compensation for dragged/settling item,
         // shiftY for others or for items at rest
         const yOffset = shouldUseDragOffset
@@ -83,11 +78,8 @@ function useDragAnimatedStyle(itemId, isDragging, translateY, shiftY) {
         // 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;
+        // Keep elevated zIndex only while actively dragging
+        const shouldBeElevated = isActivelyDragging;
         return {
             transform: [
                 { translateY: yOffset },

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

@@ -1,4 +1,4 @@
-import type { UseDragGestureConfig, UseDragGestureCallbacks, UseDragGestureResult } from '../../types';
+import type { UseDragGestureConfig, UseDragGestureCallbacks, UseDragGestureResult } from "../../types";
 /**
  * Hook that encapsulates all drag gesture logic.
  *

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":"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"}
+{"version":3,"file":"useDragGesture.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragGesture.ts"],"names":[],"mappings":"AAqBA,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,CA2atB"}

package/lib/hooks/drag/useDragGesture.js

@@ -41,7 +41,7 @@ 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, itemIndexRegistry, snapshotRegistryForDrag, dragSequence, } = (0, DragStateContext_1.useDragState)();
+    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, currentTranslateY, draggedScale, scrollOffset, dragStartScrollOffset, contentHeight, visibleHeight, listTopY, measuredItemHeight, isDropping, scrollToOffset, prepareForLayoutAnimationRender, config: dragConfig, itemIndexRegistry, dragStartIndexSnapshot, dragSequence, markRegistryUpdated, } = (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);
@@ -66,7 +66,15 @@ function useDragGesture(config, callbacks) {
             currentIndex.value = index;
             setPrevItemId(itemId);
         }
-    }, [itemId, prevItemId, setPrevItemId, translateY, isDragging, currentIndex, index]);
+    }, [
+        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;
@@ -93,8 +101,11 @@ function useDragGesture(config, callbacks) {
             // Drag was cancelled or reset
             return;
         }
-        // Use configured itemHeight for consistent position calculations
-        const itemHeight = dragConfig.itemHeight;
+        // Use measured item height for accurate position calculations
+        // Fall back to config height if measurement failed or not yet available
+        const itemHeight = measuredItemHeight.value > 0
+            ? measuredItemHeight.value
+            : dragConfig.itemHeight;
         // Calculate how many positions to move based on drag offset
         const positionDelta = Math.round(finalTranslateY / itemHeight);
         // Calculate if position actually changes
@@ -106,73 +117,47 @@ function useDragGesture(config, callbacks) {
             // 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');
+            onHapticFeedback?.("medium");
+            // Ask FlashList to prepare cells for layout animation on next render
+            prepareForLayoutAnimationRender();
             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.
+            // Mark registry as recently updated to protect against stale React prop overwrites
+            // The onEnd callback already updated the registry on the UI thread - this timestamp
+            // prevents items re-rendering with stale indices from corrupting those updates.
+            markRegistryUpdated();
+            // Note: Registry is now updated in onEnd on UI thread to prevent race conditions
+            // where a new drag starts before this JS callback runs.
             // Reset currentTranslateY to stop shift calculations for other items
+            // This triggers all shifted items to animate their shiftY back to 0
             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),
-                    });
-                }
-            }));
+            // CRITICAL: Store the current translateY value before any animations start
+            // This represents where the item visually is at the moment of drop
+            const dropTranslateY = translateY.value;
+            // Freeze the visual position at the drop point; do not animate toward 0 here
+            // because FlashList has not yet updated base layouts. Animating now would
+            // create a visible bounce (the issue you are seeing).
+            translateY.value = dropTranslateY;
+            console.log("[DROP] Captured translateY at drop:", {
+                dropTranslateY,
+                currentIndex,
+                newIndex,
+            });
         }
         else {
             // Same position - animate back and reset state
+            // Capture current sequence to guard callback against race conditions
+            const currentSequence = dragSequence.value;
             // Cancel any existing animation before starting the return animation
             (0, react_native_reanimated_1.cancelAnimation)(translateY);
-            translateY.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 150, easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease) }, finished => {
-                'worklet';
+            translateY.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 150, easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease) }, (finished) => {
+                "worklet";
+                // Guard: Only reset if this is still the same drag operation
+                if (dragSequence.value !== currentSequence)
+                    return;
                 if (finished) {
                     globalIsDragging.value = false;
                     draggedIndex.value = -1;
-                    draggedItemId.value = '';
+                    draggedItemId.value = "";
                     currentTranslateY.value = 0;
                     dragStartScrollOffset.value = 0;
                     measuredItemHeight.value = 0;
@@ -190,17 +175,19 @@ function useDragGesture(config, callbacks) {
         dragStartScrollOffset,
         isDropping,
         onHapticFeedback,
+        dragSequence,
+        markRegistryUpdated,
     ]);
     // Stable haptic callback for drag start
     const triggerLightHaptic = (0, react_1.useCallback)(() => {
-        onHapticFeedback?.('light');
+        onHapticFeedback?.("light");
     }, [onHapticFeedback]);
     // Pan gesture for drag-to-reorder
     const panGesture = (0, react_1.useMemo)(() => react_native_gesture_handler_1.Gesture.Pan()
         .activateAfterLongPress(dragConfig.longPressDuration)
         .enabled(enabled)
         .onStart(() => {
-        'worklet';
+        "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
@@ -208,6 +195,17 @@ function useDragGesture(config, callbacks) {
         if (isDropping.value) {
             isDropping.value = false;
         }
+        // Cancel any in-flight animations from previous drag to prevent
+        // their callbacks from corrupting our state
+        (0, react_native_reanimated_1.cancelAnimation)(translateY);
+        (0, react_native_reanimated_1.cancelAnimation)(draggedScale);
+        // Reset translateY to prevent inheriting values from previous drag
+        // This is critical when the same item is dragged consecutively or
+        // when FlashList recycled a view that had a non-zero translateY
+        translateY.value = 0;
+        // Take snapshot SYNCHRONOUSLY in worklet for consistent index lookup
+        // This must happen before any shift calculations read the snapshot
+        dragStartIndexSnapshot.value = { ...itemIndexRegistry.value };
         // 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
@@ -240,8 +238,8 @@ function useDragGesture(config, callbacks) {
         });
         (0, react_native_worklets_1.scheduleOnRN)(triggerLightHaptic);
     })
-        .onUpdate(event => {
-        'worklet';
+        .onUpdate((event) => {
+        "worklet";
         // Always update translateY for smooth visual feedback
         translateY.value = event.translationY;
         // Performance optimization: Only update currentTranslateY (which triggers
@@ -261,7 +259,7 @@ function useDragGesture(config, callbacks) {
         const topEdge = dragConfig.edgeThreshold;
         const bottomEdge = visibleHeight.value - dragConfig.edgeThreshold;
         if (fingerInList < topEdge && scrollOffset.value > 0) {
-            const speed = (0, react_native_reanimated_1.interpolate)(fingerInList, [0, topEdge], [dragConfig.maxScrollSpeed, 0], 'clamp');
+            const speed = (0, react_native_reanimated_1.interpolate)(fingerInList, [0, topEdge], [dragConfig.maxScrollSpeed, 0], "clamp");
             const newOffset = Math.max(0, scrollOffset.value - speed);
             scrollOffset.value = newOffset;
             // Throttle actual scroll calls to reduce JS thread pressure
@@ -273,7 +271,7 @@ function useDragGesture(config, callbacks) {
         else if (fingerInList > bottomEdge) {
             const maxOffset = Math.max(0, contentHeight.value - visibleHeight.value);
             if (scrollOffset.value < maxOffset) {
-                const speed = (0, react_native_reanimated_1.interpolate)(fingerInList, [bottomEdge, visibleHeight.value], [0, dragConfig.maxScrollSpeed], 'clamp');
+                const speed = (0, react_native_reanimated_1.interpolate)(fingerInList, [bottomEdge, visibleHeight.value], [0, dragConfig.maxScrollSpeed], "clamp");
                 const newOffset = Math.min(maxOffset, scrollOffset.value + speed);
                 scrollOffset.value = newOffset;
                 // Throttle actual scroll calls to reduce JS thread pressure
@@ -284,24 +282,72 @@ function useDragGesture(config, callbacks) {
             }
         }
     })
-        .onEnd(event => {
-        'worklet';
+        .onEnd((event) => {
+        "worklet";
         isDragging.value = false;
         // Include scroll compensation in final position calculation
         const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
         const finalY = event.translationY + scrollDelta;
         draggedScale.value = (0, react_native_reanimated_1.withSpring)(1, { damping: 15, stiffness: 400 });
+        // CRITICAL: Update registry on UI thread BEFORE scheduling JS callback
+        // This prevents race conditions where a new drag starts before handleDragEnd
+        // runs on the JS thread, which would cause the new drag's snapshot to have
+        // stale indices.
+        const currentIdx = draggedIndex.value;
+        const total = dragContextRef.current.totalItems;
+        // Use measured item height for accurate position calculations
+        // Fall back to config height if measurement failed or not yet available
+        const itemHeight = measuredItemHeight.value > 0
+            ? measuredItemHeight.value
+            : dragConfig.itemHeight;
+        const positionDelta = Math.round(finalY / itemHeight);
+        const newIdx = Math.max(0, Math.min(total - 1, currentIdx + positionDelta));
+        if (positionDelta !== 0 && newIdx !== currentIdx) {
+            // Mark drop phase immediately on UI thread to prevent non-dragged items
+            // from briefly animating back to 0 before the JS drop handler runs.
+            isDropping.value = true;
+            // Update registry directly on UI thread
+            const registry = itemIndexRegistry.value;
+            const newRegistry = {};
+            // Copy existing entries and adjust indices
+            for (const id of Object.keys(registry)) {
+                const idx = registry[id];
+                if (idx === undefined)
+                    continue;
+                if (newIdx > currentIdx) {
+                    // Moving down: items between currentIdx and newIdx shift UP
+                    if (idx > currentIdx && idx <= newIdx) {
+                        newRegistry[id] = idx - 1;
+                    }
+                    else {
+                        newRegistry[id] = idx;
+                    }
+                }
+                else {
+                    // Moving up: items between newIdx and currentIdx shift DOWN
+                    if (idx >= newIdx && idx < currentIdx) {
+                        newRegistry[id] = idx + 1;
+                    }
+                    else {
+                        newRegistry[id] = idx;
+                    }
+                }
+            }
+            // Set the dragged item's new index
+            newRegistry[draggedItemId.value] = newIdx;
+            itemIndexRegistry.value = newRegistry;
+        }
         (0, react_native_worklets_1.scheduleOnRN)(handleDragEnd, finalY);
     })
         .onFinalize((_event, success) => {
-        'worklet';
+        "worklet";
         if (!success) {
             isDragging.value = false;
             translateY.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 150 });
             isDropping.value = false;
             globalIsDragging.value = false;
             draggedIndex.value = -1;
-            draggedItemId.value = '';
+            draggedItemId.value = "";
             currentTranslateY.value = 0;
             draggedScale.value = 1;
             dragStartScrollOffset.value = 0;
@@ -309,6 +355,15 @@ function useDragGesture(config, callbacks) {
         }
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [enabled, containerRef, triggerLightHaptic, handleDragEnd, index, itemId]);
+    [
+        enabled,
+        containerRef,
+        triggerLightHaptic,
+        handleDragEnd,
+        index,
+        itemId,
+        dragStartIndexSnapshot,
+        itemIndexRegistry,
+    ]);
     return { panGesture, isDragging, translateY };
 }

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

@@ -1,4 +1,4 @@
-import type { UseDragShiftConfig, UseDragShiftResult } from '../../types';
+import type { UseDragShiftConfig, UseDragShiftResult } from "../../types";
 /**
  * Hook that calculates shift animation for non-dragged items.
  *

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":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE1E;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,kBAAkB,CAkK3E"}
+{"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,CAmP3E"}