react-native-drag-drop-and-swap
Screenshots
Getting started
$ npm install --save react-native-drag-drop-and-swap
Usage
; // Main component to renderComponent { superprops; thisstate = color: "blue""blueviolet""brown""chocolate""coral""cornflowerblue""darkcyan""darkgoldenrod""darkgreen""darkkhaki""darkmagenta""darkolivegreen""darkorange""darkorchid""darkred""darksalmon""darkseagreen""darkslateblue""darkslategrey" ; } { if thispropsdragOver && !thispropsghost && !thispropsdragging LayoutAnimation; return <View style= width: thispropsdragOver ? 110 : 100 alignItems: "center" justifyContent: "center" height: thispropsdragOver ? 110 : 100 backgroundColor: "rgba(255,0,0,.7)" > <Text style= color: thisstatecolorthispropsindex fontSize: 50 fontWeight: "bold" > " " thispropsalphabetdata" " </Text> </View> ; let shadows = shadowColor: "black" shadowOffset: width: 0 height: 20 shadowOpacity: 05 shadowRadius: 20 opacity: 05 ; return <View style= height: 100 width: 100 backgroundColor: thispropsghost ? thisstatecolorthispropsindex : thisstatecolorthispropsindex + 4 alignItems: "center" justifyContent: "center" thispropsdragging ? shadows : null > <Text style= color: thisstatecolorthispropsindex fontSize: 50 fontWeight: "bold" > thispropsalphabetdata </Text> </View> ; } //Drag helperComponent { return <Draggable data=thispropsalphabet style= margin: 75 > <DropZone onDrop= thisprops onEnter= thisprops > <DraggyInner alphabet=thispropsalphabet index=thispropsindex /> </DropZone> </Draggable> ; }// Genertaing data to displaylet alphaData = ;let first = "A" last = "L";for var i = first; i <= last; i++ alphaData; //Main screen { superprops; thisdisplayName = "DragDropTest"; thisonDrop = thisonDrop; thisonHover = thisonHover; thisonDelete = thisonDelete; thisstate = alphabets: alphaData hoverData: {} dropData: {} hoverDataIndex: null ; } { let alphabets = thisstatealphabets; this; } { let data = thisstatealphabets || ; let alphabets = data; this; } { this; } { return <DragContainer> <View style= flex: 1justifyContent: "space-around" > <Text style= fontSize:20fontWeight:"bold" alignSelf:"center"color:"#f900f9" >Drag Drop and Swap</Text> <View style= justifyContent: "center" alignItems: "flex-end" flexDirection: "row" flexWrap: "wrap" > thisstatealphabets </View> </View> </DragContainer> ; }
Example implementation of Drag and Drop in React Native
The implementation provides three components, DragContainer, Draggable, and DropZone. Example
DragContainer
This component must be higher up the react tree than the other two components. It's size is not important, it just provides the context by which everything communicates.
API
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
onDragStart |
Function | Yes | Is called when dragging begins. It is passed a summary of the dragged element. | |
onDragEnd |
Function | Yes | Is called when dragging ends. It is passed two arguments, the same summary as onDragStart, and array of zones that were dropped on. |
DropZone
This is a wrapper component for an area where a Draggable element can be dropped.
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
onEnter |
Function | Yes | Is called when an item is dragged over the zone. | |
onLeave |
Function | Yes | Is called when an item is dragged off of the zone. | |
onDrop |
Function | Yes | Is called when an item is dropped. The data property of the draggable is passed through as an argument. | |
disabled |
Boolean | Yes | Prevents being a dropzone when when set to true. |
The children of the DropZone are passed the following props also;
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
dragOver |
Boolean | Yes | Is true when there is an item being dragged over the zone. |
Draggable
This is a wrapper component that makes it's children draggable.
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
data |
Any | Yes | Whatever is passed in the data prop will be given to the DropZone on drop. | |
dragOn |
String | Yes | Expects either onLongPress (default) or onPressIn. Determines when dragging begins. | |
disabled |
Boolean | Yes | Prevents dragging when set to true. | |
onPress |
function | Yes | Is called when an item is Pressed. |
The children of the Draggable componnent are passed the following props also;
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
dragging |
Boolean | Yes | The component is being dragged. | |
ghost |
string | Yes | The component is the ghost left in place of the item being dragged. |