Draggable

Draggable is a reusable React component that can be used to quickly make elements draggable within a Drag and Drop context.

For most use cases, you should use the source of this component as a blueprint to create a custom draggable component using useDraggable.

Usage

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

const SomeComponent = () => {
  const id = "unique-id";
  const data = { key: "value" };

  return (
    <Draggable id={id} data={data}>
      {/* Render draggable content */}
    </Draggable>
  );
};

Props

The Draggable component accepts the following props:

  • Name
    id
    Type
    :UniqueIdentifier
    Description

    A unique identifier for the draggable component.

  • Name
    data
    Type
    :Data?
    = {}
    Description

    An optional data object that can be used to store additional information about the draggable component. Default is an empty object ({}).

  • Name
    disabled
    Type
    :boolean?
    = false
    Description

    A boolean indicating whether the draggable component should be disabled (i.e., not be able to be dragged). Default is false.

  • Name
    style
    Type
    :ViewStyle?
    Description

    An optional style object to apply custom styles to the draggable component.

  • Name
    animatedStyleWorklet
    Type
    :AnimatedStyleWorklet?
    Description

    An optional animated style worklet that returns the animated style for the draggable component. The worklet function takes in the style object and a boolean isActive which is true if the component is active and false otherwise.