@souscheflabs/reanimated-flashlist 0.1.7

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

@@ -0,0 +1,67 @@
+import type { AnimationDirection, ExitAnimationPreset } from '../../types';
+/**
+ * Configuration for exit animation with layout compensation
+ */
+interface UseListExitAnimationConfig {
+    /** Item index in the list (for layout compensation) */
+    index?: number;
+    /** Measured item height (for layout compensation) */
+    measuredHeight?: number;
+    /** Callback when exit animation starts (for registering with context) */
+    onExitStart?: (index: number, height: number) => void;
+    /** Callback when exit animation completes (for unregistering) */
+    onExitComplete?: () => void;
+}
+/**
+ * Hook for managing list item exit animations
+ *
+ * Provides coordinated slide, fade, and scale animations for items
+ * exiting a list (e.g., moving between sections, being deleted).
+ *
+ * PERFORMANCE: Uses eager shared value creation but defers animation calculations.
+ * The animated style returns static values when exitDirection === 0 (no animation),
+ * avoiding expensive animation calculations until the user actually triggers one.
+ *
+ * IMPORTANT: This hook handles FlashList view recycling by accepting an itemId parameter.
+ * When the itemId changes (view recycled for a different item), all animation state is reset.
+ *
+ * @param itemId - Unique identifier for the list item (used to detect view recycling)
+ * @param config - Optional configuration for layout compensation callbacks
+ * @returns Animation styles and trigger functions
+ *
+ * @example
+ * ```tsx
+ * const { exitAnimatedStyle, triggerExit, resetAnimation } = useListExitAnimation(item.id, {
+ *   index,
+ *   measuredHeight: 80,
+ *   onExitStart: (idx, height) => registerExitingItem(itemId, idx, height),
+ *   onExitComplete: () => unregisterExitingItem(itemId),
+ * });
+ *
+ * // Trigger exit animation
+ * triggerExit(1, () => {
+ *   onItemRemoved(item.id);
+ * });
+ *
+ * // Apply styles
+ * <Animated.View style={exitAnimatedStyle}>
+ *   {content}
+ * </Animated.View>
+ * ```
+ */
+export declare const useListExitAnimation: (itemId: string, config?: UseListExitAnimationConfig) => {
+    exitAnimatedStyle: {
+        opacity: number;
+        transform: ({
+            translateX: number;
+            scale?: undefined;
+        } | {
+            scale: number;
+            translateX?: undefined;
+        })[];
+    };
+    triggerExit: (direction: AnimationDirection, onComplete: () => void, preset?: ExitAnimationPreset) => void;
+    resetAnimation: () => void;
+};
+export {};
+//# sourceMappingURL=useListExitAnimation.d.ts.map

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

@@ -0,0 +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"}

package/lib/hooks/animations/useListExitAnimation.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListExitAnimation = void 0;
+const react_1 = require("react");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const react_native_worklets_1 = require("react-native-worklets");
+const animations_1 = require("../../constants/animations");
+// Animation configs by preset
+const animationConfigs = {
+    default: animations_1.DEFAULT_EXIT_ANIMATION,
+    fast: animations_1.FAST_EXIT_ANIMATION,
+};
+/**
+ * Hook for managing list item exit animations
+ *
+ * Provides coordinated slide, fade, and scale animations for items
+ * exiting a list (e.g., moving between sections, being deleted).
+ *
+ * PERFORMANCE: Uses eager shared value creation but defers animation calculations.
+ * The animated style returns static values when exitDirection === 0 (no animation),
+ * avoiding expensive animation calculations until the user actually triggers one.
+ *
+ * IMPORTANT: This hook handles FlashList view recycling by accepting an itemId parameter.
+ * When the itemId changes (view recycled for a different item), all animation state is reset.
+ *
+ * @param itemId - Unique identifier for the list item (used to detect view recycling)
+ * @param config - Optional configuration for layout compensation callbacks
+ * @returns Animation styles and trigger functions
+ *
+ * @example
+ * ```tsx
+ * const { exitAnimatedStyle, triggerExit, resetAnimation } = useListExitAnimation(item.id, {
+ *   index,
+ *   measuredHeight: 80,
+ *   onExitStart: (idx, height) => registerExitingItem(itemId, idx, height),
+ *   onExitComplete: () => unregisterExitingItem(itemId),
+ * });
+ *
+ * // Trigger exit animation
+ * triggerExit(1, () => {
+ *   onItemRemoved(item.id);
+ * });
+ *
+ * // Apply styles
+ * <Animated.View style={exitAnimatedStyle}>
+ *   {content}
+ * </Animated.View>
+ * ```
+ */
+const useListExitAnimation = (itemId, config) => {
+    // Shared value for exit direction - created eagerly but idle until animation triggers
+    // Value: 0 = no animation, 1 = animating right, -1 = animating left
+    const exitDirection = (0, react_native_reanimated_1.useSharedValue)(0);
+    // Track current animation config on UI thread for smooth animation
+    const slideDistance = (0, react_native_reanimated_1.useSharedValue)(animations_1.FAST_EXIT_ANIMATION.slide.distance);
+    const scaleToValue = (0, react_native_reanimated_1.useSharedValue)(animations_1.FAST_EXIT_ANIMATION.scale.toValue);
+    // Use useRef instead of useSharedValue for isAnimating flag
+    const isAnimatingRef = (0, react_1.useRef)(false);
+    // Refs for callback management and unmount safety
+    const onCompleteRef = (0, react_1.useRef)(null);
+    const isMountedRef = (0, react_1.useRef)(true);
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isMountedRef.current = false;
+            onCompleteRef.current = null;
+        };
+    }, []);
+    // Reset animation state when view is recycled (item ID changes)
+    (0, react_1.useEffect)(() => {
+        exitDirection.value = 0;
+        slideDistance.value = animations_1.FAST_EXIT_ANIMATION.slide.distance;
+        scaleToValue.value = animations_1.FAST_EXIT_ANIMATION.scale.toValue;
+        isAnimatingRef.current = false;
+    }, [itemId, exitDirection, slideDistance, scaleToValue]);
+    // Exit animated style (slide, fade, scale)
+    const exitAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        // Fast path: no animation active, return static values
+        if (exitDirection.value === 0) {
+            return {
+                opacity: 1,
+                transform: [{ translateX: 0 }, { scale: 1 }],
+            };
+        }
+        const progress = Math.abs(exitDirection.value);
+        return {
+            opacity: 1 - progress,
+            transform: [
+                { translateX: exitDirection.value * slideDistance.value },
+                { scale: 1 - progress * (1 - scaleToValue.value) },
+            ],
+        };
+    });
+    // Helper function to safely call the completion callback
+    const safeCallComplete = (0, react_1.useCallback)(() => {
+        if (isMountedRef.current && onCompleteRef.current) {
+            onCompleteRef.current();
+            onCompleteRef.current = null;
+        }
+        // Unregister exiting item (layout compensation cleanup)
+        config?.onExitComplete?.();
+        isAnimatingRef.current = false;
+    }, [config]);
+    /**
+     * Trigger exit animation with direction, completion callback, and optional preset
+     * @param direction - 1 for forward/right, -1 for backward/left
+     * @param onComplete - Callback fired when animation completes
+     * @param preset - Animation preset: 'default' (300ms) or 'fast' (200ms)
+     */
+    const triggerExit = (0, react_1.useCallback)((direction, onComplete, preset = 'fast') => {
+        // Guard against rapid toggling
+        if (isAnimatingRef.current)
+            return;
+        isAnimatingRef.current = true;
+        onCompleteRef.current = onComplete;
+        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;
+            config.onExitStart(config.index, height);
+        }
+        // Set animation config SharedValues BEFORE starting animation
+        slideDistance.value = animConfig.slide.distance;
+        scaleToValue.value = animConfig.scale.toValue;
+        // 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';
+            if (finished) {
+                (0, react_native_worklets_1.scheduleOnRN)(safeCallComplete);
+            }
+        });
+    }, [exitDirection, slideDistance, scaleToValue, safeCallComplete, config]);
+    /**
+     * Reset animation state (for reuse or error recovery)
+     */
+    const resetAnimation = (0, react_1.useCallback)(() => {
+        isAnimatingRef.current = false;
+        exitDirection.value = 0;
+    }, [exitDirection]);
+    return {
+        exitAnimatedStyle,
+        triggerExit,
+        resetAnimation,
+    };
+};
+exports.useListExitAnimation = useListExitAnimation;

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

@@ -0,0 +1,20 @@
+/**
+ * Drag-to-reorder hooks
+ *
+ * These hooks encapsulate the complex logic for implementing drag-to-reorder
+ * functionality in a FlashList. They work together with DragStateContext
+ * to coordinate animations across all items.
+ *
+ * Usage:
+ * ```tsx
+ * const { panGesture, isDragging, translateY } = useDragGesture(config, callbacks);
+ * const { shiftY } = useDragShift({ itemId, index });
+ * useDropCompensation({ itemId, index, translateY, shiftY });
+ * const { dragAnimatedStyle } = useDragAnimatedStyle(itemId, isDragging, translateY, shiftY);
+ * ```
+ */
+export { useDragGesture } from './useDragGesture';
+export { useDragShift } from './useDragShift';
+export { useDropCompensation } from './useDropCompensation';
+export { useDragAnimatedStyle } from './useDragAnimatedStyle';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/drag/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/hooks/drag/index.js

@@ -0,0 +1,26 @@
+"use strict";
+/**
+ * Drag-to-reorder hooks
+ *
+ * These hooks encapsulate the complex logic for implementing drag-to-reorder
+ * functionality in a FlashList. They work together with DragStateContext
+ * to coordinate animations across all items.
+ *
+ * Usage:
+ * ```tsx
+ * const { panGesture, isDragging, translateY } = useDragGesture(config, callbacks);
+ * const { shiftY } = useDragShift({ itemId, index });
+ * useDropCompensation({ itemId, index, translateY, shiftY });
+ * const { dragAnimatedStyle } = useDragAnimatedStyle(itemId, isDragging, translateY, shiftY);
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragAnimatedStyle = exports.useDropCompensation = exports.useDragShift = exports.useDragGesture = void 0;
+var useDragGesture_1 = require("./useDragGesture");
+Object.defineProperty(exports, "useDragGesture", { enumerable: true, get: function () { return useDragGesture_1.useDragGesture; } });
+var useDragShift_1 = require("./useDragShift");
+Object.defineProperty(exports, "useDragShift", { enumerable: true, get: function () { return useDragShift_1.useDragShift; } });
+var useDropCompensation_1 = require("./useDropCompensation");
+Object.defineProperty(exports, "useDropCompensation", { enumerable: true, get: function () { return useDropCompensation_1.useDropCompensation; } });
+var useDragAnimatedStyle_1 = require("./useDragAnimatedStyle");
+Object.defineProperty(exports, "useDragAnimatedStyle", { enumerable: true, get: function () { return useDragAnimatedStyle_1.useDragAnimatedStyle; } });

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

@@ -0,0 +1,33 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { UseDragAnimatedStyleResult } from '../../types';
+/**
+ * Hook that creates animated styles for drag operations.
+ *
+ * Handles both dragged item and non-dragged item styles:
+ * - Dragged item: Uses translateY for position + scale from context
+ * - Non-dragged items: Uses shiftY for displacement animation
+ *
+ * CRITICAL: This hook merges transforms into a single style because React Native
+ * doesn't merge transform arrays (when multiple styles have transforms, the last one wins).
+ *
+ * Also handles:
+ * - zIndex elevation for dragged item
+ * - Shadow opacity animation
+ * - Elevation for Android
+ *
+ * @example
+ * ```tsx
+ * const { dragAnimatedStyle } = useDragAnimatedStyle(
+ *   item.id,
+ *   isDragging,
+ *   translateY,
+ *   shiftY
+ * );
+ *
+ * <Animated.View style={[styles.container, isDragEnabled && dragAnimatedStyle]}>
+ *   ...
+ * </Animated.View>
+ * ```
+ */
+export declare function useDragAnimatedStyle(itemId: string, isDragging: SharedValue<boolean>, translateY: SharedValue<number>, shiftY: SharedValue<number>): UseDragAnimatedStyleResult;
+//# sourceMappingURL=useDragAnimatedStyle.d.ts.map

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

@@ -0,0 +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"}

package/lib/hooks/drag/useDragAnimatedStyle.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragAnimatedStyle = useDragAnimatedStyle;
+const react_native_reanimated_1 = require("react-native-reanimated");
+const DragStateContext_1 = require("../../contexts/DragStateContext");
+/**
+ * Hook that creates animated styles for drag operations.
+ *
+ * Handles both dragged item and non-dragged item styles:
+ * - Dragged item: Uses translateY for position + scale from context
+ * - Non-dragged items: Uses shiftY for displacement animation
+ *
+ * CRITICAL: This hook merges transforms into a single style because React Native
+ * doesn't merge transform arrays (when multiple styles have transforms, the last one wins).
+ *
+ * Also handles:
+ * - zIndex elevation for dragged item
+ * - Shadow opacity animation
+ * - Elevation for Android
+ *
+ * @example
+ * ```tsx
+ * const { dragAnimatedStyle } = useDragAnimatedStyle(
+ *   item.id,
+ *   isDragging,
+ *   translateY,
+ *   shiftY
+ * );
+ *
+ * <Animated.View style={[styles.container, isDragEnabled && dragAnimatedStyle]}>
+ *   ...
+ * </Animated.View>
+ * ```
+ */
+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)();
+    // 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]);
+        // Calculate scroll delta for position compensation during autoscroll
+        const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
+        // Use drag translateY + scroll compensation for dragged item, shiftY for others
+        const yOffset = isThisItemDragged
+            ? translateY.value + scrollDelta
+            : shiftY.value;
+        return {
+            transform: [
+                { translateY: yOffset },
+                { scale: isThisItemDragged ? draggedScale.value : 1 },
+            ],
+            zIndex: shouldBeElevated ? 999 : 0,
+            shadowOpacity: isThisItemDragged ? shadowOpacity : 0.1,
+            elevation: isDragging.value ? 12 : 4,
+        };
+    });
+    return { dragAnimatedStyle };
+}

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

@@ -0,0 +1,30 @@
+import type { UseDragGestureConfig, UseDragGestureCallbacks, UseDragGestureResult } from '../../types';
+/**
+ * Hook that encapsulates all drag gesture logic.
+ *
+ * Handles:
+ * - Pan gesture with long press activation
+ * - Autoscroll when dragging near viewport edges
+ * - Optional haptic feedback on drag start and drop
+ * - Scale animation for visual feedback
+ * - Drop position calculation based on drag offset
+ *
+ * Uses DragStateContext for global coordination across all items.
+ *
+ * @example
+ * ```tsx
+ * const { panGesture, isDragging, translateY } = useDragGesture(
+ *   { itemId: item.id, index, totalItems, enabled: true, containerRef },
+ *   { onReorderByDelta: handleReorder, onHapticFeedback: triggerHaptic }
+ * );
+ *
+ * // Attach to drag handle
+ * <GestureDetector gesture={panGesture}>
+ *   <Animated.View>
+ *     <DragHandleIcon />
+ *   </Animated.View>
+ * </GestureDetector>
+ * ```
+ */
+export declare function useDragGesture(config: UseDragGestureConfig, callbacks: UseDragGestureCallbacks): UseDragGestureResult;
+//# sourceMappingURL=useDragGesture.d.ts.map

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

@@ -0,0 +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"}

package/lib/hooks/drag/useDragGesture.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragGesture = useDragGesture;
+const react_1 = require("react");
+const react_native_reanimated_1 = require("react-native-reanimated");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_worklets_1 = require("react-native-worklets");
+const DragStateContext_1 = require("../../contexts/DragStateContext");
+/**
+ * Hook that encapsulates all drag gesture logic.
+ *
+ * Handles:
+ * - Pan gesture with long press activation
+ * - Autoscroll when dragging near viewport edges
+ * - Optional haptic feedback on drag start and drop
+ * - Scale animation for visual feedback
+ * - Drop position calculation based on drag offset
+ *
+ * Uses DragStateContext for global coordination across all items.
+ *
+ * @example
+ * ```tsx
+ * const { panGesture, isDragging, translateY } = useDragGesture(
+ *   { itemId: item.id, index, totalItems, enabled: true, containerRef },
+ *   { onReorderByDelta: handleReorder, onHapticFeedback: triggerHaptic }
+ * );
+ *
+ * // Attach to drag handle
+ * <GestureDetector gesture={panGesture}>
+ *   <Animated.View>
+ *     <DragHandleIcon />
+ *   </Animated.View>
+ * </GestureDetector>
+ * ```
+ */
+function useDragGesture(config, callbacks) {
+    const { itemId, index, totalItems, enabled, containerRef } = config;
+    const { onReorderByDelta, onHapticFeedback } = callbacks;
+    // Local drag state for this item's animation
+    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)();
+    // Store current values in refs for stable gesture callbacks
+    const dragContextRef = (0, react_1.useRef)({
+        index,
+        totalItems,
+        itemId,
+        onReorderByDelta,
+    });
+    // Keep ref in sync with current values
+    dragContextRef.current = {
+        index,
+        totalItems,
+        itemId,
+        onReorderByDelta,
+    };
+    // Calculate new position and call reorder callback
+    const handleDragEnd = (0, react_1.useCallback)((finalTranslateY) => {
+        const { index: currentIndex, totalItems: total, itemId: currentItemId, onReorderByDelta: reorder, } = dragContextRef.current;
+        // Use dynamically measured height + margins, or fall back to config
+        const itemHeight = measuredItemHeight.value > 0
+            ? measuredItemHeight.value + dragConfig.itemVerticalMargin
+            : dragConfig.itemHeight;
+        // Calculate how many positions to move based on drag offset
+        const positionDelta = Math.round(finalTranslateY / itemHeight);
+        // Calculate if position actually changes
+        const newIndex = Math.max(0, Math.min(total - 1, currentIndex + positionDelta));
+        const positionChanged = reorder && positionDelta !== 0 && newIndex !== currentIndex;
+        if (positionChanged) {
+            // Position changes - call reorder, let useDropCompensation handle animation
+            isDropping.value = true;
+            onHapticFeedback?.('medium');
+            reorder(currentItemId, positionDelta);
+            // Reset translate values
+            currentTranslateY.value = 0;
+            dragStartScrollOffset.value = 0;
+        }
+        else {
+            // Same position - animate back and reset state
+            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) {
+                    globalIsDragging.value = false;
+                    draggedIndex.value = -1;
+                    draggedItemId.value = '';
+                    currentTranslateY.value = 0;
+                    dragStartScrollOffset.value = 0;
+                    measuredItemHeight.value = 0;
+                    dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
+                }
+            });
+        }
+    }, [
+        measuredItemHeight,
+        dragConfig,
+        translateY,
+        globalIsDragging,
+        draggedIndex,
+        draggedItemId,
+        currentTranslateY,
+        dragStartScrollOffset,
+        dragUpdateTrigger,
+        isDropping,
+        onHapticFeedback,
+    ]);
+    // Stable haptic callback for drag start
+    const triggerLightHaptic = (0, react_1.useCallback)(() => {
+        onHapticFeedback?.('light');
+    }, [onHapticFeedback]);
+    // Pan gesture for drag-to-reorder
+    const panGesture = (0, react_1.useMemo)(() => react_native_gesture_handler_1.Gesture.Pan()
+        .activateAfterLongPress(dragConfig.longPressDuration)
+        .enabled(enabled)
+        .onStart(() => {
+        'worklet';
+        // Measure actual item height for accurate drag calculations
+        const measured = (0, react_native_reanimated_1.measure)(containerRef);
+        if (measured) {
+            measuredItemHeight.value = measured.height;
+        }
+        // Local drag state
+        isDragging.value = true;
+        // Global drag state for shift animations
+        globalIsDragging.value = true;
+        draggedIndex.value = index;
+        draggedItemId.value = itemId;
+        dragStartScrollOffset.value = scrollOffset.value;
+        currentTranslateY.value = 0;
+        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';
+        translateY.value = event.translationY;
+        currentTranslateY.value = event.translationY;
+        dragUpdateTrigger.value = dragUpdateTrigger.value + 1;
+        // Autoscroll when dragging near edges
+        const fingerInList = event.absoluteY - listTopY.value;
+        const topEdge = dragConfig.edgeThreshold;
+        const bottomEdge = visibleHeight.value - dragConfig.edgeThreshold;
+        if (fingerInList < topEdge && scrollOffset.value > 0) {
+            const speed = (0, react_native_reanimated_1.interpolate)(fingerInList, [0, topEdge], [dragConfig.maxScrollSpeed, 0], 'clamp');
+            const newOffset = Math.max(0, scrollOffset.value - speed);
+            scrollOffset.value = newOffset;
+            (0, react_native_worklets_1.scheduleOnRN)(scrollToOffset, newOffset);
+        }
+        else if (fingerInList > bottomEdge) {
+            const maxOffset = Math.max(0, contentHeight.value - visibleHeight.value);
+            if (scrollOffset.value < maxOffset) {
+                const speed = (0, react_native_reanimated_1.interpolate)(fingerInList, [bottomEdge, visibleHeight.value], [0, dragConfig.maxScrollSpeed], 'clamp');
+                const newOffset = Math.min(maxOffset, scrollOffset.value + speed);
+                scrollOffset.value = newOffset;
+                (0, react_native_worklets_1.scheduleOnRN)(scrollToOffset, newOffset);
+            }
+        }
+    })
+        .onEnd(event => {
+        'worklet';
+        isDragging.value = false;
+        // Include scroll compensation in final position calculation
+        const scrollDelta = scrollOffset.value - dragStartScrollOffset.value;
+        const finalY = event.translationY + scrollDelta;
+        draggedScale.value = (0, react_native_reanimated_1.withSpring)(1, { damping: 15, stiffness: 400 });
+        (0, react_native_worklets_1.scheduleOnRN)(handleDragEnd, finalY);
+    })
+        .onFinalize((_event, success) => {
+        'worklet';
+        if (!success) {
+            isDragging.value = false;
+            translateY.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 150 });
+            isDropping.value = false;
+            globalIsDragging.value = false;
+            draggedIndex.value = -1;
+            draggedItemId.value = '';
+            currentTranslateY.value = 0;
+            draggedScale.value = 1;
+            dragStartScrollOffset.value = 0;
+            measuredItemHeight.value = 0;
+        }
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [enabled, containerRef, triggerLightHaptic, handleDragEnd, index, itemId]);
+    return { panGesture, isDragging, translateY };
+}

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

@@ -0,0 +1,21 @@
+import type { UseDragShiftConfig, UseDragShiftResult } from '../../types';
+/**
+ * Hook that calculates shift animation for non-dragged items.
+ *
+ * When an item is being dragged, other items need to shift up or down
+ * to make room for the dragged item at its new position. This hook
+ * calculates the target shift based on:
+ * - The current drag position (from context)
+ * - The scroll delta (accounting for autoscroll)
+ * - The item's index relative to the dragged item
+ *
+ * The shift is animated with timing for smooth transitions.
+ *
+ * @example
+ * ```tsx
+ * const { shiftY } = useDragShift({ itemId: item.id, index });
+ * // Use shiftY.value in animated style
+ * ```
+ */
+export declare function useDragShift(config: UseDragShiftConfig): UseDragShiftResult;
+//# sourceMappingURL=useDragShift.d.ts.map

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

@@ -0,0 +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"}