@souscheflabs/reanimated-flashlist 0.1.7 → 0.1.10

package/README.md

@@ -1,4 +1,4 @@
-# @souschef/reanimated-flashlist
+# @souscheflabs/reanimated-flashlist
 
 A high-performance animated FlashList with drag-to-reorder and entry/exit animations for React Native.
 
@@ -15,7 +15,7 @@ A high-performance animated FlashList with drag-to-reorder and entry/exit animat
 
 ### From npm (when published)
 ```bash
-npm install @souschef/reanimated-flashlist
+npm install @souscheflabs/reanimated-flashlist
 ```
 
 ### From GitHub (private repo)
@@ -34,7 +34,7 @@ Or add to `package.json`:
 ```json
 {
   "dependencies": {
-    "@souschef/reanimated-flashlist": "github:SousChefLabs/reanimated-flashlist#v0.1.1"
+    "@souscheflabs/reanimated-flashlist": "github:SousChefLabs/reanimated-flashlist#v0.1.1"
   }
 }
 ```
@@ -57,7 +57,7 @@ npm install @shopify/flash-list react-native-reanimated react-native-gesture-han
 ## Quick Start
 
 ```tsx
-import { AnimatedFlashList, type AnimatedListItem } from '@souschef/reanimated-flashlist';
+import { AnimatedFlashList, type AnimatedListItem } from '@souscheflabs/reanimated-flashlist';
 import { GestureDetector } from 'react-native-gesture-handler';
 
 interface MyItem extends AnimatedListItem {
@@ -261,7 +261,7 @@ import {
   useDragAnimatedStyle,
   useListExitAnimation,
   useListEntryAnimation,
-} from '@souschef/reanimated-flashlist';
+} from '@souscheflabs/reanimated-flashlist';
 ```
 
 ### Context Providers
@@ -274,7 +274,7 @@ import {
   ListAnimationProvider,
   useDragState,
   useListAnimation,
-} from '@souschef/reanimated-flashlist';
+} from '@souscheflabs/reanimated-flashlist';
 ```
 
 ## License

package/lib/AnimatedFlashListItem.d.ts.map

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

package/lib/AnimatedFlashListItem.js

@@ -102,12 +102,6 @@ function AnimatedFlashListItemInner({ item, index, totalItems, isDragEnabled, re
     const handleLayout = (0, react_1.useCallback)((event) => {
         measuredHeightRef.current = event.nativeEvent.layout.height;
     }, []);
-    // Create combined animated style
-    const combinedAnimatedStyle = (0, react_1.useMemo)(() => {
-        // We can't directly combine animated styles here since they're worklet-based
-        // Instead, we'll let the consumer apply them via the render prop
-        return {};
-    }, []);
     // Create drag handle props
     const dragHandleProps = (0, react_1.useMemo)(() => isDragEnabled
         ? {
@@ -120,11 +114,13 @@ function AnimatedFlashListItemInner({ item, index, totalItems, isDragEnabled, re
         triggerExit(direction, onComplete, preset);
     }, [triggerExit]);
     // Create render info
+    // Note: animatedStyle is empty because animations are applied to the wrapper View automatically.
+    // This field is kept for backward compatibility with the AnimatedRenderItemInfo interface.
     const renderInfo = (0, react_1.useMemo)(() => ({
         item,
         index,
         totalItems,
-        animatedStyle: combinedAnimatedStyle,
+        animatedStyle: {},
         dragHandleProps,
         isDragging: false, // This is a SharedValue, consumer should use dragHandleProps.isDragging
         isDragEnabled,
@@ -134,7 +130,6 @@ function AnimatedFlashListItemInner({ item, index, totalItems, isDragEnabled, re
         item,
         index,
         totalItems,
-        combinedAnimatedStyle,
         dragHandleProps,
         isDragEnabled,
         triggerExitAnimation,

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

@@ -1 +1 @@
-{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../src/constants/animations.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAE1E;;;GAGG;AACH,eAAO,MAAM,cAAc,yDAAoC,CAAC;AAEhE;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,EAAE,mBAkBpC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,EAAE,mBAkBjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,oBAGrC,CAAC;AAEF;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,GAAE,SAAS,GAAG,MAAe,EACnC,SAAS,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GACvC,mBAAmB,CAWrB;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CACxC,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACxC,oBAAoB,CAOtB"}
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../src/constants/animations.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAE1E;;;GAGG;AACH,eAAO,MAAM,cAAc,yDAAoC,CAAC;AAEhE;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,EAAE,mBAkBpC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,EAAE,mBAoBjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,oBAGrC,CAAC;AAEF;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,GAAE,SAAS,GAAG,MAAe,EACnC,SAAS,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GACvC,mBAAmB,CAWrB;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CACxC,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GACxC,oBAAoB,CAOtB"}

package/lib/constants/animations.js

@@ -34,7 +34,7 @@ exports.DEFAULT_EXIT_ANIMATION = {
     },
     removalDelay: 300,
     layoutAnimation: {
-        duration: 200,
+        duration: 300,
     },
 };
 /**
@@ -61,7 +61,9 @@ exports.FAST_EXIT_ANIMATION = {
     },
     removalDelay: 200,
     layoutAnimation: {
-        duration: 150,
+        // Slightly longer than the exit animation for a smoother overall effect
+        // Items below start moving up as the exiting item is sliding out
+        duration: 250,
     },
 };
 /**

package/lib/constants/drag.d.ts

@@ -1,4 +1,42 @@
 import type { DragConfig } from '../types';
+/**
+ * Unified animation timing configuration for consistency across all drag hooks.
+ * Using consistent timing prevents visual "mismatches" during complex interactions.
+ */
+export declare const ANIMATION_TIMING: {
+    /** Duration for item shift animations (when items move to make room) */
+    readonly SHIFT_DURATION: 100;
+    /** Duration for drop settle animation (when dragged item animates to final position) */
+    readonly DROP_SETTLE_DURATION: 150;
+    /** Duration for shadow opacity fade transition */
+    readonly SHADOW_FADE_DURATION: 100;
+    /** Duration for non-dragged item compensation animations */
+    readonly COMPENSATION_DURATION: 100;
+};
+/**
+ * Configurable thresholds for drag calculations.
+ * These values control sensitivity and visual behavior.
+ */
+export declare const DRAG_THRESHOLDS: {
+    /**
+     * Offset factor for hover position calculation.
+     * This adds a bias when determining which index is being hovered over,
+     * making it slightly easier to "cross" into the next/prev position.
+     * Range: 0-0.5, where 0 = exact center, 0.5 = edge of item
+     */
+    readonly HOVER_OFFSET_FACTOR: 0.2;
+    /**
+     * Z-index for elevated (dragged) items.
+     * Should be high enough to appear above other UI but not conflict
+     * with modals or overlays (which typically use 1000+).
+     */
+    readonly ELEVATED_Z_INDEX: 999;
+    /**
+     * Minimum translateY/shiftY value to consider "significant".
+     * Values below this are treated as zero for optimization.
+     */
+    readonly SHIFT_SIGNIFICANCE_THRESHOLD: 1;
+};
 /**
  * Default drag configuration
  * All values can be overridden via AnimatedFlashList config prop

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

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

package/lib/constants/drag.js

@@ -1,7 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_DRAG_CONFIG = void 0;
+exports.DEFAULT_DRAG_CONFIG = exports.DRAG_THRESHOLDS = exports.ANIMATION_TIMING = void 0;
 exports.createDragConfig = createDragConfig;
+// ============================================================================
+// Animation Timing & Easing Constants
+// ============================================================================
+/**
+ * Unified animation timing configuration for consistency across all drag hooks.
+ * Using consistent timing prevents visual "mismatches" during complex interactions.
+ */
+exports.ANIMATION_TIMING = {
+    /** Duration for item shift animations (when items move to make room) */
+    SHIFT_DURATION: 100,
+    /** Duration for drop settle animation (when dragged item animates to final position) */
+    DROP_SETTLE_DURATION: 150,
+    /** Duration for shadow opacity fade transition */
+    SHADOW_FADE_DURATION: 100,
+    /** Duration for non-dragged item compensation animations */
+    COMPENSATION_DURATION: 100,
+};
+// ============================================================================
+// Threshold Constants
+// ============================================================================
+/**
+ * Configurable thresholds for drag calculations.
+ * These values control sensitivity and visual behavior.
+ */
+exports.DRAG_THRESHOLDS = {
+    /**
+     * Offset factor for hover position calculation.
+     * This adds a bias when determining which index is being hovered over,
+     * making it slightly easier to "cross" into the next/prev position.
+     * Range: 0-0.5, where 0 = exact center, 0.5 = edge of item
+     */
+    HOVER_OFFSET_FACTOR: 0.2,
+    /**
+     * Z-index for elevated (dragged) items.
+     * Should be high enough to appear above other UI but not conflict
+     * with modals or overlays (which typically use 1000+).
+     */
+    ELEVATED_Z_INDEX: 999,
+    /**
+     * Minimum translateY/shiftY value to consider "significant".
+     * Values below this are treated as zero for optimization.
+     */
+    SHIFT_SIGNIFICANCE_THRESHOLD: 1,
+};
+// ============================================================================
+// Default Drag Configuration
+// ============================================================================
 /**
  * Default drag configuration
  * All values can be overridden via AnimatedFlashList config prop

package/lib/contexts/DragStateContext.d.ts

@@ -58,16 +58,6 @@ interface DragStateProviderProps {
     /** Optional drag configuration overrides */
     config?: Partial<DragConfig>;
 }
-/**
- * Provider that creates shared Reanimated values for drag state.
- *
- * These values are shared across all list items:
- * - The dragged item writes to them during drag gestures
- * - Non-dragged items read them to calculate their shift offset
- * - Scroll state enables viewport-aware hover calculations
- *
- * Using SharedValues ensures animations run on the UI thread at 60fps.
- */
 export declare const DragStateProvider: React.FC<DragStateProviderProps>;
 export {};
 //# sourceMappingURL=DragStateContext.d.ts.map

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;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0G9D,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,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"}

package/lib/contexts/DragStateContext.js

@@ -60,9 +60,36 @@ exports.useDragState = useDragState;
  *
  * Using SharedValues ensures animations run on the UI thread at 60fps.
  */
+/**
+ * Validates drag configuration values to prevent runtime errors.
+ * Logs warnings in development for invalid configurations.
+ */
+function validateConfig(config) {
+    if (__DEV__) {
+        if (config.itemHeight <= 0) {
+            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);
+        }
+        if (config.dragScale <= 0) {
+            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);
+        }
+        if (config.maxScrollSpeed <= 0) {
+            console.warn('[AnimatedFlashList] Invalid maxScrollSpeed: must be positive. Got:', config.maxScrollSpeed);
+        }
+    }
+}
 const DragStateProvider = ({ children, config: configOverrides, }) => {
-    // Merge config with defaults
-    const config = (0, react_1.useMemo)(() => ({ ...constants_1.DEFAULT_DRAG_CONFIG, ...configOverrides }), [configOverrides]);
+    // Merge config with defaults and validate
+    const config = (0, react_1.useMemo)(() => {
+        const mergedConfig = { ...constants_1.DEFAULT_DRAG_CONFIG, ...configOverrides };
+        validateConfig(mergedConfig);
+        return mergedConfig;
+    }, [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);

package/lib/contexts/ListAnimationContext.d.ts

@@ -80,8 +80,11 @@ interface ListAnimationProviderProps {
      */
     entryAnimationTimeout?: number;
     /**
-     * Duration for layout animations when items are removed (ms)
-     * @default 200
+     * Duration for layout animations when items are removed (ms).
+     * This controls how fast remaining items animate into their new positions
+     * after an item is removed from the list.
+     * Lower values = faster/snappier, higher values = smoother/more gradual
+     * @default 300
      */
     layoutAnimationDuration?: number;
     /**

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

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

package/lib/contexts/ListAnimationContext.js

@@ -68,7 +68,7 @@ exports.useListAnimationOptional = useListAnimationOptional;
  * - Layout animation coordination when items are removed
  * - Decoupled from React render cycle for performance
  */
-const ListAnimationProvider = ({ children, entryAnimationTimeout = 5000, layoutAnimationDuration = 200, enableLayoutAnimation = true, }) => {
+const ListAnimationProvider = ({ children, entryAnimationTimeout = 5000, layoutAnimationDuration = 300, enableLayoutAnimation = true, }) => {
     // Map of itemId -> exit animation trigger function
     const animationTriggersRef = (0, react_1.useRef)(new Map());
     // Map of itemId -> pending entry animation
@@ -129,14 +129,13 @@ const ListAnimationProvider = ({ children, entryAnimationTimeout = 5000, layoutA
         exitingItemsVersion.value = exitingItemsVersion.value + 1;
         // Configure native LayoutAnimation for remaining items
         if (enableLayoutAnimation) {
-            // Use custom config for smoother animation
-            react_native_1.LayoutAnimation.configureNext({
-                duration: layoutAnimationDuration,
-                update: {
-                    type: react_native_1.LayoutAnimation.Types.easeInEaseOut,
-                    property: react_native_1.LayoutAnimation.Properties.scaleY,
-                },
-            });
+            // Use spring animation for smoother, more natural item transitions
+            // Spring animations better handle position changes than timed animations
+            // and provide a more "organic" feel to remaining items moving up
+            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.create(layoutAnimationDuration, react_native_1.LayoutAnimation.Types.easeOut, 
+            // Use opacity as the trigger property - this works better for
+            // position-based animations than scaleY which can cause visual artifacts
+            react_native_1.LayoutAnimation.Properties.opacity));
         }
     }, [enableLayoutAnimation, layoutAnimationDuration, exitingItemsVersion]);
     // Unregister an exiting item

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

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

package/lib/hooks/animations/useListEntryAnimation.js

@@ -32,11 +32,11 @@ const ListAnimationContext_1 = require("../../contexts/ListAnimationContext");
  */
 const useListEntryAnimation = (itemId, configOverrides) => {
     const animationContext = (0, ListAnimationContext_1.useListAnimationOptional)();
-    // Merge config with defaults
-    const config = {
+    // Memoize merged config to prevent unnecessary re-renders and effect re-runs
+    const config = (0, react_1.useMemo)(() => ({
         fade: { ...animations_1.DEFAULT_ENTRY_ANIMATION.fade, ...configOverrides?.fade },
         slide: { ...animations_1.DEFAULT_ENTRY_ANIMATION.slide, ...configOverrides?.slide },
-    };
+    }), [configOverrides]);
     // Shared values for entry animation - start at final position (no animation by default)
     const translateX = (0, react_native_reanimated_1.useSharedValue)(0);
     const opacity = (0, react_native_reanimated_1.useSharedValue)(1);

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;;CAgDhC,CAAC"}
+{"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"}

package/lib/hooks/animations/useListExitAnimation.js

@@ -116,7 +116,11 @@ const useListExitAnimation = (itemId, config) => {
         const animConfig = animationConfigs[preset];
         // Register exiting item for layout compensation (if configured)
         if (config?.onExitStart && config.index !== undefined) {
-            const height = config.measuredHeight ?? animConfig.slide.distance;
+            // Use measured height if available and valid (> 0), otherwise use animation distance
+            // This handles the case where layout hasn't been measured yet (height = 0)
+            const height = config.measuredHeight && config.measuredHeight > 0
+                ? config.measuredHeight
+                : animConfig.slide.distance;
             config.onExitStart(config.index, height);
         }
         // Set animation config SharedValues BEFORE starting animation

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":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,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,CAuC5B"}
+{"version":3,"file":"useDragAnimatedStyle.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/useDragAnimatedStyle.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,EAChC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAC/B,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,GAC1B,0BAA0B,CAmE5B"}

package/lib/hooks/drag/useDragAnimatedStyle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDragAnimatedStyle = useDragAnimatedStyle;
 const react_native_reanimated_1 = require("react-native-reanimated");
 const DragStateContext_1 = require("../../contexts/DragStateContext");
+const constants_1 = require("../../constants");
 /**
  * Hook that creates animated styles for drag operations.
  *
@@ -35,12 +36,37 @@ const DragStateContext_1 = require("../../contexts/DragStateContext");
 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)();
+    // 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);
+    // React to drag state changes and animate shadow opacity
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => ({
+        isThisItemDragged: draggedItemId.value === itemId,
+        scale: draggedScale.value,
+    }), (current, previous) => {
+        '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]);
+            animatedShadowOpacity.value = targetOpacity;
+        }
+        else if (previous?.isThisItemDragged && !current.isThisItemDragged) {
+            // Transition from dragged to not-dragged: fade shadow smoothly
+            animatedShadowOpacity.value = (0, react_native_reanimated_1.withTiming)(0.1, {
+                duration: constants_1.ANIMATION_TIMING.SHADOW_FADE_DURATION,
+            });
+        }
+        else {
+            // Non-dragged item: keep at base opacity
+            animatedShadowOpacity.value = 0.1;
+        }
+    });
     // Animated style for drag offset with scale and shadow
     const dragAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
         const isThisItemDragged = draggedItemId.value === itemId;
         // Keep elevated if: actively dragging OR has offset (animating back)
-        const shouldBeElevated = isDragging.value || Math.abs(translateY.value) > 1;
-        const shadowOpacity = (0, react_native_reanimated_1.interpolate)(draggedScale.value, [1, config.dragScale], [0.1, config.dragShadowOpacity]);
+        const shouldBeElevated = isDragging.value ||
+            Math.abs(translateY.value) > constants_1.DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD;
         // Calculate scroll delta for position compensation during autoscroll
         const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
         // Use drag translateY + scroll compensation for dragged item, shiftY for others
@@ -52,8 +78,9 @@ function useDragAnimatedStyle(itemId, isDragging, translateY, shiftY) {
                 { translateY: yOffset },
                 { scale: isThisItemDragged ? draggedScale.value : 1 },
             ],
-            zIndex: shouldBeElevated ? 999 : 0,
-            shadowOpacity: isThisItemDragged ? shadowOpacity : 0.1,
+            zIndex: shouldBeElevated ? constants_1.DRAG_THRESHOLDS.ELEVATED_Z_INDEX : 0,
+            // Use animated shadow opacity for smooth transitions
+            shadowOpacity: animatedShadowOpacity.value,
             elevation: isDragging.value ? 12 : 4,
         };
     });

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

package/lib/hooks/drag/useDragShift.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDragShift = useDragShift;
 const react_native_reanimated_1 = require("react-native-reanimated");
 const DragStateContext_1 = require("../../contexts/DragStateContext");
+const constants_1 = require("../../constants");
 /**
  * Hook that calculates shift animation for non-dragged items.
  *
@@ -30,7 +31,21 @@ function useDragShift(config) {
     // Calculate target shift using useDerivedValue
     const targetShiftY = (0, react_native_reanimated_1.useDerivedValue)(() => {
         'worklet';
-        // Force re-evaluation on every drag state change
+        /**
+         * 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
@@ -55,7 +70,13 @@ function useDragShift(config) {
         const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
         const effectiveTranslateY = translateYNow + scrollDelta;
         // Calculate which index the dragged item is hovering over
-        const offset = effectiveTranslateY > 0 ? 0.2 : effectiveTranslateY < 0 ? -0.2 : 0;
+        // The HOVER_OFFSET_FACTOR adds a small bias to make crossing into
+        // the next position slightly easier (prevents "sticky" hover positions)
+        const offset = effectiveTranslateY > 0
+            ? constants_1.DRAG_THRESHOLDS.HOVER_OFFSET_FACTOR
+            : effectiveTranslateY < 0
+                ? -constants_1.DRAG_THRESHOLDS.HOVER_OFFSET_FACTOR
+                : 0;
         const hoveredIndex = currentDraggedIndex + Math.round(effectiveTranslateY / itemHeight + offset);
         // Moving DOWN: items between original and hovered positions shift UP
         if (hoveredIndex > currentDraggedIndex) {
@@ -76,7 +97,7 @@ function useDragShift(config) {
         'worklet';
         if (target !== prev) {
             shiftY.value = (0, react_native_reanimated_1.withTiming)(target, {
-                duration: 100,
+                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":"AASA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,yBAAyB,GAAG,IAAI,CAoF3E"}
+{"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"}

package/lib/hooks/drag/useDropCompensation.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_native_reanimated_1 = require("react-native-reanimated");
 const flash_list_1 = require("@shopify/flash-list");
 const DragStateContext_1 = require("../../contexts/DragStateContext");
+const constants_1 = require("../../constants");
 /**
  * Hook that handles index change compensation after drag reorder.
  *
@@ -40,9 +41,20 @@ function useDropCompensation(config) {
     // Handle index changes after data updates (drop compensation)
     (0, react_1.useLayoutEffect)(() => {
         if (index !== prevIndex) {
+            // Guard: Skip compensation during active drop transition to prevent double-compensation
+            // The isDropping flag is set when drop begins and cleared after settle animation
+            if (isDropping.value && draggedItemId.value !== itemId) {
+                // Non-dragged items should wait for drop to complete
+                setPrevIndex(index);
+                return;
+            }
+            // Issue 1 Fix: Use dynamically measured height when available, matching useDragShift behavior
+            const itemHeight = measuredItemHeight.value > 0
+                ? measuredItemHeight.value + dragConfig.itemVerticalMargin
+                : dragConfig.itemHeight;
             // Compensate for index change by adjusting translateY
             const indexDelta = index - prevIndex;
-            const heightDelta = indexDelta * dragConfig.itemHeight;
+            const heightDelta = indexDelta * itemHeight;
             // Check if this is the dragged item completing its drop
             const isTheDraggedItem = draggedItemId.value === itemId;
             // Compensate translateY for position change
@@ -50,7 +62,10 @@ function useDropCompensation(config) {
             if (isTheDraggedItem) {
                 // Dragged item: animate smoothly to 0 from compensated position
                 translateY.value = compensatedY;
-                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 => {
+                translateY.value = (0, react_native_reanimated_1.withTiming)(0, {
+                    duration: constants_1.ANIMATION_TIMING.DROP_SETTLE_DURATION,
+                    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
+                }, finished => {
                     'worklet';
                     if (finished) {
                         // Reset ALL global state after settle animation
@@ -59,15 +74,19 @@ function useDropCompensation(config) {
                         draggedIndex.value = -1;
                         draggedItemId.value = '';
                         measuredItemHeight.value = 0;
-                        dragUpdateTrigger.value = (0, react_native_reanimated_1.withTiming)(dragUpdateTrigger.value + 1, {
-                            duration: 1,
-                        });
+                        // 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;
                     }
                 });
             }
-            else if (Math.abs(translateY.value) > 1) {
-                // Non-dragged item: just compensate without animation
-                translateY.value = compensatedY;
+            else if (Math.abs(translateY.value) > constants_1.DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD) {
+                // Issue 3 Fix: Non-dragged items now animate their compensation for visual consistency
+                // This prevents the jarring "jump" when only the dragged item animates smoothly
+                translateY.value = (0, react_native_reanimated_1.withTiming)(compensatedY, {
+                    duration: constants_1.ANIMATION_TIMING.COMPENSATION_DURATION,
+                    easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.ease),
+                });
             }
             // Update tracked index
             setPrevIndex(index);
@@ -83,7 +102,7 @@ function useDropCompensation(config) {
         'worklet';
         if (prevIdx !== null &&
             currentIndex !== prevIdx &&
-            Math.abs(shiftY.value) > 1) {
+            Math.abs(shiftY.value) > constants_1.DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD) {
             shiftY.value = 0;
         }
     });

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @souschef/reanimated-flashlist
+ * @souscheflabs/reanimated-flashlist
  *
  * A high-performance animated FlashList with drag-to-reorder and entry/exit animations.
  *
@@ -8,7 +8,7 @@
  * import {
  *   AnimatedFlashList,
  *   type AnimatedListItem,
- * } from '@souschef/reanimated-flashlist';
+ * } from '@souscheflabs/reanimated-flashlist';
  *
  * interface MyItem extends AnimatedListItem {
  *   title: string;

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * @souschef/reanimated-flashlist
+ * @souscheflabs/reanimated-flashlist
  *
  * A high-performance animated FlashList with drag-to-reorder and entry/exit animations.
  *
@@ -9,7 +9,7 @@
  * import {
  *   AnimatedFlashList,
  *   type AnimatedListItem,
- * } from '@souschef/reanimated-flashlist';
+ * } from '@souscheflabs/reanimated-flashlist';
  *
  * interface MyItem extends AnimatedListItem {
  *   title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@souscheflabs/reanimated-flashlist",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "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/AnimatedFlashListItem.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useMemo, useCallback, useRef } from 'react';
 import Animated, { useAnimatedRef } from 'react-native-reanimated';
-import type { ViewStyle, LayoutChangeEvent } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 import {
   useDragGesture,
   useDragShift,
@@ -131,13 +131,6 @@ function AnimatedFlashListItemInner<T extends AnimatedListItem>({
     measuredHeightRef.current = event.nativeEvent.layout.height;
   }, []);
 
-  // Create combined animated style
-  const combinedAnimatedStyle = useMemo<ViewStyle>(() => {
-    // We can't directly combine animated styles here since they're worklet-based
-    // Instead, we'll let the consumer apply them via the render prop
-    return {};
-  }, []);
-
   // Create drag handle props
   const dragHandleProps = useMemo(
     () =>
@@ -163,12 +156,14 @@ function AnimatedFlashListItemInner<T extends AnimatedListItem>({
   );
 
   // Create render info
+  // Note: animatedStyle is empty because animations are applied to the wrapper View automatically.
+  // This field is kept for backward compatibility with the AnimatedRenderItemInfo interface.
   const renderInfo = useMemo<AnimatedRenderItemInfo<T>>(
     () => ({
       item,
       index,
       totalItems,
-      animatedStyle: combinedAnimatedStyle,
+      animatedStyle: {},
       dragHandleProps,
       isDragging: false, // This is a SharedValue, consumer should use dragHandleProps.isDragging
       isDragEnabled,
@@ -179,7 +174,6 @@ function AnimatedFlashListItemInner<T extends AnimatedListItem>({
       item,
       index,
       totalItems,
-      combinedAnimatedStyle,
       dragHandleProps,
       isDragEnabled,
       triggerExitAnimation,

package/src/__tests__/contexts/ListAnimationContext.test.tsx

@@ -309,15 +309,15 @@ describe('ListAnimationContext', () => {
           wrapper: createWrapper(),
         });
 
-        expect(result.current.layoutAnimationDuration).toBe(200);
+        expect(result.current.layoutAnimationDuration).toBe(300);
       });
 
       it('uses custom layoutAnimationDuration', () => {
         const { result } = renderHook(() => useListAnimation(), {
-          wrapper: createWrapper({ layoutAnimationDuration: 300 }),
+          wrapper: createWrapper({ layoutAnimationDuration: 400 }),
         });
 
-        expect(result.current.layoutAnimationDuration).toBe(300);
+        expect(result.current.layoutAnimationDuration).toBe(400);
       });
     });
   });

package/src/constants/animations.ts

@@ -32,7 +32,7 @@ export const DEFAULT_EXIT_ANIMATION: ExitAnimationConfig = {
   },
   removalDelay: 300,
   layoutAnimation: {
-    duration: 200,
+    duration: 300,
   },
 };
 
@@ -60,7 +60,9 @@ export const FAST_EXIT_ANIMATION: ExitAnimationConfig = {
   },
   removalDelay: 200,
   layoutAnimation: {
-    duration: 150,
+    // Slightly longer than the exit animation for a smoother overall effect
+    // Items below start moving up as the exiting item is sliding out
+    duration: 250,
   },
 };
 

package/src/constants/drag.ts

@@ -1,5 +1,57 @@
 import type { DragConfig } from '../types';
 
+// ============================================================================
+// Animation Timing & Easing Constants
+// ============================================================================
+
+/**
+ * Unified animation timing configuration for consistency across all drag hooks.
+ * Using consistent timing prevents visual "mismatches" during complex interactions.
+ */
+export const ANIMATION_TIMING = {
+  /** Duration for item shift animations (when items move to make room) */
+  SHIFT_DURATION: 100,
+  /** Duration for drop settle animation (when dragged item animates to final position) */
+  DROP_SETTLE_DURATION: 150,
+  /** Duration for shadow opacity fade transition */
+  SHADOW_FADE_DURATION: 100,
+  /** Duration for non-dragged item compensation animations */
+  COMPENSATION_DURATION: 100,
+} as const;
+
+// ============================================================================
+// Threshold Constants
+// ============================================================================
+
+/**
+ * Configurable thresholds for drag calculations.
+ * These values control sensitivity and visual behavior.
+ */
+export const DRAG_THRESHOLDS = {
+  /**
+   * Offset factor for hover position calculation.
+   * This adds a bias when determining which index is being hovered over,
+   * making it slightly easier to "cross" into the next/prev position.
+   * Range: 0-0.5, where 0 = exact center, 0.5 = edge of item
+   */
+  HOVER_OFFSET_FACTOR: 0.2,
+  /**
+   * Z-index for elevated (dragged) items.
+   * Should be high enough to appear above other UI but not conflict
+   * with modals or overlays (which typically use 1000+).
+   */
+  ELEVATED_Z_INDEX: 999,
+  /**
+   * Minimum translateY/shiftY value to consider "significant".
+   * Values below this are treated as zero for optimization.
+   */
+  SHIFT_SIGNIFICANCE_THRESHOLD: 1,
+} as const;
+
+// ============================================================================
+// Default Drag Configuration
+// ============================================================================
+
 /**
  * Default drag configuration
  * All values can be overridden via AnimatedFlashList config prop

package/src/contexts/DragStateContext.tsx

@@ -88,15 +88,55 @@ interface DragStateProviderProps {
  *
  * Using SharedValues ensures animations run on the UI thread at 60fps.
  */
+/**
+ * Validates drag configuration values to prevent runtime errors.
+ * Logs warnings in development for invalid configurations.
+ */
+function validateConfig(config: DragConfig): void {
+  if (__DEV__) {
+    if (config.itemHeight <= 0) {
+      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,
+      );
+    }
+    if (config.dragScale <= 0) {
+      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,
+      );
+    }
+    if (config.maxScrollSpeed <= 0) {
+      console.warn(
+        '[AnimatedFlashList] Invalid maxScrollSpeed: must be positive. Got:',
+        config.maxScrollSpeed,
+      );
+    }
+  }
+}
+
 export const DragStateProvider: React.FC<DragStateProviderProps> = ({
   children,
   config: configOverrides,
 }) => {
-  // Merge config with defaults
-  const config = useMemo<DragConfig>(
-    () => ({ ...DEFAULT_DRAG_CONFIG, ...configOverrides }),
-    [configOverrides],
-  );
+  // Merge config with defaults and validate
+  const config = useMemo<DragConfig>(() => {
+    const mergedConfig = { ...DEFAULT_DRAG_CONFIG, ...configOverrides };
+    validateConfig(mergedConfig);
+    return mergedConfig;
+  }, [configOverrides]);
 
   // Shared values are created once and persist for the lifetime of the provider
   const isDragging = useSharedValue(false);

package/src/contexts/ListAnimationContext.tsx

@@ -120,8 +120,11 @@ interface ListAnimationProviderProps {
    */
   entryAnimationTimeout?: number;
   /**
-   * Duration for layout animations when items are removed (ms)
-   * @default 200
+   * Duration for layout animations when items are removed (ms).
+   * This controls how fast remaining items animate into their new positions
+   * after an item is removed from the list.
+   * Lower values = faster/snappier, higher values = smoother/more gradual
+   * @default 300
    */
   layoutAnimationDuration?: number;
   /**
@@ -143,7 +146,7 @@ interface ListAnimationProviderProps {
 export const ListAnimationProvider: React.FC<ListAnimationProviderProps> = ({
   children,
   entryAnimationTimeout = 5000,
-  layoutAnimationDuration = 200,
+  layoutAnimationDuration = 300,
   enableLayoutAnimation = true,
 }) => {
   // Map of itemId -> exit animation trigger function
@@ -234,14 +237,18 @@ export const ListAnimationProvider: React.FC<ListAnimationProviderProps> = ({
 
       // Configure native LayoutAnimation for remaining items
       if (enableLayoutAnimation) {
-        // Use custom config for smoother animation
-        LayoutAnimation.configureNext({
-          duration: layoutAnimationDuration,
-          update: {
-            type: LayoutAnimation.Types.easeInEaseOut,
-            property: LayoutAnimation.Properties.scaleY,
-          },
-        });
+        // Use spring animation for smoother, more natural item transitions
+        // Spring animations better handle position changes than timed animations
+        // and provide a more "organic" feel to remaining items moving up
+        LayoutAnimation.configureNext(
+          LayoutAnimation.create(
+            layoutAnimationDuration,
+            LayoutAnimation.Types.easeOut,
+            // Use opacity as the trigger property - this works better for
+            // position-based animations than scaleY which can cause visual artifacts
+            LayoutAnimation.Properties.opacity,
+          ),
+        );
       }
     },
     [enableLayoutAnimation, layoutAnimationDuration, exitingItemsVersion],

package/src/hooks/animations/useListEntryAnimation.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useMemo } from 'react';
 import {
   useAnimatedStyle,
   useSharedValue,
@@ -42,11 +42,14 @@ export const useListEntryAnimation = (
 ) => {
   const animationContext = useListAnimationOptional();
 
-  // Merge config with defaults
-  const config = {
-    fade: { ...DEFAULT_ENTRY_ANIMATION.fade, ...configOverrides?.fade },
-    slide: { ...DEFAULT_ENTRY_ANIMATION.slide, ...configOverrides?.slide },
-  };
+  // Memoize merged config to prevent unnecessary re-renders and effect re-runs
+  const config = useMemo(
+    () => ({
+      fade: { ...DEFAULT_ENTRY_ANIMATION.fade, ...configOverrides?.fade },
+      slide: { ...DEFAULT_ENTRY_ANIMATION.slide, ...configOverrides?.slide },
+    }),
+    [configOverrides],
+  );
 
   // Shared values for entry animation - start at final position (no animation by default)
   const translateX = useSharedValue(0);

package/src/hooks/animations/useListExitAnimation.ts

@@ -158,7 +158,12 @@ export const useListExitAnimation = (
 
       // Register exiting item for layout compensation (if configured)
       if (config?.onExitStart && config.index !== undefined) {
-        const height = config.measuredHeight ?? animConfig.slide.distance;
+        // Use measured height if available and valid (> 0), otherwise use animation distance
+        // This handles the case where layout hasn't been measured yet (height = 0)
+        const height =
+          config.measuredHeight && config.measuredHeight > 0
+            ? config.measuredHeight
+            : animConfig.slide.distance;
         config.onExitStart(config.index, height);
       }
 

package/src/hooks/drag/useDragAnimatedStyle.ts

@@ -1,7 +1,14 @@
-import { useAnimatedStyle, interpolate } from 'react-native-reanimated';
+import {
+  useAnimatedStyle,
+  interpolate,
+  useSharedValue,
+  useAnimatedReaction,
+  withTiming,
+} from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 import type { ViewStyle } from 'react-native';
 import { useDragState } from '../../contexts/DragStateContext';
+import { ANIMATION_TIMING, DRAG_THRESHOLDS } from '../../constants';
 import type { UseDragAnimatedStyleResult } from '../../types';
 
 /**
@@ -43,19 +50,46 @@ export function useDragAnimatedStyle(
   const { draggedItemId, draggedScale, config, scrollOffset, dragStartScrollOffset } =
     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 = useSharedValue(0.1);
+
+  // React to drag state changes and animate shadow opacity
+  useAnimatedReaction(
+    () => ({
+      isThisItemDragged: draggedItemId.value === itemId,
+      scale: draggedScale.value,
+    }),
+    (current, previous) => {
+      'worklet';
+      if (current.isThisItemDragged) {
+        // When dragged, interpolate shadow opacity based on scale
+        const targetOpacity = interpolate(
+          current.scale,
+          [1, config.dragScale],
+          [0.1, config.dragShadowOpacity],
+        );
+        animatedShadowOpacity.value = targetOpacity;
+      } else if (previous?.isThisItemDragged && !current.isThisItemDragged) {
+        // Transition from dragged to not-dragged: fade shadow smoothly
+        animatedShadowOpacity.value = withTiming(0.1, {
+          duration: ANIMATION_TIMING.SHADOW_FADE_DURATION,
+        });
+      } else {
+        // Non-dragged item: keep at base opacity
+        animatedShadowOpacity.value = 0.1;
+      }
+    },
+  );
+
   // Animated style for drag offset with scale and shadow
   const dragAnimatedStyle = useAnimatedStyle(() => {
     const isThisItemDragged = draggedItemId.value === itemId;
 
     // Keep elevated if: actively dragging OR has offset (animating back)
     const shouldBeElevated =
-      isDragging.value || Math.abs(translateY.value) > 1;
-
-    const shadowOpacity = interpolate(
-      draggedScale.value,
-      [1, config.dragScale],
-      [0.1, config.dragShadowOpacity],
-    );
+      isDragging.value ||
+      Math.abs(translateY.value) > DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD;
 
     // Calculate scroll delta for position compensation during autoscroll
     const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
@@ -70,8 +104,9 @@ export function useDragAnimatedStyle(
         { translateY: yOffset },
         { scale: isThisItemDragged ? draggedScale.value : 1 },
       ],
-      zIndex: shouldBeElevated ? 999 : 0,
-      shadowOpacity: isThisItemDragged ? shadowOpacity : 0.1,
+      zIndex: shouldBeElevated ? DRAG_THRESHOLDS.ELEVATED_Z_INDEX : 0,
+      // Use animated shadow opacity for smooth transitions
+      shadowOpacity: animatedShadowOpacity.value,
       elevation: isDragging.value ? 12 : 4,
     } as ViewStyle;
   });

package/src/hooks/drag/useDragShift.ts

@@ -6,6 +6,7 @@ import {
   Easing,
 } from 'react-native-reanimated';
 import { useDragState } from '../../contexts/DragStateContext';
+import { ANIMATION_TIMING, DRAG_THRESHOLDS } from '../../constants';
 import type { UseDragShiftConfig, UseDragShiftResult } from '../../types';
 
 /**
@@ -49,7 +50,21 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
   // Calculate target shift using useDerivedValue
   const targetShiftY = useDerivedValue(() => {
     'worklet';
-    // Force re-evaluation on every drag state change
+    /**
+     * 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;
 
@@ -80,8 +95,14 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
     const effectiveTranslateY = translateYNow + scrollDelta;
 
     // Calculate which index the dragged item is hovering over
+    // The HOVER_OFFSET_FACTOR adds a small bias to make crossing into
+    // the next position slightly easier (prevents "sticky" hover positions)
     const offset =
-      effectiveTranslateY > 0 ? 0.2 : effectiveTranslateY < 0 ? -0.2 : 0;
+      effectiveTranslateY > 0
+        ? DRAG_THRESHOLDS.HOVER_OFFSET_FACTOR
+        : effectiveTranslateY < 0
+          ? -DRAG_THRESHOLDS.HOVER_OFFSET_FACTOR
+          : 0;
     const hoveredIndex =
       currentDraggedIndex + Math.round(effectiveTranslateY / itemHeight + offset);
 
@@ -108,7 +129,7 @@ export function useDragShift(config: UseDragShiftConfig): UseDragShiftResult {
       'worklet';
       if (target !== prev) {
         shiftY.value = withTiming(target, {
-          duration: 100,
+          duration: ANIMATION_TIMING.SHIFT_DURATION,
           easing: Easing.out(Easing.ease),
         });
       }

package/src/hooks/drag/useDropCompensation.ts

@@ -7,6 +7,7 @@ import {
 } from 'react-native-reanimated';
 import { useRecyclingState } from '@shopify/flash-list';
 import { useDragState } from '../../contexts/DragStateContext';
+import { ANIMATION_TIMING, DRAG_THRESHOLDS } from '../../constants';
 import type { UseDropCompensationConfig } from '../../types';
 
 /**
@@ -56,9 +57,23 @@ export function useDropCompensation(config: UseDropCompensationConfig): void {
   // Handle index changes after data updates (drop compensation)
   useLayoutEffect(() => {
     if (index !== prevIndex) {
+      // Guard: Skip compensation during active drop transition to prevent double-compensation
+      // The isDropping flag is set when drop begins and cleared after settle animation
+      if (isDropping.value && draggedItemId.value !== itemId) {
+        // Non-dragged items should wait for drop to complete
+        setPrevIndex(index);
+        return;
+      }
+
+      // Issue 1 Fix: Use dynamically measured height when available, matching useDragShift behavior
+      const itemHeight =
+        measuredItemHeight.value > 0
+          ? measuredItemHeight.value + dragConfig.itemVerticalMargin
+          : dragConfig.itemHeight;
+
       // Compensate for index change by adjusting translateY
       const indexDelta = index - prevIndex;
-      const heightDelta = indexDelta * dragConfig.itemHeight;
+      const heightDelta = indexDelta * itemHeight;
 
       // Check if this is the dragged item completing its drop
       const isTheDraggedItem = draggedItemId.value === itemId;
@@ -71,7 +86,10 @@ export function useDropCompensation(config: UseDropCompensationConfig): void {
         translateY.value = compensatedY;
         translateY.value = withTiming(
           0,
-          { duration: 150, easing: Easing.out(Easing.ease) },
+          {
+            duration: ANIMATION_TIMING.DROP_SETTLE_DURATION,
+            easing: Easing.out(Easing.ease),
+          },
           finished => {
             'worklet';
             if (finished) {
@@ -81,15 +99,19 @@ export function useDropCompensation(config: UseDropCompensationConfig): void {
               draggedIndex.value = -1;
               draggedItemId.value = '';
               measuredItemHeight.value = 0;
-              dragUpdateTrigger.value = withTiming(dragUpdateTrigger.value + 1, {
-                duration: 1,
-              });
+              // 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;
             }
           },
         );
-      } else if (Math.abs(translateY.value) > 1) {
-        // Non-dragged item: just compensate without animation
-        translateY.value = compensatedY;
+      } else if (Math.abs(translateY.value) > DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD) {
+        // Issue 3 Fix: Non-dragged items now animate their compensation for visual consistency
+        // This prevents the jarring "jump" when only the dragged item animates smoothly
+        translateY.value = withTiming(compensatedY, {
+          duration: ANIMATION_TIMING.COMPENSATION_DURATION,
+          easing: Easing.out(Easing.ease),
+        });
       }
 
       // Update tracked index
@@ -111,7 +133,7 @@ export function useDropCompensation(config: UseDropCompensationConfig): void {
       if (
         prevIdx !== null &&
         currentIndex !== prevIdx &&
-        Math.abs(shiftY.value) > 1
+        Math.abs(shiftY.value) > DRAG_THRESHOLDS.SHIFT_SIGNIFICANCE_THRESHOLD
       ) {
         shiftY.value = 0;
       }

package/src/index.ts

@@ -1,5 +1,5 @@
 /**
- * @souschef/reanimated-flashlist
+ * @souscheflabs/reanimated-flashlist
  *
  * A high-performance animated FlashList with drag-to-reorder and entry/exit animations.
  *
@@ -8,7 +8,7 @@
  * import {
  *   AnimatedFlashList,
  *   type AnimatedListItem,
- * } from '@souschef/reanimated-flashlist';
+ * } from '@souscheflabs/reanimated-flashlist';
  *
  * interface MyItem extends AnimatedListItem {
  *   title: string;