react-native-drax 0.10.3 → 0.11.0-alpha.2

package/build/DraxList.js

@@ -22,51 +22,40 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraxList = void 0;
+const lodash_throttle_1 = __importDefault(require("lodash.throttle"));
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const DraxView_1 = require("./DraxView");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 const DraxSubprovider_1 = require("./DraxSubprovider");
-const hooks_1 = require("./hooks");
-const types_1 = require("./types");
+const DraxView_1 = require("./DraxView");
+const useDraxScrollHandler_1 = require("./hooks/useDraxScrollHandler");
 const params_1 = require("./params");
-const defaultStyles = react_native_1.StyleSheet.create({
-    draggingStyle: { opacity: 0 },
-    dragReleasedStyle: { opacity: 0.5 },
-});
+const types_1 = require("./types");
 const DraxListUnforwarded = (props, forwardedRef) => {
-    const { data, style, flatListStyle, itemStyles, renderItemContent, renderItemHoverContent, onItemDragStart, onItemDragPositionChange, onItemDragEnd, onItemReorder, viewPropsExtractor, id: idProp, reorderable: reorderableProp, onScroll: onScrollProp, itemsDraggable = true, lockItemDragsToMainAxis = false, longPressDelay = params_1.defaultListItemLongPressDelay, ...flatListProps } = props;
+    const { data, style, onItemDragStart, onItemDragPositionChange, onItemDragEnd, onItemReorder, reorderable: reorderableProp, onScroll: onScrollProp, lockItemDragsToMainAxis = false, longPressDelay = params_1.defaultListItemLongPressDelay, parentDraxViewProps, monitoringExternalDragStyle, ...flatListProps } = props;
     // Copy the value of the horizontal property for internal use.
     const horizontal = flatListProps.horizontal ?? false;
     // Get the item count for internal use.
     const itemCount = data?.length ?? 0;
     // Set a sensible default for reorderable prop.
-    const reorderable = reorderableProp ?? (onItemReorder !== undefined);
-    // The unique identifer for this list's Drax view.
-    const id = (0, hooks_1.useDraxId)(idProp);
-    // FlatList, used for scrolling.
-    const flatListRef = (0, react_1.useRef)(null);
-    // FlatList node handle, used for measuring children.
-    const nodeHandleRef = (0, react_1.useRef)(null);
-    // Container view measurements, for scrolling by percentage.
-    const containerMeasurementsRef = (0, react_1.useRef)(undefined);
-    // Content size, for scrolling by percentage.
-    const contentSizeRef = (0, react_1.useRef)(undefined);
-    // Scroll position, for Drax bounds checking and auto-scrolling.
-    const scrollPositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    const reorderable = reorderableProp ?? onItemReorder !== undefined;
     // Original index of the currently dragged list item, if any.
-    const draggedItemRef = (0, react_1.useRef)(undefined);
+    const draggedItem = (0, react_native_reanimated_1.useSharedValue)(undefined);
     // Auto-scrolling state.
     const scrollStateRef = (0, react_1.useRef)(types_1.AutoScrollDirection.None);
-    // Auto-scrolling interval.
-    const scrollIntervalRef = (0, react_1.useRef)(undefined);
     // List item measurements, for determining shift.
     const itemMeasurementsRef = (0, react_1.useRef)([]);
+    const prevItemMeasurementsRef = (0, react_1.useRef)([]);
     // Drax view registrations, for remeasuring after reorder.
     const registrationsRef = (0, react_1.useRef)([]);
     // Shift offsets.
-    const shiftsRef = (0, react_1.useRef)([]);
+    const shiftsRef = (0, react_native_reanimated_1.useSharedValue)([]);
+    const previousShiftsRef = (0, react_native_reanimated_1.useSharedValue)([]);
     // Maintain cache of reordered list indexes until data updates.
     const [originalIndexes, setOriginalIndexes] = (0, react_1.useState)([]);
     // Maintain the index the item is currently dragged to.
@@ -75,7 +64,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
     (0, react_1.useEffect)(() => {
         const itemMeasurements = itemMeasurementsRef.current;
         const registrations = registrationsRef.current;
-        const shifts = shiftsRef.current;
+        const shifts = shiftsRef.value;
         if (itemMeasurements.length > itemCount) {
             itemMeasurements.splice(itemCount - itemMeasurements.length);
         }
@@ -97,109 +86,21 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         }
         else {
             while (shifts.length < itemCount) {
-                shifts.push({
-                    targetValue: 0,
-                    animatedValue: new react_native_1.Animated.Value(0),
-                });
+                shifts.push({ x: 0, y: 0 });
             }
         }
+        shiftsRef.value = shifts;
     }, [itemCount]);
     // Clear reorders when data changes.
     (0, react_1.useLayoutEffect)(() => {
         // console.log('clear reorders');
         setOriginalIndexes(data ? [...Array(data.length).keys()] : []);
     }, [data]);
-    // Apply the reorder cache to the data.
-    const reorderedData = (0, react_1.useMemo)(() => {
-        // console.log('refresh sorted data');
-        if (!id || !data) {
-            return null;
-        }
-        if (data.length !== originalIndexes.length) {
-            return data;
-        }
-        return originalIndexes.map((index) => data[index]);
-    }, [id, data, originalIndexes]);
-    // Get shift transform for list item at index.
-    const getShiftTransform = (0, react_1.useCallback)((index) => {
-        const shift = shiftsRef.current[index]?.animatedValue ?? 0;
-        return horizontal
-            ? [{ translateX: shift }]
-            : [{ translateY: shift }];
-    }, [horizontal]);
-    // Set the currently dragged list item.
-    const setDraggedItem = (0, react_1.useCallback)((originalIndex) => {
-        draggedItemRef.current = originalIndex;
-    }, []);
-    // Clear the currently dragged list item.
-    const resetDraggedItem = (0, react_1.useCallback)(() => {
-        draggedItemRef.current = undefined;
-    }, []);
-    // Drax view renderItem wrapper.
-    const renderItem = (0, react_1.useCallback)((info) => {
-        const { index, item } = info;
-        const originalIndex = originalIndexes[index];
-        const { style: itemStyle, draggingStyle = defaultStyles.draggingStyle, dragReleasedStyle = defaultStyles.dragReleasedStyle, ...otherStyleProps } = itemStyles ?? {};
-        return (react_1.default.createElement(DraxView_1.DraxView, { style: [itemStyle, { transform: getShiftTransform(originalIndex) }], draggingStyle: draggingStyle, dragReleasedStyle: dragReleasedStyle, ...otherStyleProps, longPressDelay: longPressDelay, lockDragXPosition: lockItemDragsToMainAxis && !horizontal, lockDragYPosition: lockItemDragsToMainAxis && horizontal, draggable: itemsDraggable, payload: { index, originalIndex }, ...(viewPropsExtractor?.(item) ?? {}), onDragEnd: resetDraggedItem, onDragDrop: resetDraggedItem, onMeasure: (measurements) => {
-                if (originalIndex !== undefined) {
-                    // console.log(`measuring [${index}, ${originalIndex}]: (${measurements?.x}, ${measurements?.y})`);
-                    itemMeasurementsRef.current[originalIndex] = measurements;
-                }
-            }, registration: (registration) => {
-                if (registration && originalIndex !== undefined) {
-                    // console.log(`registering [${index}, ${originalIndex}], ${registration.id}`);
-                    registrationsRef.current[originalIndex] = registration;
-                    registration.measure();
-                }
-            }, renderContent: (contentProps) => renderItemContent(info, contentProps), renderHoverContent: renderItemHoverContent
-                && ((hoverContentProps) => renderItemHoverContent(info, hoverContentProps)) }));
-    }, [
-        originalIndexes,
-        itemStyles,
-        viewPropsExtractor,
-        getShiftTransform,
-        resetDraggedItem,
-        itemsDraggable,
-        renderItemContent,
-        renderItemHoverContent,
-        longPressDelay,
-        lockItemDragsToMainAxis,
-        horizontal,
-    ]);
-    // Track the size of the container view.
-    const onMeasureContainer = (0, react_1.useCallback)((measurements) => {
-        containerMeasurementsRef.current = measurements;
-    }, []);
-    // Track the size of the content.
-    const onContentSizeChange = (0, react_1.useCallback)((width, height) => {
-        contentSizeRef.current = { x: width, y: height };
-    }, []);
-    // Set FlatList and node handle refs.
-    const setFlatListRefs = (0, react_1.useCallback)((ref) => {
-        flatListRef.current = ref;
-        nodeHandleRef.current = ref && (0, react_native_1.findNodeHandle)(ref);
-        if (forwardedRef) {
-            if (typeof forwardedRef === 'function') {
-                forwardedRef(ref);
-            }
-            else {
-                // eslint-disable-next-line no-param-reassign
-                forwardedRef.current = ref;
-            }
-        }
-    }, [forwardedRef]);
-    // Update tracked scroll position when list is scrolled.
-    const onScroll = (0, react_1.useCallback)((event) => {
-        const { nativeEvent: { contentOffset } } = event;
-        scrollPositionRef.current = { ...contentOffset };
-        onScrollProp?.(event);
-    }, [onScrollProp]);
     // Handle auto-scrolling on interval.
     const doScroll = (0, react_1.useCallback)(() => {
-        const flatList = flatListRef.current;
         const containerMeasurements = containerMeasurementsRef.current;
         const contentSize = contentSizeRef.current;
-        if (!flatList || !containerMeasurements || !contentSize) {
+        if (!flatListRef.current || !containerMeasurements || !contentSize) {
             return;
         }
         let containerLength;
@@ -208,12 +109,12 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         if (horizontal) {
             containerLength = containerMeasurements.width;
             contentLength = contentSize.x;
-            prevOffset = scrollPositionRef.current.x;
+            prevOffset = scrollPosition.value.x;
         }
         else {
             containerLength = containerMeasurements.height;
             contentLength = contentSize.y;
-            prevOffset = scrollPositionRef.current.y;
+            prevOffset = scrollPosition.value.y;
         }
         const jumpLength = containerLength * 0.2;
         let offset;
@@ -229,63 +130,126 @@ const DraxListUnforwarded = (props, forwardedRef) => {
             }
         }
         if (offset !== undefined) {
-            flatList.scrollToOffset({ offset });
-            flatList.flashScrollIndicators();
+            flatListRef.current.scrollToOffset({ offset });
+            flatListRef.current.flashScrollIndicators();
         }
     }, [horizontal]);
-    // Start the auto-scrolling interval.
-    const startScroll = (0, react_1.useCallback)(() => {
-        if (scrollIntervalRef.current) {
-            return;
+    const { id, containerMeasurementsRef, contentSizeRef, onContentSizeChange, onMeasureContainer, onScroll, scrollRef: flatListRef, scrollPosition, setScrollRefs, startScroll, stopScroll, } = (0, useDraxScrollHandler_1.useDraxScrollHandler)({
+        idProp: parentDraxViewProps?.id,
+        onContentSizeChangeProp: props.onContentSizeChange,
+        onScrollProp,
+        forwardedRef,
+        doScroll,
+    });
+    // Apply the reorder cache to the data.
+    const reorderedData = (0, react_1.useMemo)(() => {
+        // console.log('refresh sorted data');
+        if (!id || !data) {
+            return null;
         }
-        doScroll();
-        scrollIntervalRef.current = setInterval(doScroll, 250);
-    }, [doScroll]);
-    // Stop the auto-scrolling interval.
-    const stopScroll = (0, react_1.useCallback)(() => {
-        if (scrollIntervalRef.current) {
-            clearInterval(scrollIntervalRef.current);
-            scrollIntervalRef.current = undefined;
+        if (data.length !== originalIndexes.length) {
+            return data;
         }
+        return originalIndexes.map(index => data[index]).filter(Boolean);
+    }, [id, data, originalIndexes]);
+    // Set the currently dragged list item.
+    const setDraggedItem = (0, react_1.useCallback)((originalIndex) => {
+        draggedItem.value = originalIndex;
     }, []);
-    // If startScroll changes, refresh our interval.
-    (0, react_1.useEffect)(() => {
-        if (scrollIntervalRef.current) {
-            stopScroll();
-            startScroll();
-        }
-    }, [stopScroll, startScroll]);
+    // Clear the currently dragged list item.
+    const resetDraggedItem = (0, react_1.useCallback)(() => {
+        draggedItem.value = undefined;
+    }, []);
+    // Drax view renderItem wrapper.
+    const renderItem = (0, react_1.useCallback)((info) => {
+        const { index, item } = info;
+        const originalIndex = originalIndexes[index];
+        const itemProps = {
+            index,
+            item,
+            originalIndex,
+            horizontal,
+            longPressDelay,
+            lockItemDragsToMainAxis,
+            draggedItem,
+            shiftsRef,
+            itemMeasurementsRef,
+            prevItemMeasurementsRef,
+            resetDraggedItem,
+            keyExtractor: props?.keyExtractor,
+            previousShiftsRef,
+            registrationsRef,
+            info,
+            data,
+        };
+        return props?.renderItem?.(info, itemProps);
+    }, [
+        originalIndexes,
+        resetDraggedItem,
+        longPressDelay,
+        lockItemDragsToMainAxis,
+        horizontal,
+        draggedItem,
+        shiftsRef,
+        itemMeasurementsRef,
+        prevItemMeasurementsRef,
+        previousShiftsRef,
+        registrationsRef,
+        props?.keyExtractor,
+        data,
+    ]);
     // Reset all shift values.
     const resetShifts = (0, react_1.useCallback)(() => {
-        shiftsRef.current.forEach((shift) => {
-            // eslint-disable-next-line no-param-reassign
-            shift.targetValue = 0;
-            shift.animatedValue.setValue(0);
-        });
+        previousShiftsRef.value = shiftsRef.value;
+        prevItemMeasurementsRef.current = [...itemMeasurementsRef.current];
+        shiftsRef.value = shiftsRef.value.map(() => ({ x: 0, y: 0 }));
     }, []);
     // Update shift values in response to a drag.
-    const updateShifts = (0, react_1.useCallback)(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex }) => {
-        const { width = 50, height = 50 } = itemMeasurementsRef.current[fromOriginalIndex] ?? {};
-        const offset = horizontal ? width : height;
-        originalIndexes.forEach((originalIndex, index) => {
-            const shift = shiftsRef.current[originalIndex];
-            let newTargetValue = 0;
-            if (index > fromIndex && index <= toIndex) {
-                newTargetValue = -offset;
+    const updateShifts = (0, react_1.useCallback)(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex }, dragged) => {
+        const isForward = fromIndex < toIndex;
+        shiftsRef.value = originalIndexes.map(index => {
+            // Don't shift the dragged item
+            if (index === fromIndex)
+                return { x: 0, y: 0 };
+            // Reset shift if item is no longer in the affected range
+            const shouldShift = isForward
+                ? index > fromIndex && index <= toIndex
+                : index >= toIndex && index < fromIndex;
+            if (!shouldShift)
+                return { x: 0, y: 0 };
+            // Get measurements for current item and the item we're shifting to
+            const currentMeasurements = itemMeasurementsRef.current[index];
+            const draggedMeasurements = itemMeasurementsRef.current[fromOriginalIndex] ||
+                /**  If no measurements, it must be an external dragged item */
+                dragged.data.hoverMeasurements;
+            const targetIndex = isForward ? index - 1 : index + 1;
+            const targetMeasurements = itemMeasurementsRef.current[targetIndex] ||
+                /** If no measurements, it must be last item. Fallback to list contentSize */
+                contentSizeRef.current;
+            if (!currentMeasurements || !draggedMeasurements || !targetMeasurements) {
+                return { x: 0, y: 0 };
+            }
+            // Calculate gaps between items in both directions
+            const xGap = isForward
+                ? currentMeasurements.x - (targetMeasurements.x + targetMeasurements.width)
+                : targetMeasurements.x - (currentMeasurements.x + currentMeasurements.width);
+            const yGap = isForward
+                ? currentMeasurements.y - (targetMeasurements.y + targetMeasurements.height)
+                : targetMeasurements.y - (currentMeasurements.y + currentMeasurements.height);
+            // Calculated new shifts
+            const x = isForward ? -(draggedMeasurements.width + xGap) : draggedMeasurements.width + xGap;
+            const y = isForward ? -(draggedMeasurements.height + yGap) : draggedMeasurements.height + yGap;
+            if ((props?.numColumns || 1) > 1) {
+                return { x, y };
             }
-            else if (index < fromIndex && index >= toIndex) {
-                newTargetValue = offset;
+            if (horizontal) {
+                return { x, y: 0 };
             }
-            if (shift.targetValue !== newTargetValue) {
-                shift.targetValue = newTargetValue;
-                react_native_1.Animated.timing(shift.animatedValue, {
-                    duration: 200,
-                    toValue: newTargetValue,
-                    useNativeDriver: true,
-                }).start();
+            else {
+                return { x: 0, y };
             }
         });
-    }, [originalIndexes, horizontal]);
+    }, [originalIndexes]);
     // Calculate absolute position of list item for snapback.
     const calculateSnapbackTarget = (0, react_1.useCallback)(({ index: fromIndex, originalIndex: fromOriginalIndex }, { index: toIndex, originalIndex: toOriginalIndex }) => {
         const containerMeasurements = containerMeasurementsRef.current;
@@ -300,37 +264,51 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                     // toIndex + 1 is in the list. We can measure the position of the next item.
                     const nextMeasurements = itemMeasurements[originalIndexes[nextIndex]];
                     if (nextMeasurements) {
-                        nextPos = { x: nextMeasurements.x, y: nextMeasurements.y };
+                        nextPos = {
+                            x: nextMeasurements.x,
+                            y: nextMeasurements.y,
+                        };
                     }
                 }
                 else {
                     // toIndex is the last item of the list. We can use the list content size.
                     const contentSize = contentSizeRef.current;
                     if (contentSize) {
-                        nextPos = horizontal
-                            ? { x: contentSize.x, y: 0 }
-                            : { x: 0, y: contentSize.y };
+                        nextPos = horizontal ? { x: contentSize.x, y: 0 } : { x: 0, y: contentSize.y };
                     }
                 }
                 const fromMeasurements = itemMeasurements[fromOriginalIndex];
                 if (nextPos && fromMeasurements) {
+                    const flattenedStyles = react_native_1.StyleSheet.flatten(flatListProps.contentContainerStyle) || {};
+                    //@ts-ignore
+                    const rowGap = flattenedStyles.rowGap ?? flattenedStyles.gap ?? 0;
+                    //@ts-ignore
+                    const columnGap = flattenedStyles.columnGap ?? flattenedStyles.gap ?? 0;
                     targetPos = horizontal
-                        ? { x: nextPos.x - fromMeasurements.width, y: nextPos.y }
-                        : { x: nextPos.x, y: nextPos.y - fromMeasurements.height };
+                        ? {
+                            x: nextPos.x - fromMeasurements.width - rowGap,
+                            y: nextPos.y,
+                        }
+                        : {
+                            x: nextPos.x,
+                            y: nextPos.y - fromMeasurements.height - columnGap,
+                        };
                 }
             }
             else {
                 // Target pos(toIndex)
                 const toMeasurements = itemMeasurements[toOriginalIndex];
                 if (toMeasurements) {
-                    targetPos = { x: toMeasurements.x, y: toMeasurements.y };
+                    targetPos = {
+                        x: toMeasurements.x,
+                        y: toMeasurements.y,
+                    };
                 }
             }
             if (targetPos) {
-                const scrollPosition = scrollPositionRef.current;
                 return {
-                    x: containerMeasurements.x - scrollPosition.x + targetPos.x,
-                    y: containerMeasurements.y - scrollPosition.y + targetPos.y,
+                    x: containerMeasurements.x - scrollPosition.value.x + targetPos.x,
+                    y: containerMeasurements.y - scrollPosition.value.y + targetPos.y,
                 };
             }
         }
@@ -342,16 +320,24 @@ const DraxListUnforwarded = (props, forwardedRef) => {
         scrollStateRef.current = types_1.AutoScrollDirection.None;
         stopScroll();
         const { dragged, receiver } = eventData;
-        // Check if we need to handle this drag end.
-        if (reorderable && dragged.parentId === id) {
-            // Determine list indexes of dragged/received items, if any.
-            const fromPayload = dragged.payload;
-            const toPayload = receiver?.parentId === id
-                ? receiver.payload
-                : undefined;
+        const isExternalDrag = dragged.parentId !== id || typeof dragged.payload.originalIndex !== 'number';
+        // First, check if we need to shift items.
+        if (reorderable) {
+            const fromPayload = {
+                /**
+                 * Indexing should start from zero and stop at `itemCount - 1`, but
+                 * we're also handling for external drag by adding a fake item index,
+                 * resulting to `itemCount`.
+                 */
+                index: !isExternalDrag ? dragged.payload.index : itemCount,
+                originalIndex: !isExternalDrag ? dragged.payload.originalIndex : itemCount,
+            };
+            const toPayload = receiver?.parentId === id ? receiver.payload : undefined;
             const { index: fromIndex, originalIndex: fromOriginalIndex } = fromPayload;
             const { index: toIndex, originalIndex: toOriginalIndex } = toPayload ?? {};
-            const toItem = (toOriginalIndex !== undefined) ? data?.[toOriginalIndex] : undefined;
+            const toItem = toOriginalIndex !== undefined ? data?.[toOriginalIndex] : undefined;
+            const fromItem = data?.[fromOriginalIndex] || dragged.payload;
+            throttledSetIsExternalDrag(false);
             // Reset all shifts and call callback, regardless of whether toPayload exists.
             resetShifts();
             if (totalDragEnd) {
@@ -361,7 +347,8 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                     toItem,
                     cancelled: (0, types_1.isWithCancelledFlag)(eventData) ? eventData.cancelled : false,
                     index: fromIndex,
-                    item: data?.[fromOriginalIndex],
+                    item: fromItem,
+                    isExternalDrag,
                 });
             }
             // Reset currently dragged over position index to undefined.
@@ -370,9 +357,10 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                     onItemDragPositionChange?.({
                         ...eventData,
                         index: fromIndex,
-                        item: data?.[fromOriginalIndex],
+                        item: fromItem,
                         toIndex: undefined,
                         previousIndex: draggedToIndex.current,
+                        isExternalDrag,
                     });
                 }
                 draggedToIndex.current = undefined;
@@ -387,9 +375,10 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                     setOriginalIndexes(newOriginalIndexes);
                     onItemReorder?.({
                         fromIndex,
-                        fromItem: data[fromOriginalIndex],
+                        fromItem,
                         toIndex: toIndex,
-                        toItem: data[toOriginalIndex],
+                        toItem,
+                        isExternalDrag,
                     });
                 }
                 return snapbackTarget;
@@ -410,6 +399,7 @@ const DraxListUnforwarded = (props, forwardedRef) => {
     ]);
     // Monitor drag starts to handle callbacks.
     const onMonitorDragStart = (0, react_1.useCallback)((eventData) => {
+        parentDraxViewProps?.onMonitorDragStart?.(eventData);
         const { dragged } = eventData;
         // First, check if we need to do anything.
         if (reorderable && dragged.parentId === id) {
@@ -420,26 +410,34 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                 ...eventData,
                 index,
                 item: data?.[originalIndex],
+                isExternalDrag: false,
             });
         }
-    }, [
-        id,
-        reorderable,
-        data,
-        setDraggedItem,
-        onItemDragStart,
-    ]);
+    }, [id, reorderable, data, setDraggedItem, onItemDragStart]);
     // Monitor drags to react with item shifts and auto-scrolling.
     const onMonitorDragOver = (0, react_1.useCallback)((eventData) => {
+        parentDraxViewProps?.onMonitorDragOver?.(eventData);
         const { dragged, receiver, monitorOffsetRatio } = eventData;
+        const isExternalDrag = dragged.parentId !== id || typeof dragged.payload.originalIndex !== 'number';
         // First, check if we need to shift items.
-        if (reorderable && dragged.parentId === id) {
-            // One of our list items is being dragged.
-            const fromPayload = dragged.payload;
+        if (reorderable) {
+            const fromPayload = {
+                /**
+                 * Indexing should start from zero and stop at `itemCount - 1`, but
+                 * we're also handling for external drag by adding a fake item index,
+                 * resulting to `itemCount`.
+                 */
+                index: !isExternalDrag ? dragged.payload.index : itemCount,
+                originalIndex: !isExternalDrag ? dragged.payload.originalIndex : itemCount,
+            };
+            if (typeof draggedItem.value !== 'number') {
+                /** DraxList is receiving external drag  */
+                setDraggedItem(itemCount);
+            }
+            monitoringExternalDragStyle && draggedItem.value === itemCount && throttledSetIsExternalDrag(true);
+            const fromItem = data?.[fromPayload.originalIndex] || dragged.payload;
             // Find its current position index in the list, if any.
-            const toPayload = receiver?.parentId === id
-                ? receiver.payload
-                : undefined;
+            const toPayload = receiver?.parentId === id ? receiver.payload : undefined;
             // Check and update currently dragged over position index.
             const toIndex = toPayload?.index;
             if (toIndex !== draggedToIndex.current) {
@@ -447,13 +445,14 @@ const DraxListUnforwarded = (props, forwardedRef) => {
                     ...eventData,
                     toIndex,
                     index: fromPayload.index,
-                    item: data?.[fromPayload.originalIndex],
+                    item: fromItem,
                     previousIndex: draggedToIndex.current,
+                    isExternalDrag,
                 });
                 draggedToIndex.current = toIndex;
             }
             // Update shift transforms for items in the list.
-            updateShifts(fromPayload, toPayload ?? fromPayload);
+            updateShifts(fromPayload, toPayload ?? fromPayload, dragged);
         }
         // Next, see if we need to auto-scroll.
         const ratio = horizontal ? monitorOffsetRatio.x : monitorOffsetRatio.y;
@@ -470,28 +469,44 @@ const DraxListUnforwarded = (props, forwardedRef) => {
             }
             startScroll();
         }
-    }, [
-        id,
-        reorderable,
-        data,
-        updateShifts,
-        horizontal,
-        stopScroll,
-        startScroll,
-        onItemDragPositionChange,
-    ]);
+    }, [id, reorderable, data, updateShifts, horizontal, stopScroll, startScroll, onItemDragPositionChange]);
     // Monitor drag exits to stop scrolling, update shifts, and update draggedToIndex.
-    const onMonitorDragExit = (0, react_1.useCallback)((eventData) => handleInternalDragEnd(eventData, false), [handleInternalDragEnd]);
+    const onMonitorDragExit = (0, react_1.useCallback)((eventData) => {
+        handleInternalDragEnd(eventData, false);
+        parentDraxViewProps?.onMonitorDragExit?.(eventData);
+    }, [handleInternalDragEnd]);
     /*
      * Monitor drag ends to stop scrolling, update shifts, and possibly reorder.
      * This addresses the Android case where if we drag a list item and auto-scroll
      * too far, the drag gets cancelled.
      */
-    const onMonitorDragEnd = (0, react_1.useCallback)((eventData) => handleInternalDragEnd(eventData, true), [handleInternalDragEnd]);
+    const onMonitorDragEnd = (0, react_1.useCallback)((eventData) => {
+        const defaultSnapbackTarget = handleInternalDragEnd(eventData, true);
+        const providedSnapTarget = parentDraxViewProps?.onMonitorDragEnd?.(eventData);
+        resetDraggedItem();
+        return providedSnapTarget ?? defaultSnapbackTarget;
+    }, [handleInternalDragEnd]);
     // Monitor drag drops to stop scrolling, update shifts, and possibly reorder.
-    const onMonitorDragDrop = (0, react_1.useCallback)((eventData) => handleInternalDragEnd(eventData, true), [handleInternalDragEnd]);
-    return (react_1.default.createElement(DraxView_1.DraxView, { id: id, style: style, scrollPositionRef: scrollPositionRef, onMeasure: onMeasureContainer, onMonitorDragStart: onMonitorDragStart, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: onMonitorDragExit, onMonitorDragEnd: onMonitorDragEnd, onMonitorDragDrop: onMonitorDragDrop },
-        react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: { id, nodeHandleRef } },
-            react_1.default.createElement(react_native_1.FlatList, { ...flatListProps, style: flatListStyle, ref: setFlatListRefs, renderItem: renderItem, onScroll: onScroll, onContentSizeChange: onContentSizeChange, data: reorderedData }))));
+    const onMonitorDragDrop = (0, react_1.useCallback)((eventData) => {
+        const defaultSnapbackTarget = handleInternalDragEnd(eventData, true);
+        const providedSnapTarget = parentDraxViewProps?.onMonitorDragDrop?.(eventData);
+        draggedItem.value === itemCount && resetDraggedItem();
+        return providedSnapTarget ?? defaultSnapbackTarget;
+    }, [handleInternalDragEnd]);
+    const [isExternalDrag, setIsExternalDrag] = (0, react_1.useState)(false);
+    const throttledSetIsExternalDrag = (0, react_1.useMemo)(() => (0, lodash_throttle_1.default)((position) => {
+        setIsExternalDrag(position);
+    }, 300), []);
+    return (react_1.default.createElement(DraxView_1.DraxView, { ...parentDraxViewProps, style: [parentDraxViewProps?.style, isExternalDrag && monitoringExternalDragStyle], id: id, scrollPosition: scrollPosition, onMeasure: event => {
+            parentDraxViewProps?.onMeasure?.(event);
+            return onMeasureContainer(event);
+        }, onMonitorDragStart: onMonitorDragStart, onMonitorDragOver: onMonitorDragOver, onMonitorDragExit: onMonitorDragExit, onMonitorDragEnd: onMonitorDragEnd, onMonitorDragDrop: onMonitorDragDrop },
+        react_1.default.createElement(DraxSubprovider_1.DraxSubprovider, { parent: {
+                id,
+                viewRef: {
+                    current: flatListRef?.current?.getNativeScrollRef?.(),
+                },
+            } },
+            react_1.default.createElement(react_native_reanimated_1.default.FlatList, { ...flatListProps, style: style, ref: setScrollRefs, renderItem: renderItem, onScroll: onScroll, onContentSizeChange: onContentSizeChange, data: reorderedData }))));
 };
 exports.DraxList = (0, react_1.forwardRef)(DraxListUnforwarded);

package/build/DraxListItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DraxListItemProps, DraxViewProps } from './types';
+declare const RenderItemComponent: <T extends unknown>({ itemProps: { index, item, originalIndex, horizontal, lockItemDragsToMainAxis, draggedItem, shiftsRef, itemMeasurementsRef, prevItemMeasurementsRef, resetDraggedItem, keyExtractor, previousShiftsRef, registrationsRef, data, }, ...draxViewProps }: {
+    itemProps: DraxListItemProps<T>;
+} & DraxViewProps) => React.JSX.Element;
+export declare const DraxListItem: typeof RenderItemComponent;
+export {};