This is a simple app that demonstrates how drag and drop can be implemented with React Native. This means that you cannot use it as a library in your own app but you may get some ideas for your own implementation.
Feel free to clone the code and implement your own solution based on that.
Install Expo to your phone, connect it to your computer, then run:
yarn install
yarn run start
- Horizontal dragging and dropping.
- Automatic scrolling while dragging.
- Deleting an item by dragging it on top of the list.
- An extra item at the end of the list with a fixed position.
- No experimental React Native's LayoutAnimation used.
- This supports only horizontal scrolling. Vertical scrolling wouldn't be however a hard thing to do. Basically change the
FlatList'shorizontalprop and switchxandyin theDraggableListcomponent. - The items need to have a fixed width (height if translated to vertical list). This simplifies dragging a lot as we can very easily calculate the target position of the draggable element.
Powered by Neverthink.