Skip to content

mohebifar/react-native-easy-dnd

Repository files navigation

Build Status NPM Version MIT license

React native easy DnD Demo

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.