Skip to content
Drag and drop with react-native made simple
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
example
src
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
demo.gif
gulpfile.js
package.json
tsconfig.jest.json
tsconfig.json
tslint.json
yarn.lock

README.md

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.

You can’t perform that action at this time.