React native : Drag and drop between two lists

I have working on a react native app which needs to implement drag and drop dashboard which is able to drag drop and swap items between 2 lists dynamically by changing only the back end Json response. For the implementation I have used react-native-drax and need to install dependencies react-native-gesture-handler. In this post I’m going to share how I built it.

Here’s what the finished drag drop and swap dashboard looks like:

So Let’s get to do it!

Set up project:

The first thing you need to do is set up the project. I have used react native CLI to do and you can find more information from here.

Since functionality is dynamic and simple I’m going to do the implementation in the App.js.

Here’s what the initial component looks like:

Import dependencies and define sample back end Json response:

Now let’s import the dependencies and define the format of the back end Json response of the draggable item list and receiving item list and assign both to two different state variables. Here I have used state Hook to declare state variables. For the initial implementation I have hard coded the Json response in the App.js. Later we can have a back end API to get the dashboard item list in the same format and we can assign two arrays to the state hook.

Inside the draggable item list and receiving item list arrays you can see I have include all the properties of each item as array objects.

Receiving zone component :

Here state variable receivingItemList mapped to list using array map function to render ReceivingZoneUIComponent dynamically. Here items are swap between two lists inside onReceiveDragDrop function using array index. We can get the array index of the draggable item using event.dragged.payload.

Draggable component:

Here state variable dragItemMiddleList rendered inside DraxList dynamically using DragUIComponent. We can use the array index as the dragpayload , so draggable item can access using event.dragged.payload inside receiving zone.

Finished implementation:

Below is the full App.js component. Finally we need to wrap the view inside GestureHandlerRootView to work with gesture handlers and styles should be added as below.

const gestureRootViewStyle = { flex: 1 };

And that’s it for this post! This implementation is simple but you can build on top of it to make your drag drop and swap between lists more dynamic and feature rich.

You can find the full source code from here.

Thank you for reading!