fix: Invalid custom handle measurement (#384)

## Description

This PR fixes issues caused by recent changes introduced in the #377 PR.

I modified the gesture in the custom handle component by adding the
`onBegin` method to the gesture. This didn't work when the custom handle
was rendered after the item (e.g. with some timeout). This PR fixes this
invalid behavior and simplifies handle measurement logic a bit.

Author: MatiPl01

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
     }
   };
 });