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

package/build/hooks/useDraxRegistry.js

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDraxRegistry = void 0;
 const react_1 = require("react");
-const react_native_1 = require("react-native");
-const useDraxState_1 = require("./useDraxState");
-const types_1 = require("../types");
+const react_native_reanimated_1 = require("react-native-reanimated");
 const math_1 = require("../math");
 const params_1 = require("../params");
+const types_1 = require("../types");
+const useDraxState_1 = require("./useDraxState");
 /*
  * The registry functions mutate their registry parameter, so let's
  * disable the "no parameter reassignment" rule for the entire file:
  */
-/* eslint-disable no-param-reassign */
 /** Create an initial empty Drax registry. */
 const createInitialRegistry = (stateDispatch) => ({
     stateDispatch,
@@ -26,9 +25,10 @@ const createInitialProtocol = () => ({
     draggable: false,
     receptive: false,
     monitoring: false,
+    hoverPosition: params_1.INITIAL_REANIMATED_POSITION,
 });
 /** Get data for a registered view by its id. */
-const getViewDataFromRegistry = (registry, id) => ((id && registry.viewIds.includes(id)) ? registry.viewDataById[id] : undefined);
+const getViewDataFromRegistry = (registry, id) => id && registry.viewIds.includes(id) ? registry.viewDataById[id] : undefined;
 /** Get absolute measurements for a registered view, incorporating parents and clipping. */
 const getAbsoluteMeasurementsForViewFromRegistry = (registry, { measurements, parentId }, clipped = false) => {
     if (!measurements) {
@@ -48,9 +48,12 @@ const getAbsoluteMeasurementsForViewFromRegistry = (registry, { measurements, pa
         // console.log(`Failed to get absolute measurements for view: no absolute measurements for parent id ${parentId}`);
         return undefined;
     }
-    const { x, y, width, height, } = measurements;
-    const { x: parentX, y: parentY, } = parentMeasurements;
-    const { x: offsetX, y: offsetY } = parentViewData.scrollPositionRef?.current || { x: 0, y: 0 };
+    const { x, y, width, height } = measurements;
+    const { x: parentX, y: parentY } = parentMeasurements;
+    const { x: offsetX, y: offsetY } = parentViewData.protocol.scrollPositionValue || {
+        x: 0,
+        y: 0,
+    };
     const abs = {
         width,
         height,
@@ -73,7 +76,7 @@ const getAbsoluteViewDataFromRegistry = (registry, id) => {
     }
     return {
         ...viewData,
-        measurements: viewData.measurements,
+        measurements: viewData.measurements, // It must exist, since absoluteMeasurements is defined.
         absoluteMeasurements,
     };
 };
@@ -92,8 +95,9 @@ const getAbsoluteViewEntryFromRegistry = (registry, id) => {
 const findMonitorsAndReceiverInRegistry = (registry, absolutePosition, excludeViewId) => {
     const monitors = [];
     let receiver;
+    const excludedView = getViewDataFromRegistry(registry, excludeViewId);
     // console.log(`find monitors and receiver for absolute position (${absolutePosition.x}, ${absolutePosition.y})`);
-    registry.viewIds.forEach((targetId) => {
+    registry.viewIds.forEach(targetId => {
         // console.log(`checking target id ${targetId}`);
         if (targetId === excludeViewId) {
             // Don't consider the excluded view.
@@ -125,7 +129,7 @@ const findMonitorsAndReceiverInRegistry = (registry, absolutePosition, excludeVi
                 id: targetId,
                 data: {
                     ...target,
-                    measurements: target.measurements,
+                    measurements: target.measurements, // It must exist, since absoluteMeasurements is defined.
                     absoluteMeasurements,
                 },
                 ...(0, math_1.getRelativePosition)(absolutePosition, absoluteMeasurements),
@@ -135,7 +139,18 @@ const findMonitorsAndReceiverInRegistry = (registry, absolutePosition, excludeVi
                 monitors.push(foundView);
                 // console.log('it\'s a monitor');
             }
-            if (receptive) {
+            const excludedAbsoluteViewData = excludedView && getAbsoluteMeasurementsForViewFromRegistry(registry, excludedView, true);
+            const targetDynamicReceptiveCondition = !target.protocol?.dynamicReceptiveCallback ||
+                (excludedAbsoluteViewData &&
+                    target.protocol?.dynamicReceptiveCallback({
+                        foundView,
+                        excludedView: {
+                            ...excludedView,
+                            measurements: excludedView.measurements, // It must exist, since excludedAbsoluteViewData is defined.
+                            absoluteMeasurements: excludedAbsoluteViewData,
+                        },
+                    }));
+            if (receptive && targetDynamicReceptiveCondition) {
                 // It's the latest receiver found.
                 receiver = foundView;
                 // console.log('it\'s a receiver');
@@ -176,56 +191,33 @@ const getTrackingReceiverFromRegistry = (registry) => {
     return undefined;
 };
 /** Get ids for all currently monitoring views. */
-const getTrackingMonitorIdsFromRegistry = (registry) => (registry.drag?.monitorIds || []);
+const getTrackingMonitorIdsFromRegistry = (registry) => registry.drag?.monitorIds || [];
 /** Get id and data for all currently monitoring views. */
-const getTrackingMonitorsFromRegistry = (registry) => (registry.drag?.monitorIds
-    .map((id) => getAbsoluteViewEntryFromRegistry(registry, id))
-    .filter((value) => !!value)
-    || []);
+const getTrackingMonitorsFromRegistry = (registry) => registry.drag?.monitorIds
+    .map(id => getAbsoluteViewEntryFromRegistry(registry, id))
+    .filter((value) => !!value) || [];
 /** Get the array of hover items for dragged and released views */
-const getHoverItemsFromRegistry = (registry) => {
-    const hoverItems = [];
-    // Find all released view hover items, in order from oldest to newest.
-    registry.releaseIds.forEach((releaseId) => {
-        const release = registry.releaseById[releaseId];
-        if (release) {
-            const { viewId, hoverPosition } = release;
-            const releasedData = getAbsoluteViewDataFromRegistry(registry, viewId);
-            if (releasedData) {
-                const { protocol: { internalRenderHoverView }, measurements } = releasedData;
-                if (internalRenderHoverView) {
-                    hoverItems.push({
-                        hoverPosition,
-                        internalRenderHoverView,
-                        key: releaseId,
-                        id: viewId,
-                        dimensions: (0, math_1.extractDimensions)(measurements),
-                    });
-                }
-            }
+const getHoverItemsFromRegistry = (registry, viewIds) => {
+    return viewIds.map(viewId => {
+        const releaseData = Object.values(registry.releaseById).find(release => release.viewId === viewId);
+        const scrollPosition = releaseData?.scrollPosition;
+        const scrollPositionOffset = releaseData?.scrollPositionOffset;
+        const viewData = getViewDataFromRegistry(registry, viewId);
+        if (viewData) {
+            return {
+                id: viewId,
+                ...viewData,
+                scrollPosition,
+                scrollPositionOffset,
+            };
         }
     });
-    // Find the currently dragged hover item.
-    const { id: draggedId, data: draggedData } = getTrackingDraggedFromRegistry(registry) ?? {};
-    if (draggedData) {
-        const { protocol: { internalRenderHoverView }, measurements } = draggedData;
-        if (draggedId && internalRenderHoverView) {
-            hoverItems.push({
-                internalRenderHoverView,
-                key: `dragged-hover-${draggedId}`,
-                id: draggedId,
-                hoverPosition: registry.drag.hoverPosition,
-                dimensions: (0, math_1.extractDimensions)(measurements),
-            });
-        }
-    }
-    return hoverItems;
 };
 /**
  * Get the absolute position of a drag already in progress from touch
  * coordinates within the immediate parent view of the dragged view.
  */
-const getDragPositionDataFromRegistry = (registry, { parentPosition, draggedMeasurements, lockXPosition = false, lockYPosition = false, }) => {
+const getDragPositionDataFromRegistry = (registry, { parentPosition, draggedMeasurements, lockXPosition = false, lockYPosition = false }) => {
     if (!registry.drag) {
         return undefined;
     }
@@ -234,10 +226,10 @@ const getDragPositionDataFromRegistry = (registry, { parentPosition, draggedMeas
      *   absolute coordinates of drag start
      *   + translation offset of drag
      */
-    const { absoluteStartPosition, parentStartPosition, } = registry.drag;
+    const { absoluteStartPosition, parentStartPosition } = registry.drag;
     const dragTranslation = {
-        x: lockXPosition ? 0 : (parentPosition.x - parentStartPosition.x),
-        y: lockYPosition ? 0 : (parentPosition.y - parentStartPosition.y),
+        x: lockXPosition ? 0 : parentPosition.x - parentStartPosition.x,
+        y: lockYPosition ? 0 : parentPosition.y - parentStartPosition.y,
     };
     const dragTranslationRatio = {
         x: dragTranslation.x / draggedMeasurements.width,
@@ -254,7 +246,7 @@ const getDragPositionDataFromRegistry = (registry, { parentPosition, draggedMeas
     };
 };
 /** Register a Drax view. */
-const registerViewInRegistry = (registry, { id, parentId, scrollPositionRef }) => {
+const registerViewInRegistry = (registry, { id, parentId, scrollPosition }) => {
     const { viewIds, viewDataById, stateDispatch } = registry;
     // Make sure not to duplicate registered view id.
     if (viewIds.indexOf(id) < 0) {
@@ -265,7 +257,7 @@ const registerViewInRegistry = (registry, { id, parentId, scrollPositionRef }) =
     // console.log(`Register view ${id} with parent ${parentId}`);
     viewDataById[id] = {
         parentId,
-        scrollPositionRef,
+        scrollPosition,
         protocol: existingData?.protocol ?? createInitialProtocol(),
         measurements: existingData?.measurements, // Starts undefined.
     };
@@ -286,8 +278,16 @@ const updateViewMeasurementsInRegistry = (registry, { id, measurements }) => {
         registry.viewDataById[id].measurements = measurements;
     }
 };
+/** Update a view's measurements. */
+const updateHoverViewMeasurementsInRegistry = (registry, { id, measurements }) => {
+    const existingData = getViewDataFromRegistry(registry, id);
+    if (existingData) {
+        // console.log(`Update ${id} measurements: @(${measurements?.x}, ${measurements?.y}) ${measurements?.width}x${measurements?.height}`);
+        registry.viewDataById[id].hoverMeasurements = measurements;
+    }
+};
 /** Reset the receiver in drag tracking, if any. */
-const resetReceiverInRegistry = ({ drag, stateDispatch }) => {
+const resetReceiverInRegistry = ({ drag }) => {
     if (!drag) {
         return;
     }
@@ -298,109 +298,156 @@ const resetReceiverInRegistry = ({ drag, stateDispatch }) => {
     }
     // console.log('clearing receiver');
     drag.receiver = undefined;
-    stateDispatch(useDraxState_1.actions.updateTrackingStatus({ receiving: false }));
-    stateDispatch(useDraxState_1.actions.updateViewState({
-        id: draggedId,
-        viewStateUpdate: {
-            draggingOverReceiver: undefined,
-        },
-    }));
-    stateDispatch(useDraxState_1.actions.updateViewState({
-        id: receiver.receiverId,
-        viewStateUpdate: {
-            receiveStatus: types_1.DraxViewReceiveStatus.Inactive,
-            receiveOffset: undefined,
-            receiveOffsetRatio: undefined,
-            receivingDrag: undefined,
-        },
-    }));
+    // stateDispatch(actions.updateTrackingStatus({ receiving: false }));
+    // stateDispatch(actions.updateViewState({
+    // 	id: draggedId,
+    // 	viewStateUpdate: {
+    // 		draggingOverReceiver: undefined,
+    // 	},
+    // }));
+    // stateDispatch(actions.updateViewState({
+    // 	id: receiver.receiverId,
+    // 	viewStateUpdate: {
+    // 		receiveStatus: DraxViewReceiveStatus.Inactive,
+    // 		receiveOffset: undefined,
+    // 		receiveOffsetRatio: undefined,
+    // 		receivingDrag: undefined,
+    // 	},
+    // }));
 };
 /** Track a new release, returning its unique identifier. */
 const createReleaseInRegistry = (registry, release) => {
     const releaseId = (0, math_1.generateRandomId)();
     registry.releaseIds.push(releaseId);
     registry.releaseById[releaseId] = release;
+    /**
+     * @todo remove BUG workaround
+     * @summary Force HoverView state to get the latest scrollPosition
+     */
+    registerViewInRegistry(registry, { id: 'fakefakefake' });
+    unregisterViewInRegistry(registry, { id: 'fakefakefake' });
     return releaseId;
 };
 /** Stop tracking a release, given its unique identifier. */
 const deleteReleaseInRegistry = (registry, releaseId) => {
-    registry.releaseIds = registry.releaseIds.filter((id) => id !== releaseId);
+    registry.releaseIds = registry.releaseIds.filter(id => id !== releaseId);
     delete registry.releaseById[releaseId];
 };
+/** Get the array of hover items for dragged and released views */
+const getReleasesFromRegistry = (registry) => {
+    // Find all released view hover items, in order from oldest to newest.
+    return registry.releaseIds.map(releaseId => {
+        const release = registry.releaseById[releaseId];
+        const { viewId } = release;
+        return viewId;
+    });
+};
 /** Reset drag tracking, if any. */
-const resetDragInRegistry = (registry, snapbackTarget = types_1.DraxSnapbackTargetPreset.Default) => {
-    const { drag, stateDispatch } = registry;
+const resetDragInRegistry = (registry, snapTarget = types_1.DraxSnapbackTargetPreset.Default) => {
+    const { drag } = registry;
     if (!drag) {
         return;
     }
+    const { draggedId, hoverPosition, receiver } = drag;
+    const receiverData = getAbsoluteViewDataFromRegistry(registry, receiver?.receiverId);
+    const receiverParentData = getAbsoluteViewDataFromRegistry(registry, receiverData?.parentId);
     resetReceiverInRegistry(registry);
-    const { draggedId, hoverPosition } = drag;
     const draggedData = getAbsoluteViewDataFromRegistry(registry, draggedId);
     // Clear the drag.
-    // console.log('clearing drag');
     registry.drag = undefined;
     // Determine if/where/how to snapback.
     let snapping = false;
-    if (snapbackTarget !== types_1.DraxSnapbackTargetPreset.None && draggedData) {
-        const { internalRenderHoverView, onSnapbackEnd, snapbackAnimator, animateSnapback = true, snapbackDelay = params_1.defaultSnapbackDelay, snapbackDuration = params_1.defaultSnapbackDuration, } = draggedData.protocol;
-        if (internalRenderHoverView && animateSnapback) {
+    if (snapTarget !== types_1.DraxSnapbackTargetPreset.None && draggedData) {
+        const { onSnapEnd, snapAnimator, animateSnap = true, snapDelay = params_1.defaultSnapbackDelay, snapDuration = params_1.defaultSnapbackDuration, } = draggedData.protocol;
+        const parentData = getAbsoluteViewDataFromRegistry(registry, draggedData?.parentId);
+        const scrollPosition = (receiverData ? receiverParentData?.scrollPosition : parentData?.scrollPosition) ||
+            params_1.INITIAL_REANIMATED_POSITION;
+        if (animateSnap) {
             let toValue;
-            if ((0, types_1.isPosition)(snapbackTarget)) {
+            if ((0, types_1.isPosition)(snapTarget)) {
                 // Snapback to specified target.
-                toValue = snapbackTarget;
+                toValue = snapTarget;
+            }
+            else if (receiverData) {
+                // Snap forward to the center of the receiver
+                toValue = {
+                    x: receiverData.absoluteMeasurements.x +
+                        receiverData.absoluteMeasurements.width / 2 -
+                        draggedData.absoluteMeasurements.width / 2,
+                    y: receiverData.absoluteMeasurements.y +
+                        receiverData.absoluteMeasurements.height / 2 -
+                        draggedData.absoluteMeasurements.height / 2,
+                };
             }
             else {
                 // Snapback to default position (where original view is).
+                // console.log(
+                // 	" Snapback to default position (where original view is).",
+                // );
                 toValue = {
                     x: draggedData.absoluteMeasurements.x,
                     y: draggedData.absoluteMeasurements.y,
                 };
             }
-            if (toValue && snapbackDuration > 0) {
+            if (toValue && snapDuration > 0) {
                 snapping = true;
                 // Add a release to tracking.
-                const releaseId = createReleaseInRegistry(registry, { hoverPosition, viewId: draggedId });
+                const releaseId = createReleaseInRegistry(registry, {
+                    hoverPosition,
+                    viewId: draggedId,
+                    scrollPosition,
+                    scrollPositionOffset: {
+                        x: scrollPosition.value.x,
+                        y: scrollPosition.value.y,
+                    },
+                });
+                const onSnapAnimationEnd = (_finished) => {
+                    const snapPayload = {
+                        dragged: { data: draggedData, ...drag },
+                        receiver: receiver &&
+                            receiverData && {
+                            data: receiverData,
+                            ...receiver,
+                        },
+                    };
+                    delete snapPayload.dragged.receiver;
+                    // // Call the snap end handlers, regardless of whether animation of finished.
+                    onSnapEnd?.(snapPayload);
+                    receiverData?.protocol?.onReceiveSnapEnd?.(snapPayload);
+                    // Remove the release from tracking, regardless of whether animation finished.
+                    deleteReleaseInRegistry(registry, releaseId);
+                    // Resetting the hover position updates the view state for the released view to be inactive.
+                    hoverPosition.value = { x: 0, y: 0 };
+                };
+                const finishedCallback = finished => {
+                    'worklet';
+                    (0, react_native_reanimated_1.runOnJS)(onSnapAnimationEnd)(finished);
+                };
                 // Animate the released hover snapback.
-                let animation;
-                if (snapbackAnimator) {
-                    animation = snapbackAnimator({
+                if (snapAnimator) {
+                    snapAnimator({
                         hoverPosition,
                         toValue,
-                        delay: snapbackDelay,
-                        duration: snapbackDuration,
+                        delay: snapDelay,
+                        duration: snapDuration,
+                        scrollPosition,
+                        finishedCallback,
                     });
                 }
                 else {
-                    animation = react_native_1.Animated.timing(hoverPosition, {
-                        toValue,
-                        delay: snapbackDelay,
-                        duration: snapbackDuration,
-                        useNativeDriver: true,
-                    });
+                    hoverPosition.value = (0, react_native_reanimated_1.withDelay)(snapDelay, (0, react_native_reanimated_1.withTiming)(toValue, {
+                        duration: snapDuration,
+                        reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+                    }, finishedCallback), react_native_reanimated_1.ReduceMotion.System);
                 }
-                animation.start(({ finished }) => {
-                    // Remove the release from tracking, regardless of whether animation finished.
-                    deleteReleaseInRegistry(registry, releaseId);
-                    // Call the snapback end handler, regardless of whether animation of finished.
-                    onSnapbackEnd?.();
-                    // If the animation finished, update the view state for the released view to be inactive.
-                    if (finished) {
-                        stateDispatch(useDraxState_1.actions.updateViewState({
-                            id: draggedId,
-                            viewStateUpdate: {
-                                dragStatus: types_1.DraxViewDragStatus.Inactive,
-                                hoverPosition: undefined,
-                                grabOffset: undefined,
-                                grabOffsetRatio: undefined,
-                            },
-                        }));
-                    }
-                });
             }
         }
     }
-    // Update the drag tracking status.
-    stateDispatch(useDraxState_1.actions.updateTrackingStatus({ dragging: false }));
+    else {
+        // Update the drag tracking status.
+        // Resetting the hover position updates the view state for the released view to be inactive.
+        hoverPosition.value = { x: 0, y: 0 };
+    }
     // Update the view state, data dependent on whether snapping back.
     const viewStateUpdate = {
         dragAbsolutePosition: undefined,
@@ -413,26 +460,23 @@ const resetDragInRegistry = (registry, snapbackTarget = types_1.DraxSnapbackTarg
     }
     else {
         viewStateUpdate.dragStatus = types_1.DraxViewDragStatus.Inactive;
-        viewStateUpdate.hoverPosition = undefined;
         viewStateUpdate.grabOffset = undefined;
         viewStateUpdate.grabOffsetRatio = undefined;
+        hoverPosition.value = { x: 0, y: 0 };
     }
-    stateDispatch(useDraxState_1.actions.updateViewState({
-        viewStateUpdate,
-        id: draggedId,
-    }));
+    // stateDispatch(actions.updateViewState({
+    // 	viewStateUpdate,
+    // 	id: draggedId,
+    // }));
 };
 /** Start tracking a drag. */
-const startDragInRegistry = (registry, { dragAbsolutePosition, dragParentPosition, draggedId, grabOffset, grabOffsetRatio, }) => {
-    const { stateDispatch } = registry;
+const startDragInRegistry = (registry, { dragAbsolutePosition, dragParentPosition, draggedId, grabOffset, grabOffsetRatio }) => {
     resetDragInRegistry(registry);
     const dragTranslation = { x: 0, y: 0 };
     const dragTranslationRatio = { x: 0, y: 0 };
     const dragOffset = grabOffset;
-    const hoverPosition = new react_native_1.Animated.ValueXY({
-        x: dragAbsolutePosition.x - grabOffset.x,
-        y: dragAbsolutePosition.y - grabOffset.y,
-    });
+    const draggedData = getViewDataFromRegistry(registry, draggedId);
+    const hoverPosition = draggedData?.protocol.hoverPosition || params_1.INITIAL_REANIMATED_POSITION;
     registry.drag = {
         absoluteStartPosition: dragAbsolutePosition,
         parentStartPosition: dragParentPosition,
@@ -447,20 +491,6 @@ const startDragInRegistry = (registry, { dragAbsolutePosition, dragParentPositio
         receiver: undefined,
         monitorIds: [],
     };
-    stateDispatch(useDraxState_1.actions.updateTrackingStatus({ dragging: true }));
-    stateDispatch(useDraxState_1.actions.updateViewState({
-        id: draggedId,
-        viewStateUpdate: {
-            dragAbsolutePosition,
-            dragTranslation,
-            dragTranslationRatio,
-            dragOffset,
-            grabOffset,
-            grabOffsetRatio,
-            hoverPosition,
-            dragStatus: types_1.DraxViewDragStatus.Dragging,
-        },
-    }));
     return {
         dragAbsolutePosition,
         dragTranslation,
@@ -471,7 +501,7 @@ const startDragInRegistry = (registry, { dragAbsolutePosition, dragParentPositio
 };
 /** Update drag position. */
 const updateDragPositionInRegistry = (registry, dragAbsolutePosition) => {
-    const { drag, stateDispatch } = registry;
+    const { drag } = registry;
     if (!drag) {
         return;
     }
@@ -480,7 +510,7 @@ const updateDragPositionInRegistry = (registry, dragAbsolutePosition) => {
         return;
     }
     const { absoluteMeasurements } = dragged.data;
-    const { draggedId, grabOffset, hoverPosition } = drag;
+    const { grabOffset, hoverPosition } = drag;
     const dragTranslation = {
         x: dragAbsolutePosition.x - drag.absoluteStartPosition.x,
         y: dragAbsolutePosition.y - drag.absoluteStartPosition.y,
@@ -497,29 +527,19 @@ const updateDragPositionInRegistry = (registry, dragAbsolutePosition) => {
     drag.dragTranslation = dragTranslation;
     drag.dragTranslationRatio = dragTranslationRatio;
     drag.dragOffset = dragOffset;
-    hoverPosition.setValue({
+    hoverPosition.value = {
         x: dragAbsolutePosition.x - grabOffset.x,
         y: dragAbsolutePosition.y - grabOffset.y,
-    });
-    stateDispatch(useDraxState_1.actions.updateViewState({
-        id: draggedId,
-        viewStateUpdate: {
-            dragAbsolutePosition,
-            dragTranslation,
-            dragTranslationRatio,
-            dragOffset,
-        },
-    }));
+    };
 };
 /** Update receiver for a drag. */
 const updateReceiverInRegistry = (registry, receiver, dragged) => {
-    const { drag, stateDispatch } = registry;
+    const { drag } = registry;
     if (!drag) {
         return undefined;
     }
-    const { relativePosition, relativePositionRatio, id: receiverId, data: receiverData, } = receiver;
-    const { parentId: receiverParentId, protocol: { receiverPayload }, } = receiverData;
-    const { id: draggedId, data: draggedData, } = dragged;
+    const { relativePosition, relativePositionRatio, id: receiverId } = receiver;
+    const { id: draggedId, data: draggedData } = dragged;
     const { parentId: draggedParentId, protocol: { dragPayload }, } = draggedData;
     const oldReceiver = drag.receiver;
     const receiveOffset = relativePosition;
@@ -529,6 +549,7 @@ const updateReceiverInRegistry = (registry, receiver, dragged) => {
             id: draggedId,
             parentId: draggedParentId,
             payload: dragPayload,
+            data: draggedData,
         },
         receiveOffset,
         receiveOffsetRatio,
@@ -542,7 +563,7 @@ const updateReceiverInRegistry = (registry, receiver, dragged) => {
         // New receiver.
         if (oldReceiver) {
             // Clear the old receiver.
-            resetReceiverInRegistry(registry);
+            (0, react_native_reanimated_1.runOnJS)(resetReceiverInRegistry)(registry);
         }
         drag.receiver = {
             receiverId,
@@ -550,22 +571,7 @@ const updateReceiverInRegistry = (registry, receiver, dragged) => {
             receiveOffsetRatio,
         };
         receiverUpdate.receiveStatus = types_1.DraxViewReceiveStatus.Receiving;
-        stateDispatch(useDraxState_1.actions.updateTrackingStatus({ receiving: true }));
     }
-    stateDispatch(useDraxState_1.actions.updateViewState({
-        id: receiverId,
-        viewStateUpdate: receiverUpdate,
-    }));
-    stateDispatch(useDraxState_1.actions.updateViewState({
-        id: draggedId,
-        viewStateUpdate: {
-            draggingOverReceiver: {
-                id: receiverId,
-                parentId: receiverParentId,
-                payload: receiverPayload,
-            },
-        },
-    }));
     return drag.receiver;
 };
 /** Set the monitors for a drag. */
@@ -577,7 +583,7 @@ const setMonitorIdsInRegistry = ({ drag }, monitorIds) => {
 /** Unregister a Drax view. */
 const unregisterViewInRegistry = (registry, { id }) => {
     const { [id]: removed, ...viewDataById } = registry.viewDataById;
-    registry.viewIds = registry.viewIds.filter((thisId) => thisId !== id);
+    registry.viewIds = registry.viewIds.filter(thisId => thisId !== id);
     registry.viewDataById = viewDataById;
     if (registry.drag?.draggedId === id) {
         resetDragInRegistry(registry);
@@ -616,14 +622,14 @@ const useDraxRegistry = (stateDispatch) => {
      * Get the absolute position of a drag already in progress from touch
      * coordinates within the immediate parent view of the dragged view.
      */
-    const getDragPositionData = (0, react_1.useCallback)((params) => (getDragPositionDataFromRegistry(registryRef.current, params)), []);
+    const getDragPositionData = (0, react_1.useCallback)((params) => getDragPositionDataFromRegistry(registryRef.current, params), []);
     /**
      * Find all monitoring views and the latest receptive view that
      * contain the touch coordinates, excluding the specified view.
      */
-    const findMonitorsAndReceiver = (0, react_1.useCallback)((absolutePosition, excludeViewId) => (findMonitorsAndReceiverInRegistry(registryRef.current, absolutePosition, excludeViewId)), []);
+    const findMonitorsAndReceiver = (0, react_1.useCallback)((absolutePosition, excludeViewId) => findMonitorsAndReceiverInRegistry(registryRef.current, absolutePosition, excludeViewId), []);
     /** Get the array of hover items for dragged and released views */
-    const getHoverItems = (0, react_1.useCallback)(() => getHoverItemsFromRegistry(registryRef.current), []);
+    const getHoverItems = (0, react_1.useCallback)((viewIds) => getHoverItemsFromRegistry(registryRef.current, viewIds), []);
     /**
      *
      * Imperative methods without state reactions (data management only).
@@ -633,6 +639,8 @@ const useDraxRegistry = (stateDispatch) => {
     const updateViewProtocol = (0, react_1.useCallback)((payload) => updateViewProtocolInRegistry(registryRef.current, payload), []);
     /** Update a view's measurements. */
     const updateViewMeasurements = (0, react_1.useCallback)((payload) => updateViewMeasurementsInRegistry(registryRef.current, payload), []);
+    /** Update a hover view's measurements. */
+    const updateHoverViewMeasurements = (0, react_1.useCallback)((payload) => updateHoverViewMeasurementsInRegistry(registryRef.current, payload), []);
     /**
      *
      * Imperative methods with potential state reactions.
@@ -647,15 +655,18 @@ const useDraxRegistry = (stateDispatch) => {
     /** Start tracking a drag. */
     const startDrag = (0, react_1.useCallback)((payload) => startDragInRegistry(registryRef.current, payload), []);
     /** Update drag position. */
-    const updateDragPosition = (0, react_1.useCallback)((dragAbsolutePosition) => (updateDragPositionInRegistry(registryRef.current, dragAbsolutePosition)), []);
+    const updateDragPosition = (0, react_1.useCallback)((dragAbsolutePosition) => updateDragPositionInRegistry(registryRef.current, dragAbsolutePosition), []);
     /** Update the receiver for a drag. */
-    const updateReceiver = (0, react_1.useCallback)((receiver, dragged) => (updateReceiverInRegistry(registryRef.current, receiver, dragged)), []);
+    const updateReceiver = (0, react_1.useCallback)((receiver, dragged) => updateReceiverInRegistry(registryRef.current, receiver, dragged), []);
     /** Set the monitors for a drag. */
     const setMonitorIds = (0, react_1.useCallback)((monitorIds) => setMonitorIdsInRegistry(registryRef.current, monitorIds), []);
     /** Unregister a Drax view. */
     const unregisterView = (0, react_1.useCallback)((payload) => unregisterViewInRegistry(registryRef.current, payload), []);
+    const getReleaseViews = (0, react_1.useCallback)(() => getReleasesFromRegistry(registryRef.current), []);
     /** Create the Drax registry object for return, only replacing reference when necessary. */
     const draxRegistry = (0, react_1.useMemo)(() => ({
+        registryRef,
+        getReleaseViews,
         getViewData,
         getAbsoluteViewData,
         getTrackingDragged,
@@ -668,6 +679,7 @@ const useDraxRegistry = (stateDispatch) => {
         registerView,
         updateViewProtocol,
         updateViewMeasurements,
+        updateHoverViewMeasurements,
         resetReceiver,
         resetDrag,
         startDrag,
@@ -688,6 +700,7 @@ const useDraxRegistry = (stateDispatch) => {
         registerView,
         updateViewProtocol,
         updateViewMeasurements,
+        updateHoverViewMeasurements,
         resetReceiver,
         resetDrag,
         startDrag,