fix: Invalid custom handle measurement

packages/react-native-sortables/src/components/shared/CustomHandle.tsx

@@ -1,12 +1,10 @@
-import { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
+import { type PropsWithChildren, useCallback, useEffect } from 'react';
 import { View } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
-import { measure, useAnimatedRef } from 'react-native-reanimated';
+import { useAnimatedRef } from 'react-native-reanimated';
 
 import {
-  useCommonValuesContext,
   useCustomHandleContext,
-  useDragContext,
   useItemContext,
   usePortalOutletContext
 } from '../../providers';
@@ -49,85 +47,27 @@ function CustomHandleComponent({
     );
   }
 
-  const { activeItemKey, containerRef, itemPositions } =
-    useCommonValuesContext();
-  const { setDragStartValues } = useDragContext();
-  const { gesture, itemKey } = useItemContext();
-  const viewRef = useAnimatedRef<View>();
+  const { gesture, isActive, itemKey } = useItemContext();
+  const handleRef = useAnimatedRef<View>();
 
-  const {
-    activeHandleMeasurements,
-    activeHandleOffset,
-    makeItemFixed,
-    removeFixedItem
-  } = customHandleContext;
+  const { registerHandle, updateActiveHandleMeasurements } =
+    customHandleContext;
   const dragEnabled = mode === 'draggable';
 
   useEffect(() => {
-    if (mode === 'fixed') {
-      makeItemFixed(itemKey);
-    }
-
-    return () => removeFixedItem(itemKey);
-  }, [mode, itemKey, makeItemFixed, removeFixedItem]);
-
-  const measureHandle = useCallback(
-    (mustBeActive: boolean) => {
-      'worklet';
-      if (mustBeActive && activeItemKey.value !== itemKey) {
-        return;
-      }
-
-      const handleMeasurements = measure(viewRef);
-      const containerMeasurements = measure(containerRef);
-      const itemPosition = itemPositions.value[itemKey];
-
-      if (!handleMeasurements || !containerMeasurements || !itemPosition) {
-        return;
-      }
-
-      const { pageX, pageY } = handleMeasurements;
-      const { pageX: containerPageX, pageY: containerPageY } =
-        containerMeasurements;
-      const { x: activeX, y: activeY } = itemPosition;
+    return registerHandle(itemKey, handleRef, mode === 'fixed');
+  }, [handleRef, itemKey, registerHandle, mode]);
 
-      activeHandleMeasurements.value = handleMeasurements;
-      activeHandleOffset.value = {
-        x: pageX - containerPageX - activeX,
-        y: pageY - containerPageY - activeY
-      };
-
-      setDragStartValues(itemKey);
-    },
-    [
-      activeHandleOffset,
-      activeHandleMeasurements,
-      activeItemKey,
-      containerRef,
-      itemPositions,
-      itemKey,
-      setDragStartValues,
-      viewRef
-    ]
-  );
-
-  const gestureWithMeasure = useMemo(
-    () =>
-      gesture.onBegin(() => {
-        'worklet';
-        measureHandle(false);
-      }),
-    [gesture, measureHandle]
-  );
+  const onLayout = useCallback(() => {
+    'worklet';
+    if (isActive.value) {
+      updateActiveHandleMeasurements(itemKey);
+    }
+  }, [itemKey, isActive, updateActiveHandleMeasurements]);
 
   return (
-    <GestureDetector
-      gesture={gestureWithMeasure.enabled(dragEnabled)}
-      userSelect='none'>
-      <View
-        collapsable={false}
-        ref={viewRef}
-        onLayout={dragEnabled ? () => measureHandle(true) : undefined}>
+    <GestureDetector gesture={gesture.enabled(dragEnabled)} userSelect='none'>
+      <View collapsable={false} ref={handleRef} onLayout={onLayout}>
         {children}
       </View>
     </GestureDetector>

packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx

@@ -62,7 +62,6 @@ function DraggableView({
     activationAnimationProgress,
     portalState
   );
-
   const gesture = useItemPanGesture(key, activationAnimationProgress);
 
   useEffect(() => {

packages/react-native-sortables/src/providers/shared/CustomHandleProvider.ts

@@ -1,11 +1,12 @@
-import type { ReactNode } from 'react';
-import type { MeasuredDimensions } from 'react-native-reanimated';
-import { useSharedValue } from 'react-native-reanimated';
+import { type ReactNode, useCallback } from 'react';
+import type { View } from 'react-native';
+import type { AnimatedRef, MeasuredDimensions } from 'react-native-reanimated';
+import { measure, runOnUI, useSharedValue } from 'react-native-reanimated';
 
-import { useUIStableCallback } from '../../hooks';
 import type { CustomHandleContextType, Vector } from '../../types';
 import { useAnimatedDebounce } from '../../utils';
 import { createProvider } from '../utils';
+import { useCommonValuesContext } from './CommonValuesProvider';
 
 type CustomHandleProviderProps = {
   children?: ReactNode;
@@ -15,32 +16,80 @@ const { CustomHandleProvider, useCustomHandleContext } = createProvider(
   'CustomHandle',
   { guarded: false }
 )<CustomHandleProviderProps, CustomHandleContextType>(() => {
-  const activeHandleOffset = useSharedValue<Vector | null>(null);
+  const { containerRef, itemPositions } = useCommonValuesContext();
+  const debounce = useAnimatedDebounce();
+
+  const fixedItemKeys = useSharedValue<Record<string, boolean>>({});
+  const handleRefs = useSharedValue<Record<string, AnimatedRef<View>>>({});
   const activeHandleMeasurements = useSharedValue<MeasuredDimensions | null>(
     null
   );
-  const fixedItemKeys = useSharedValue<Record<string, boolean>>({});
-  const debounce = useAnimatedDebounce();
+  const activeHandleOffset = useSharedValue<Vector | null>(null);
+
+  const registerHandle = useCallback(
+    (key: string, handleRef: AnimatedRef<View>, fixed: boolean) => {
+      runOnUI(() => {
+        'worklet';
+        handleRefs.value[key] = handleRef;
+        if (fixed) {
+          fixedItemKeys.value[key] = true;
+          debounce(fixedItemKeys.modify, 100);
+        }
+      })();
 
-  const makeItemFixed = useUIStableCallback((key: string) => {
-    'worklet';
-    fixedItemKeys.value[key] = true;
-    debounce(fixedItemKeys.modify, 100);
-  });
+      const unregister = () => {
+        'worklet';
+        delete handleRefs.value[key];
+        if (fixed) {
+          fixedItemKeys.value[key] = false;
+          debounce(fixedItemKeys.modify, 100);
+        }
+      };
 
-  const removeFixedItem = useUIStableCallback((key: string) => {
-    'worklet';
-    delete fixedItemKeys.value[key];
-    debounce(fixedItemKeys.modify, 100);
-  });
+      return runOnUI(unregister);
+    },
+    [debounce, fixedItemKeys, handleRefs]
+  );
+
+  const updateActiveHandleMeasurements = useCallback(
+    (key: string) => {
+      'worklet';
+      const handleRef = handleRefs.value[key];
+      if (!handleRef) {
+        return;
+      }
+
+      const handleMeasurements = measure(handleRef);
+      const containerMeasurements = measure(containerRef);
+      const itemPosition = itemPositions.value[key];
+
+      if (!handleMeasurements || !containerMeasurements || !itemPosition) {
+        return;
+      }
+
+      activeHandleMeasurements.value = handleMeasurements;
+      const { x: itemX, y: itemY } = itemPosition;
+      activeHandleOffset.value = {
+        x: handleMeasurements.pageX - containerMeasurements.pageX - itemX,
+        y: handleMeasurements.pageY - containerMeasurements.pageY - itemY
+      };
+    },
+    [
+      activeHandleMeasurements,
+      activeHandleOffset,
+      containerRef,
+      handleRefs,
+      itemPositions
+    ]
+  );
 
   return {
     value: {
       activeHandleMeasurements,
       activeHandleOffset,
       fixedItemKeys,
-      makeItemFixed,
-      removeFixedItem
+      registerHandle,
+      updateActiveHandleMeasurements
     }
   };
 });