@souscheflabs/reanimated-flashlist 0.2.0 → 0.2.3

package/lib/contexts/DragStateContext.d.ts

@@ -33,8 +33,6 @@ export interface DragStateContextValue {
     visibleHeight: SharedValue<number>;
     /** Y position of FlashList top on screen (for autoscroll coordinate conversion) */
     listTopY: SharedValue<number>;
-    /** Counter incremented on every drag state change to force useDerivedValue re-evaluation */
-    dragUpdateTrigger: SharedValue<number>;
     /** Measured height of the dragged item (for dynamic height calculations) */
     measuredItemHeight: SharedValue<number>;
     /** Flag to freeze shift values during drop transition */

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,4FAA4F;IAC5F,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,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,CA2G9D,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,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"}

package/lib/contexts/DragStateContext.js

@@ -102,8 +102,6 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
     const contentHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     const visibleHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     const listTopY = (0, react_native_reanimated_1.useSharedValue)(0);
-    // Counter to force useDerivedValue re-evaluation on every drag state change
-    const dragUpdateTrigger = (0, react_native_reanimated_1.useSharedValue)(0);
     // Measured height of dragged item (0 = use fallback from config)
     const measuredItemHeight = (0, react_native_reanimated_1.useSharedValue)(0);
     // Flag to freeze shift values during drop transition
@@ -142,7 +140,6 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         contentHeight,
         visibleHeight,
         listTopY,
-        dragUpdateTrigger,
         measuredItemHeight,
         isDropping,
         setListRef,
@@ -160,7 +157,6 @@ const DragStateProvider = ({ children, config: configOverrides, }) => {
         contentHeight,
         visibleHeight,
         listTopY,
-        dragUpdateTrigger,
         measuredItemHeight,
         isDropping,
         setListRef,

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

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

package/lib/hooks/animations/useListExitAnimation.js

@@ -126,6 +126,8 @@ const useListExitAnimation = (itemId, config) => {
         // Set animation config SharedValues BEFORE starting animation
         slideDistance.value = animConfig.slide.distance;
         scaleToValue.value = animConfig.scale.toValue;
+        // Cancel any existing animation before starting the exit animation
+        (0, react_native_reanimated_1.cancelAnimation)(exitDirection);
         // Animate exitDirection.value from 0 to 1 (or -1)
         exitDirection.value = (0, react_native_reanimated_1.withTiming)(direction, { duration: animConfig.slide.duration, easing: animations_1.standardEasing }, finished => {
             'worklet';

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":"AAYA,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,CA0NtB"}
+{"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,CAuPtB"}

package/lib/hooks/drag/useDragGesture.js

@@ -40,7 +40,11 @@ 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, dragUpdateTrigger, 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, } = (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);
     // Store current values in refs for stable gesture callbacks
     const dragContextRef = (0, react_1.useRef)({
         index,
@@ -78,6 +82,8 @@ function useDragGesture(config, callbacks) {
         }
         else {
             // Same position - animate back and reset state
+            // 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';
                 if (finished) {
@@ -87,7 +93,6 @@ function useDragGesture(config, callbacks) {
                     currentTranslateY.value = 0;
                     dragStartScrollOffset.value = 0;
                     measuredItemHeight.value = 0;
-                    dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
                 }
             });
         }
@@ -100,7 +105,6 @@ function useDragGesture(config, callbacks) {
         draggedItemId,
         currentTranslateY,
         dragStartScrollOffset,
-        dragUpdateTrigger,
         isDropping,
         onHapticFeedback,
     ]);
@@ -127,19 +131,32 @@ function useDragGesture(config, callbacks) {
         draggedItemId.value = itemId;
         dragStartScrollOffset.value = scrollOffset.value;
         currentTranslateY.value = 0;
+        // Reset performance tracking values
+        lastSignificantY.value = 0;
+        lastScrollTime.value = Date.now();
         draggedScale.value = (0, react_native_reanimated_1.withSpring)(dragConfig.dragScale, {
             damping: 15,
             stiffness: 400,
         });
-        dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
         (0, react_native_worklets_1.scheduleOnRN)(triggerLightHaptic);
     })
         .onUpdate(event => {
         'worklet';
+        // Always update translateY for smooth visual feedback
         translateY.value = event.translationY;
-        currentTranslateY.value = event.translationY;
-        dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
+        // Performance optimization: Only update currentTranslateY (which triggers
+        // shift calculations in other items) when movement is significant (>5px)
+        const POSITION_THRESHOLD = 5;
+        const deltaFromLast = Math.abs(event.translationY - lastSignificantY.value);
+        if (deltaFromLast >= POSITION_THRESHOLD) {
+            currentTranslateY.value = event.translationY;
+            lastSignificantY.value = event.translationY;
+        }
         // Autoscroll when dragging near edges
+        // Performance optimization: Throttle to ~30fps (33ms interval)
+        const SCROLL_THROTTLE_MS = 33;
+        const now = Date.now();
+        const timeSinceLastScroll = now - lastScrollTime.value;
         const fingerInList = event.absoluteY - listTopY.value;
         const topEdge = dragConfig.edgeThreshold;
         const bottomEdge = visibleHeight.value - dragConfig.edgeThreshold;
@@ -147,7 +164,11 @@ function useDragGesture(config, callbacks) {
             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;
-            (0, react_native_worklets_1.scheduleOnRN)(scrollToOffset, newOffset);
+            // Throttle actual scroll calls to reduce JS thread pressure
+            if (timeSinceLastScroll >= SCROLL_THROTTLE_MS) {
+                lastScrollTime.value = now;
+                (0, react_native_worklets_1.scheduleOnRN)(scrollToOffset, newOffset);
+            }
         }
         else if (fingerInList > bottomEdge) {
             const maxOffset = Math.max(0, contentHeight.value - visibleHeight.value);
@@ -155,7 +176,11 @@ function useDragGesture(config, callbacks) {
                 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;
-                (0, react_native_worklets_1.scheduleOnRN)(scrollToOffset, newOffset);
+                // Throttle actual scroll calls to reduce JS thread pressure
+                if (timeSinceLastScroll >= SCROLL_THROTTLE_MS) {
+                    lastScrollTime.value = now;
+                    (0, react_native_worklets_1.scheduleOnRN)(scrollToOffset, newOffset);
+                }
             }
         }
     })

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

package/lib/hooks/drag/useDragShift.js

@@ -25,29 +25,15 @@ 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, dragUpdateTrigger, measuredItemHeight, isDropping, config: dragConfig, } = (0, DragStateContext_1.useDragState)();
+    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, currentTranslateY, scrollOffset, dragStartScrollOffset, measuredItemHeight, isDropping, config: dragConfig, } = (0, DragStateContext_1.useDragState)();
     // Shift animation SharedValue
     const shiftY = (0, react_native_reanimated_1.useSharedValue)(0);
     // 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';
-        /**
-         * FORCE RE-EVALUATION PATTERN:
-         * useDerivedValue only re-runs when its dependencies change. However, with
-         * SharedValues from context, React can't track changes automatically.
-         *
-         * By reading dragUpdateTrigger.value (which is incremented on every drag
-         * state change), we force this derived value to recompute. This pattern
-         * is necessary because:
-         * 1. SharedValue changes don't trigger React re-renders
-         * 2. useDerivedValue caches its result based on tracked values
-         * 3. We need fresh calculations on every drag position update
-         *
-         * The ESLint disable is required because the value appears "unused" but
-         * reading it creates a dependency that Reanimated tracks.
-         */
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        dragUpdateTrigger.value;
         // During drop transition, freeze shift values
         if (isDropping.value) {
             return shiftY.value;
@@ -77,7 +63,16 @@ function useDragShift(config) {
             : effectiveTranslateY < 0
                 ? -constants_1.DRAG_THRESHOLDS.HOVER_OFFSET_FACTOR
                 : 0;
-        const hoveredIndex = currentDraggedIndex + Math.round(effectiveTranslateY / itemHeight + offset);
+        const hoveredIndex = currentDraggedIndex +
+            Math.round(effectiveTranslateY / itemHeight + offset);
+        // Performance optimization: Spatial filtering
+        // Only items in the affected range need to calculate shift
+        // 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) {
+            return 0;
+        }
         // Moving DOWN: items between original and hovered positions shift UP
         if (hoveredIndex > currentDraggedIndex) {
             if (index > currentDraggedIndex && index <= hoveredIndex) {
@@ -96,6 +91,9 @@ function useDragShift(config) {
     (0, react_native_reanimated_1.useAnimatedReaction)(() => targetShiftY.value, (target, prev) => {
         'worklet';
         if (target !== prev) {
+            // 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, {
                 duration: constants_1.ANIMATION_TIMING.SHIFT_DURATION,
                 easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),

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

package/lib/hooks/drag/useDropCompensation.js

@@ -35,7 +35,7 @@ function useDropCompensation(config) {
     // Track index on UI thread for synchronized shift reset
     const indexShared = (0, react_native_reanimated_1.useSharedValue)(index);
     // Global drag state
-    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, measuredItemHeight, isDropping, dragUpdateTrigger, config: dragConfig, } = (0, DragStateContext_1.useDragState)();
+    const { isDragging: globalIsDragging, draggedIndex, draggedItemId, measuredItemHeight, isDropping, config: dragConfig, } = (0, DragStateContext_1.useDragState)();
     // Use FlashList's useRecyclingState for automatic reset on view recycling
     const [prevIndex, setPrevIndex] = (0, flash_list_1.useRecyclingState)(index, [itemId]);
     // Handle index changes after data updates (drop compensation)
@@ -74,9 +74,6 @@ function useDropCompensation(config) {
                         draggedIndex.value = -1;
                         draggedItemId.value = '';
                         measuredItemHeight.value = 0;
-                        // Issue 5 Fix: Use direct assignment instead of withTiming for counter
-                        // withTiming on a counter can cause timing issues and potential double-increment
-                        dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
                     }
                 });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@souscheflabs/reanimated-flashlist",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "A high-performance animated FlashList with drag-to-reorder and entry/exit animations (New Architecture)",
   "main": "lib/index.js",
   "module": "lib/index.js",

package/src/contexts/DragStateContext.tsx

@@ -42,8 +42,6 @@ export interface DragStateContextValue {
   visibleHeight: SharedValue<number>;
   /** Y position of FlashList top on screen (for autoscroll coordinate conversion) */
   listTopY: SharedValue<number>;
-  /** Counter incremented on every drag state change to force useDerivedValue re-evaluation */
-  dragUpdateTrigger: SharedValue<number>;
   /** Measured height of the dragged item (for dynamic height calculations) */
   measuredItemHeight: SharedValue<number>;
   /** Flag to freeze shift values during drop transition */
@@ -152,9 +150,6 @@ export const DragStateProvider: React.FC<DragStateProviderProps> = ({
   const visibleHeight = useSharedValue(0);
   const listTopY = useSharedValue(0);
 
-  // Counter to force useDerivedValue re-evaluation on every drag state change
-  const dragUpdateTrigger = useSharedValue(0);
-
   // Measured height of dragged item (0 = use fallback from config)
   const measuredItemHeight = useSharedValue(0);
 
@@ -200,7 +195,6 @@ export const DragStateProvider: React.FC<DragStateProviderProps> = ({
       contentHeight,
       visibleHeight,
       listTopY,
-      dragUpdateTrigger,
       measuredItemHeight,
       isDropping,
       setListRef,
@@ -219,7 +213,6 @@ export const DragStateProvider: React.FC<DragStateProviderProps> = ({
       contentHeight,
       visibleHeight,
       listTopY,
-      dragUpdateTrigger,
       measuredItemHeight,
       isDropping,
       setListRef,

package/src/hooks/animations/useListExitAnimation.ts

@@ -3,6 +3,7 @@ import {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
+  cancelAnimation,
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import {
@@ -171,6 +172,9 @@ export const useListExitAnimation = (
       slideDistance.value = animConfig.slide.distance;
       scaleToValue.value = animConfig.scale.toValue;
 
+      // Cancel any existing animation before starting the exit animation
+      cancelAnimation(exitDirection);
+
       // Animate exitDirection.value from 0 to 1 (or -1)
       exitDirection.value = withTiming(
         direction,

package/src/hooks/drag/useDragGesture.ts

@@ -4,6 +4,7 @@ import {
   measure,
   withSpring,
   withTiming,
+  cancelAnimation,
   Easing,
   interpolate,
 } from 'react-native-reanimated';
@@ -66,13 +67,17 @@ export function useDragGesture(
     contentHeight,
     visibleHeight,
     listTopY,
-    dragUpdateTrigger,
     measuredItemHeight,
     isDropping,
     scrollToOffset,
     config: dragConfig,
   } = useDragState();
 
+  // Performance optimization: Track last significant Y position and scroll time
+  // to avoid updating on every pixel movement
+  const lastSignificantY = useSharedValue(0);
+  const lastScrollTime = useSharedValue(0);
+
   // Store current values in refs for stable gesture callbacks
   const dragContextRef = useRef({
     index,
@@ -127,6 +132,8 @@ export function useDragGesture(
         dragStartScrollOffset.value = 0;
       } else {
         // Same position - animate back and reset state
+        // Cancel any existing animation before starting the return animation
+        cancelAnimation(translateY);
         translateY.value = withTiming(
           0,
           { duration: 150, easing: Easing.out(Easing.ease) },
@@ -139,7 +146,6 @@ export function useDragGesture(
               currentTranslateY.value = 0;
               dragStartScrollOffset.value = 0;
               measuredItemHeight.value = 0;
-              dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
             }
           },
         );
@@ -154,7 +160,6 @@ export function useDragGesture(
       draggedItemId,
       currentTranslateY,
       dragStartScrollOffset,
-      dragUpdateTrigger,
       isDropping,
       onHapticFeedback,
     ],
@@ -187,20 +192,37 @@ export function useDragGesture(
           draggedItemId.value = itemId;
           dragStartScrollOffset.value = scrollOffset.value;
           currentTranslateY.value = 0;
+          // Reset performance tracking values
+          lastSignificantY.value = 0;
+          lastScrollTime.value = Date.now();
           draggedScale.value = withSpring(dragConfig.dragScale, {
             damping: 15,
             stiffness: 400,
           });
-          dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
           scheduleOnRN(triggerLightHaptic);
         })
         .onUpdate(event => {
           'worklet';
+          // Always update translateY for smooth visual feedback
           translateY.value = event.translationY;
-          currentTranslateY.value = event.translationY;
-          dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
+
+          // Performance optimization: Only update currentTranslateY (which triggers
+          // shift calculations in other items) when movement is significant (>5px)
+          const POSITION_THRESHOLD = 5;
+          const deltaFromLast = Math.abs(
+            event.translationY - lastSignificantY.value,
+          );
+          if (deltaFromLast >= POSITION_THRESHOLD) {
+            currentTranslateY.value = event.translationY;
+            lastSignificantY.value = event.translationY;
+          }
 
           // Autoscroll when dragging near edges
+          // Performance optimization: Throttle to ~30fps (33ms interval)
+          const SCROLL_THROTTLE_MS = 33;
+          const now = Date.now();
+          const timeSinceLastScroll = now - lastScrollTime.value;
+
           const fingerInList = event.absoluteY - listTopY.value;
           const topEdge = dragConfig.edgeThreshold;
           const bottomEdge = visibleHeight.value - dragConfig.edgeThreshold;
@@ -214,7 +236,11 @@ export function useDragGesture(
             );
             const newOffset = Math.max(0, scrollOffset.value - speed);
             scrollOffset.value = newOffset;
-            scheduleOnRN(scrollToOffset, newOffset);
+            // Throttle actual scroll calls to reduce JS thread pressure
+            if (timeSinceLastScroll >= SCROLL_THROTTLE_MS) {
+              lastScrollTime.value = now;
+              scheduleOnRN(scrollToOffset, newOffset);
+            }
           } else if (fingerInList > bottomEdge) {
             const maxOffset = Math.max(
               0,
@@ -229,7 +255,11 @@ export function useDragGesture(
               );
               const newOffset = Math.min(maxOffset, scrollOffset.value + speed);
               scrollOffset.value = newOffset;
-              scheduleOnRN(scrollToOffset, newOffset);
+              // Throttle actual scroll calls to reduce JS thread pressure
+              if (timeSinceLastScroll >= SCROLL_THROTTLE_MS) {
+                lastScrollTime.value = now;
+                scheduleOnRN(scrollToOffset, newOffset);
+              }
             }
           }
         })

package/src/hooks/drag/useDragShift.ts

@@ -3,6 +3,7 @@ import {
   useDerivedValue,
   useAnimatedReaction,
   withTiming,
+  cancelAnimation,
   Easing,
 } from 'react-native-reanimated';
 import { useDragState } from '../../contexts/DragStateContext';
@@ -38,7 +39,6 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
     currentTranslateY,
     scrollOffset,
     dragStartScrollOffset,
-    dragUpdateTrigger,
     measuredItemHeight,
     isDropping,
     config: dragConfig,
@@ -48,26 +48,11 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
   const shiftY = useSharedValue(0);
 
   // 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';
-    /**
-     * FORCE RE-EVALUATION PATTERN:
-     * useDerivedValue only re-runs when its dependencies change. However, with
-     * SharedValues from context, React can't track changes automatically.
-     *
-     * By reading dragUpdateTrigger.value (which is incremented on every drag
-     * state change), we force this derived value to recompute. This pattern
-     * is necessary because:
-     * 1. SharedValue changes don't trigger React re-renders
-     * 2. useDerivedValue caches its result based on tracked values
-     * 3. We need fresh calculations on every drag position update
-     *
-     * The ESLint disable is required because the value appears "unused" but
-     * reading it creates a dependency that Reanimated tracks.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    dragUpdateTrigger.value;
-
     // During drop transition, freeze shift values
     if (isDropping.value) {
       return shiftY.value;
@@ -104,7 +89,17 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
           ? -DRAG_THRESHOLDS.HOVER_OFFSET_FACTOR
           : 0;
     const hoveredIndex =
-      currentDraggedIndex + Math.round(effectiveTranslateY / itemHeight + offset);
+      currentDraggedIndex +
+      Math.round(effectiveTranslateY / itemHeight + offset);
+
+    // Performance optimization: Spatial filtering
+    // Only items in the affected range need to calculate shift
+    // 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) {
+      return 0;
+    }
 
     // Moving DOWN: items between original and hovered positions shift UP
     if (hoveredIndex > currentDraggedIndex) {
@@ -128,6 +123,9 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
     (target, prev) => {
       'worklet';
       if (target !== prev) {
+        // Cancel any in-flight animation before starting a new one
+        // This prevents competing animations and visual glitches
+        cancelAnimation(shiftY);
         shiftY.value = withTiming(target, {
           duration: ANIMATION_TIMING.SHIFT_DURATION,
           easing: Easing.out(Easing.ease),

package/src/hooks/drag/useDropCompensation.ts

@@ -47,7 +47,6 @@ export function useDropCompensation(config: UseDropCompensationConfig): void {
     draggedItemId,
     measuredItemHeight,
     isDropping,
-    dragUpdateTrigger,
     config: dragConfig,
   } = useDragState();
 
@@ -99,9 +98,6 @@ export function useDropCompensation(config: UseDropCompensationConfig): void {
               draggedIndex.value = -1;
               draggedItemId.value = '';
               measuredItemHeight.value = 0;
-              // Issue 5 Fix: Use direct assignment instead of withTiming for counter
-              // withTiming on a counter can cause timing issues and potential double-increment
-              dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
             }
           },
         );