Implement Drag and Drop between multiple lists in a React App and renders web content in a React native App

Here I’m going to implement drag and drop items between multiple lists using react-beautiful-dnd which is able to control the draggable list items dynamically using back end Json response. Further more we can use this implementation as a react web application or deploy web app in a back end server and renders the web content in a react native app using react-native-webview.

Main purpose of this post is to use this implementation in a react native app as we have some limitations when using gesture handler in react native.

In this post I’m going to share how I built it. Below we can see how the finished drag and drop dashboard looks like in a android device:

So let’s get to do it.

Set up Project:

First thing you need to do is create React web app. 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 response of the item list dynamically and assign to a state variable. As this is an initial implementation I have hard coded sample Json response inside App.js. Later we can have back end API to get dashboard item list dynamically according to same format and assign to the state.

Inside the item list array you can see I have added unique draggable id for each row and each row item has all the properties included as array objects.

Implementation:

Here whole content is wrapped inside <DragDropContext> and state variable itemList mapped to a list using array map function to render rows dynamically. Each individual row is wrapped inside <Droppable>. For the individual item in each row row_items array which is inside each main item in state mapped to a list using array map function to render each item dynamically. Each individual item is wrapped inside <Draggable>.

Each <Droppable> and <Draggable> has a unique id and when drag and drop <DragDropContext> triggers onDragEnd method.

onDragEnd method implementation:

Here the function receives the source and destination droppable id’s of the rows and source and destination array indexes of each item . Then we need to find the array indexes of source row and destination row using droppable id and re order items dynamically. If the droppable id’s are same the items are in the same row and I’m using reorder function to implement the logic. If the droppable id’s are different I’m using move function to implement the logic.

Finished implementation:

Below is the full App.js component.

Host React Web app in a back end server:

As this is an initial implementation I have deployed my web app in GitHub pages. You can find the publishing source configurations from here.

You can find the hosted web app from here and you can try the functionality in your device also.

As my main objective is to use the web content inside a react native app and do the drag and drop functionality, I’m using react-native-webview to get the final output.

<WebView
source = {{uri:'https://devanshanir.github.io/ReatWebApp/'}}
style={{ 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 and drop between multiple lists more dynamic and feature rich as a React web app or render web content inside a WebView in React native app.

You can find the full source code from here.

Thank you for reading!