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.
; const Provider Droppable Draggable = ;
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 = = ="my-draggable-item"> viewProps return <Animated.View = > <Text => 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 = = => active viewProps return <Animated.View = > <Text =>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.