[FEAT-REQ] Drag and Drop

[Imaginativeone]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Example: I'm always frustrated when [...]
I would like to apply this component to a TODO list, where higher branches of the tree represent more-important priorities.

Describe the solution you'd like
A clear and concise description of what you want to happen. Be as specific as possible.
Arborist Demo

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
ShadCN

Screenshots or screen records
If applicable, add screenshots or screen records to help explain your proposed feature or improvement.

Additional context
Add any other context about the feature request here.

Would you like to work on this feature?
Indicate if you'd be interested and able to work on this feature request.
I'd love to work on this feature; it's a bit above my skill level, but I can try.

Remember, the more detail you provide, the easier it is for the devs to understand and implement the requested feature!

[JairajJangle]

Hey there! 👋

First off, thanks so much for posting this feature request – it's a fantastic idea! I can definitely see how adding drag-and-drop functionality would improve the usability of the tree select component, especially for use cases like a TODO list with prioritized branches. 🎉

Interestingly, a similar request was already raised by another user: #41, where they mentioned the need for reorderable tree views using drag-and-drop gestures. Given that this feature has been requested by multiple users, it seems like a valuable addition, and I'll be prioritizing it for the next release.

I'll keep you posted once the feature is ready, and I'll make sure to include any updates along the way. 🙏 Thanks again for your suggestion and for being part of making the library better!

If you have any other ideas or questions, feel free to reach out! 😊

[Imaginativeone]

Jairaj,

Thanks for your speedy reply! I very much look forward to the drag and drop release, and I sent a small donation to help a little. I'll send more when I can.

:-)

[Imaginativeone]

JairajJangle,

How much money do I need to raise to entice you to move this project to one of your top priorities?

Imaginativeone

[JairajJangle]

Hey @Imaginativeone! 👋

Thank you so much for your continued support and enthusiasm for the project – it truly means a lot to me! 🙏 I really appreciate the donation, but honestly, just knowing the project is valuable to you is rewarding in itself. There's no fixed amount I can suggest – any contribution, big or small, helps and is greatly appreciated. 😊

I was on vacation until yesterday, but I’m planning to dive into the drag-and-drop feature this weekend. If all goes well, I should have a beta release ready for testing soon. I'll keep you updated as things progress!

Thank you again for being part of this journey and for your generosity!

[JairajJangle]

Hey @Imaginativeone! 👋

I wanted to give you a quick update regarding the drag-and-drop feature since I know it’s something you're interested in.

I looked into react-native-flashdrag-list, but it doesn't seem actively maintained and is sparsely documented. Integrating it feels risky and could lead to future development issues, so I’d prefer to avoid it.

I also checked react-native-draggable-flatlist, which is well-maintained but built for FlatList, not Shopify FlashList (which the tree view library uses for performance). There are discussions about making it FlashList-compatible (here), but it seems like a heavy lift.

On top of that, I’d need to add support for horizontal drag-and-drop to make the experience smoother for tree view structures. Developing a custom solution from scratch would require advanced work with react-native-reanimated and react-native-gesture-handler.

That said, I have a potential solution – integrating the react-native-draggable-flatlist library, but with a performance warning for users dealing with large data. This would offer a trade-off between performance and the new feature, and I’m guessing some users would find that acceptable depending on their use case. The tree view will default to use the Flashlist if drag and drop feature key is kept disabled. I’ll explore this further in the coming week.

Since this is an open-source project, I’d be more than happy to welcome contributions from community members if anyone is interested in collaborating on this feature. In the meantime, I’ll continue exploring potential approaches including the above one, but I wanted to keep you in the loop so you’re aware of the current challenges.

I’ll share updates as soon as there’s progress! 😊

[Imaginativeone]

JairajJangle,

I couldn't be more thrilled about your news. Forgive me for adding onto the tech pile for consideration, but would it be easier to make a https://www.jstree.com/ wrapper?

• Imaginativeone

[Imaginativeone]

What do you think about this Vue Solution?

[JairajJangle]

Hey @Imaginativeone! 👋

Thanks for your enthusiasm and for sharing the ideas about a jstree wrapper and the Vue solution, both are really interesting! I truly appreciate the helpful links. 🙏

The main challenge isn’t the state update logic but managing the drag-and-drop gesture interactions in a tree view, which is quite tricky to get right. The cross-platform and logical solutions you shared are definitely helpful, though the real complexity lies in handling gestures with react-native-gesture-handler and reanimated.

I might be a bit slower for the next week due to personal reasons but will keep exploring react-native-draggable-flatlist as mentioned earlier. If you know anyone who might be interested in collaborating, please feel free to point them to this library, it’d be great to get more people involved!

Thanks again for your patience and support! 😊

[Randall71]

Hey @JairajJangle just saw this new library from a guy at SWM who handles drag and drop: react-native-sortables

[Imaginativeone]

Hey @JairajJangle just saw this new library from a guy at SWM who handles drag and drop: react-native-sortables

That repo is gorgeous!

[JairajJangle]

Hey there @Randall71 & @Imaginativeone ! 👋

I’m really pleased to see that a library like the react-native-sortables exists, looks promising and definitely worth a shot for integrating the drag-and-drop feature into the library!

Also, I wanted to mention that I suspect @GamerGirlandCo, who has been keen on this feature as well, has been exploring a drag-and-drop implementation in a separate fork of this library. They originally posted a feature request for this here: #41. Since this is an actively discussed feature, I figured it’d be good to cross-reference efforts to encourage speedy collaboration and ensure we’re all aware of the findings and possible approaches.

On a side note, I recently rolled out another update in the beta channel that had been in the pipeline: a feature to scroll to a particular node ID. Now that it’s done, I can finally look into this next!

I know this feature has been requested quite a bit, and I really appreciate all the discussions and contributions around it. Since this is an open-source project that I maintain in my free time, things can sometimes take a bit longer, but I do my best to keep things moving forward! 😊

I’ll keep exploring and share updates as I make progress. Really appreciate your interest and support!

[JairajJangle]

Just a quick update on the Drag and Drop feature!

The react-native-sortables library is fantastic, huge thanks to @Randall71 for the suggestion! 🙌

To get a feel for how the library works, I did a basic integration test. I haven’t started working on state management yet, but I wanted to share a screen recording of this primitive implementation:

react-native-tree-multi-select-drag-drop.mp4

I'm also exploring how to disable sorting when a node is dragged to an invalid tree node position, ensuring proper placement rules for a structured tree.

I'll keep updating as I make progress. 😊

[Imaginativeone]

@JairajJangle This advancement is extremely exciting! Thanks for your hard work!