bmbknds/react-native-easy-dnd

Drag and drop with react-native made simple

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.