Droppable

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

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

Usage

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

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

  return (
    <Droppable id={id} data={data}>
      {/* Render droppable content */}
    </Droppable>
  );
};

Props

The Droppable component accepts the following props:

  • Name
    id
    Type
    :UniqueIdentifier
    Description

    A unique identifier for the droppable component.

  • Name
    data
    Type
    :Data?
    = {}
    Description

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

  • Name
    disabled
    Type
    :boolean?
    = false
    Description

    A boolean indicating whether the droppable component should be disabled (i.e., not accept any draggable components). Default is false.

  • Name
    style
    Type
    :ViewStyle?
    Description

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

  • Name
    animatedStyleWorklet
    Type
    :AnimatedStyleWorklet?
    Description

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