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.