CODEWITHSUNDEEP
javascriptarraysreact-nativerecursion
Ravi Kumar Gopalakrishnan
Ravi Kumar Gopalakrishnan

Reputation: 325

How to implement nested drag and drop in React Native?

I need to implement nested drag and drop. If anyone has the idea share me the link. Already someone has worked for that in react js. Please refer to the following link. https://primetwig.github.io/react-nestable/dist/example/

Upvotes: 2

Views: 1332

Answers (2)

DineshMsd
DineshMsd

Reputation: 140

I have implemented nested drag-and-drop functionality using react-native-draggable-flatlist. This is one-level nested drag-and-drop cards. Also, you can find an example snack snack expo link. I followed stackoverflow answer for initial drag and drop implementation. this component looks like this. link to the screenshot of dnd component

Upvotes: 0

corupta
corupta

Reputation: 11

I was having a similar need. I think there are no existing libraries that implement such feature. I found a way to use one of the existing drag and drop libraries in a hacky manner to achieve 1-level nested drag and drop.

With the same hacky manner you can implement a nested drag and drop for a tree view as well, I think.

You can out my implementation here @corupta/react-native-nested-dnd if you want. Or, you can use it directly if 1-level nested dnd is enough for your case.

Let me explain my "hacky manner": I first flatten the data to a 1d list, and give it to a drag-drop library. Then, when an item is being dragged, before the drag-drop library starts its work, I change the current item's view to include its children as well, and remove those children from the list I give to the drag-drop library. That causes a blink, but those children items are now being dragged along with the parent now.

Then, when the current item is dropped somewhere, I re-create the original nested data according to between which items it was dropped. Finally, I flatten that new nested data into a 1d list again and provide it to the drag-drop library.

As I said before, the conversion of data causes a blink in the UI as it re-renders those replaced items, but that was an OK trade-off for me rather than re-implementing a whole drag-n-drop system from scratch.

With this idea, I think you should be able to implement the tree-view as well. In the future, I might as well implement a tree-view and add it to my repo.

Good luck!

Upvotes: 1

Related Questions