Home

Awesome

Build Status NPM Version MIT license

<p align="center"> <img alt="React native easy DnD Demo" src="https://github.com/mohebifar/react-native-easy-dnd/raw/f6d57edee863cf22de91d6f3007dcbd687c2cb9a/demo.gif" /> </div>

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

PropTypeDescription
onDragStartFunctionCallback that is triggerd when user starts dragging the draggable element
onDragStartFunctionCallback that is triggerd when user ends dragging the draggable element
payloadanyAn 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

PropTypeDescription
onEnterFunctionCallback that is triggerd when a draggable enters the droppable area
onLeaveFunctionCallback that is triggerd when a draggable leaves the droppable area
onDropFunctionCallback 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.