Installation

npm install --save react-native-easy-dnd

# or using yarn

yarn add react-native-easy-dnd

Usage

First, you need to import createDndContext. This function creates the context for storing the data for the draggable and droppable child components.

import { createDndContext } from "react-native-easy-dnd";

const { Provider, Droppable, Draggable } = createDndContext();

Provider

Wrap the part of your application that you want to enable drag and drop for inside Provider.

<Provider>
   <View>
      {/*  */}
   </View>
</Provider>

Draggable

Add a Draggable component with a function as a child. The element that you want to make draggable needs to be Animated.View whose props must extend viewProps passed in by the render prop function.

import {Animated} from 'react-native';

// ...
<Draggable
  onDragStart={() => {
    console.log('Started draggging');
  }}
  onDragEnd={() => {
    console.log('Ended draggging');
  }}
  payload="my-draggable-item"
>
  {({ viewProps }) => {
    return (
      <Animated.View
        {...viewProps}
        style={[viewProps.style, { width: 200, height: 200, backgroundColor: "red" }]}
      >
        <Text style={{ color: "#fff", fontWeight: "bold" }}>
          Drag me
        </Text>
      </Animated.View>
    );
  }}
</Draggable>

Props

| Prop | Type | Description |
| ------------- | ---------- | ------------- | | onDragStart | Function | Callback that is triggerd when user starts dragging the draggable element | | onDragStart | Function | Callback that is triggerd when user ends dragging the draggable element | | payload | any | An arbitrary value (often) unique to this draggable that can later be used to determine which draggable item was dropped onto a droppable |

Droppable

Add a Droppable component with a function as a child. Similarly, the element that you want to make droppable needs to be Animated.View whose props must extend viewProps passed in by the render prop function.

import {Animated} from 'react-native';

// ...

<Droppable
  onEnter={() => {
    console.log('Draggable entered');
  }}
  onLeave={() => {
    console.log('Draggable left');
  }}
  onDrop={({ payload }) => {
    console.log('Draggable with the following payload was dropped', payload);
  }}
>
  {({ active, viewProps }) => {
    return (
      <Animated.View
        {...viewProps}
        style={[
          {
            width: 300,
            height: 200,
            backgroundColor: active
              ? "blue"
              : "green"
          },
          viewProps.style,
        ]}
      >
        <Text style={{ fontWeight: "bold", color: "white" }}>Drop here</Text>
      </Animated.View>
    );
  }}
</Droppable>

Props

| Prop | Type | Description |
| ------------- | ---------- | ------------- | | onEnter | Function | Callback that is triggerd when a draggable enters the droppable area | | onLeave | Function | Callback that is triggerd when a draggable leaves the droppable area | | onDrop | Function | Callback that is triggerd when a draggable is dropped onto the droppable area |

Fun Fact!

I wrote most of the code on a flight from Toronto to St. John's in March 2019. ✈

License

Licensed under the MIT License, Copyright © 2019 Mohamad Mohebifar.