How to implement a "DragHandler" inside the draggable root node?

[elliothux]

Thanks you @mgcrea ! This a awesome library!

I'm trying to implement a draggable list like this: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-horizontal--drag-handle (The drag trigger is inside the list item, not a same node).

Here are codes I tried using DraggableStack, but it seems like to have some layout issue.

  const { offset, setNodeRef, activeId, setNodeLayout, state } = useDraggable({ id });

  const animatedStyle = useAnimatedStyle(() => {
    const isActive = state.value === 'dragging';
    const isActing = state.value === 'acting';
    return {
      zIndex: isActive ? 999 : isActing ? 998 : 1,
      transform: [
        { translateX: isActive ? offset.x.value : withSpring(offset.x.value, { damping: 100, stiffness: 1000 }) },
        { translateY: isActive ? offset.y.value : withSpring(offset.y.value, { damping: 100, stiffness: 1000 }) },
        { scale: withSpring(isActive ? 1.05 : 1, { damping: 100, stiffness: 1000 }) },
      ],
    } as ViewStyle;
  }, [id, state]);

  return (
    <Animated.View
      style={animatedStyle}
    >
      {createElement(Component, { ref: setNodeRef, onLayout: setNodeLayout })}
    </Animated.View>
   )

https://github.com/mgcrea/react-native-dnd/assets/23466520/193badc7-2ed9-43f0-ae0e-bf0ca3cc3823