@souscheflabs/reanimated-flashlist 0.2.8 → 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 */

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;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,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,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrF;;;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,CAyN9D,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

@@ -44,7 +44,7 @@ const constants_1 = require("../constants");
  * visible to other worklets (like onStart in useDragGesture).
  */
 const updateRegistryOnUI = (registry, itemId, index) => {
-    'worklet';
+    "worklet";
     const existingIndex = registry.value[itemId];
     if (existingIndex === undefined || existingIndex !== index) {
         registry.value = { ...registry.value, [itemId]: index };
@@ -58,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;
 };
@@ -80,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);
         }
     }
 }
@@ -106,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
@@ -139,6 +139,10 @@ 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
     // Uses scheduleOnUI to ensure SharedValue modifications are immediately visible
     // to UI thread worklets (fixing the registry sync bug).
@@ -210,7 +214,7 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     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;
@@ -235,6 +239,7 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         dragSequence,
         setListRef,
         scrollToOffset,
+        prepareForLayoutAnimationRender,
         resetDragState,
         config,
         itemIndexRegistry,

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,CA4F5B"}
+{"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, isDropping } = (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,20 +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. Actively settling after drop (isSettling)
-        //
-        // 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.
-        //
-        // CRITICAL: We use isSettling (isDropping && draggedItemId matches) instead
-        // of hasSignificantTranslateY. This ensures only the CURRENT dropping item
-        // uses its translateY. Other items with stale translateY from interrupted
-        // animations won't incorrectly apply their values with a new drag's scrollDelta.
-        const isSettling = isDropping.value && draggedItemId.value === itemId;
-        const shouldUseDragOffset = (isThisItemDragged && isDragging.value) || isSettling;
+        // 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
@@ -89,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,CA8ctB"}
+{"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, dragStartIndexSnapshot, dragSequence, markRegistryUpdated, } = (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;
@@ -109,7 +117,9 @@ 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);
             // 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
@@ -118,71 +128,20 @@ function useDragGesture(config, callbacks) {
             // 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;
-            // Capture current sequence to guard callbacks against race conditions
-            // If a new drag starts before these animations complete, the sequence
-            // will have incremented and we should skip the state reset
-            const currentSequence = dragSequence.value;
-            // 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';
-                // Guard: Only proceed if this is still the same drag operation
-                if (dragSequence.value !== currentSequence)
-                    return;
-                // Only reset state if still in dropping state (useDropCompensation didn't handle it)
-                if (finished && isDropping.value) {
-                    // FlashList doesn't re-render visible items after data changes.
-                    // Since useDropCompensation won't run, we need to animate translateY
-                    // back to 0 ourselves.
-                    //
-                    // CRITICAL: Do NOT reset state here! We must wait until translateY
-                    // finishes animating to 0. Otherwise, if a new drag starts during
-                    // this 200ms animation, the item will have stale translateY values
-                    // that get applied incorrectly with the new drag's scroll delta.
-                    translateY.value = (0, react_native_reanimated_1.withTiming)(0, {
-                        duration: 200,
-                        easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
-                    }, settleFinished => {
-                        'worklet';
-                        // Guard: Check sequence again before resetting state
-                        if (dragSequence.value !== currentSequence)
-                            return;
-                        if (settleFinished) {
-                            // NOW reset all state - after translateY is fully 0
-                            globalIsDragging.value = false;
-                            isDropping.value = false;
-                            draggedIndex.value = -1;
-                            draggedItemId.value = '';
-                            measuredItemHeight.value = 0;
-                            dragStartScrollOffset.value = 0;
-                        }
-                    });
-                }
-            }));
+            // 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
@@ -190,15 +149,15 @@ function useDragGesture(config, callbacks) {
             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;
@@ -221,14 +180,14 @@ function useDragGesture(config, callbacks) {
     ]);
     // 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
@@ -279,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
@@ -300,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
@@ -312,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
@@ -323,8 +282,8 @@ 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;
@@ -344,6 +303,9 @@ function useDragGesture(config, callbacks) {
         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 = {};
@@ -378,14 +340,14 @@ function useDragGesture(config, callbacks) {
         (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;
@@ -393,6 +355,15 @@ function useDragGesture(config, callbacks) {
         }
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [enabled, containerRef, triggerLightHaptic, handleDragEnd, index, itemId, dragStartIndexSnapshot, itemIndexRegistry]);
+    [
+        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,CAqO3E"}
+{"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"}

package/lib/hooks/drag/useDragShift.js

@@ -60,7 +60,7 @@ function useDragShift(config) {
     // 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';
+        "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;
@@ -85,10 +85,9 @@ function useDragShift(config) {
         // Dragged item doesn't need shift (it uses translateY)
         if (currentDraggedItemId === itemId)
             return 0;
-        // During drop: return frozen shiftY.value to preserve visual spacing
-        // Let useDropCompensation handle the reset when FlashList re-renders with correct indices
+        // During drop: force shift to 0 to avoid any extra wobble when FlashList re-renders
         if (isDropping.value) {
-            return shiftY.value;
+            return 0;
         }
         // Not dragging: return 0 (no shift needed)
         // IMPORTANT: We previously returned flashListMismatch here, but that caused permanent
@@ -149,7 +148,7 @@ function useDragShift(config) {
         target: targetShiftY.value,
         sequence: dragSequence.value,
     }), (state, prev) => {
-        'worklet';
+        "worklet";
         const targetChanged = state.target !== prev?.target;
         const newDragStarted = prev !== null && state.sequence !== prev.sequence;
         // Cancel any in-flight animation when new drag starts and reset to clean baseline
@@ -176,6 +175,20 @@ function useDragShift(config) {
             });
         }
     });
+    // Freeze any in-flight shift animation as soon as drop starts to prevent
+    // a “double slide” while isDropping holds the visual spacing.
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => isDropping.value, (dropping, prev) => {
+        "worklet";
+        if (dropping && !prev) {
+            (0, react_native_reanimated_1.cancelAnimation)(shiftY);
+            shiftY.value = 0;
+        }
+        // When drop finishes, snap shiftY to 0 (no animation) to avoid a final wobble
+        if (!dropping && prev) {
+            (0, react_native_reanimated_1.cancelAnimation)(shiftY);
+            shiftY.value = 0;
+        }
+    });
     // CRITICAL: Explicit reset when drag ends (both isDragging and isDropping are false)
     // This serves as a safeguard against race conditions where the target-based animation
     // above doesn't fire properly. When drag fully completes, all items should have shiftY = 0.
@@ -183,21 +196,17 @@ function useDragShift(config) {
         isDragging: globalIsDragging.value,
         isDropping: isDropping.value,
     }), (current, prev) => {
-        'worklet';
+        "worklet";
         if (prev === null)
             return;
         // Detect when drag fully ends: was dragging/dropping, now neither
         const wasActive = prev.isDragging || prev.isDropping;
         const isNowIdle = !current.isDragging && !current.isDropping;
         if (wasActive && isNowIdle) {
-            // Force reset shiftY to 0 when drag fully completes
-            // This catches any items that didn't get reset through the normal target animation
+            // Force reset shiftY to 0 when drag fully completes (snap, no animation)
             if (Math.abs(shiftY.value) > constants_1.DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD) {
                 (0, react_native_reanimated_1.cancelAnimation)(shiftY);
-                shiftY.value = (0, react_native_reanimated_1.withTiming)(0, {
-                    duration: constants_1.ANIMATION_TIMING.SHIFT_DURATION,
-                    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
-                });
+                shiftY.value = 0;
             }
         }
     });

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

@@ -1,4 +1,4 @@
-import type { UseDropCompensationConfig } from '../../types';
+import type { UseDropCompensationConfig } from "../../types";
 /**
  * Hook that handles index change compensation after drag reorder.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"useDropCompensation.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDropCompensation.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,yBAAyB,GAAG,IAAI,CA8I3E"}
+{"version":3,"file":"useDropCompensation.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDropCompensation.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,yBAAyB,GAAG,IAAI,CAgK3E"}