useDraggable

useDraggable is a custom React Hook that enables a component to become draggable for drag-and-drop operations. This hook manages the registration, layout, and state of a draggable component.

Minimal Example

// src/components/DraggableComponent.tsx
import { useDraggable } from "@mgcrea/react-native-dnd";

const DraggableComponent = ({ id, data, disabled }) => {
  const { offset, setNodeRef, activeId, setNodeLayout, draggableState } = useDraggable({
    id,
    data,
    disabled,
  });

  return (
    <Animated.View ref={setNodeRef} onLayout={setNodeLayout}>
      {/* Render component content */}
    </Animated.View>
  );
};

Advanced Usage

// src/components/MyDraggable.tsx
import { useDraggable, type AnimateProps, type UseDraggableOptions } from "@mgcrea/react-native-dnd";
import { type FunctionComponent, type PropsWithChildren } from "react";
import { type ViewProps } from "react-native";
import Animated, { useAnimatedStyle } from "react-native-reanimated";

export type MyDraggableProps = AnimateProps<ViewProps> & UseDraggableOptions;

export const MyDraggable: FunctionComponent<PropsWithChildren<MyDraggableProps>> = ({
  children,
  id,
  data,
  disabled,
  activationDelay,
  activationTolerance,
  style,
  ...otherProps
}) => {
  const { setNodeRef, setNodeLayout, activeId, actingId, offset } = useDraggable({
    id,
    data,
    disabled,
    activationDelay,
    activationTolerance,
  });

  const animatedStyle = useAnimatedStyle(() => {
    const isActive = activeId.value === id;
    const isResting = actingId.value !== id;
    const style = {
      opacity: isActive ? 0.9 : 1,
      zIndex: isActive ? 999 : 1,
      transform: [
        {
          translateX: offset.x.value,
        },
        {
          translateY: offset.y.value,
        },
      ],
    };
    return style;
  }, [id]);

  return (
    <Animated.View ref={setNodeRef} onLayout={setNodeLayout} style={[style, animatedStyle]} {...otherProps}>
      {children}
    </Animated.View>
  );
};

Parameters

useDraggable accepts an object with the following properties:

Return values

useDraggable returns an object with the following properties: