Drag & Drop
Drag & Drop
Drag and drop functionality allows users to reorder items in a list, such as reordering a to-do list or rearranging dashboard widgets, providing an intuitive and interactive user experience.
Installing a Drag and Drop Library
bash
npm install react-native-draggable-flatlist
Basic Draggable List
javascript
import DraggableFlatList from 'react-native-draggable-flatlist';
setItems(data)}
keyExtractor={(item) => item.id}
renderItem={({ item, drag, isActive }) => (
{item.title}
)}
/>
Building Custom Drag and Drop with Reanimated
For more custom drag-and-drop interactions, such as dragging items between different containers, Gesture Handler combined with Reanimated allows building fully custom drag behavior.
javascript
const pan = Gesture.Pan()
.onUpdate((event) => {
translateX.value = event.translationX;
translateY.value = event.translationY;
})
.onEnd(() => {
translateX.value = withSpring(0);
translateY.value = withSpring(0);
});
Persisting the New Order
After a drag operation completes, the new item order should typically be saved to local storage or synced with a backend API to persist the user’s changes.
Common Use Cases
- Reordering to-do list items by priority
- Rearranging dashboard widgets or home screen layouts
- Sorting a playlist or media queue
Conclusion
Implementing drag and drop functionality using react-native-draggable-flatlist, or custom Gesture Handler and Reanimated logic, enables intuitive list reordering interactions in React Native applications.
