reanimated-dnd

React Native Reanimated DnD 🎯

https://github.com/user-attachments/assets/023c0a9c-194a-45a9-bb88-ac8f16f5ffd5

A drag-and-drop library that finally works on React Native ✨

Powerful, performant, and built for the modern React Native developer

🚀 Why This Library?

After countless attempts with drag-and-drop solutions that don't work or are simply outdated, this is something that finally works. And it is not just another DnD library, but a complete ecosystem built from the ground up for React Native, offering a best-in-class developer experience and production-ready performance.

Highly feature-packed with every interaction pattern you'll ever need, yet simple enough to get started in minutes. Built for developers who demand both power and simplicity.

✨ Features

• 🚀 High Performance - Built with Reanimated 4 and Worklets for buttery-smooth 60fps animations
• 🏗️ New Architecture Ready - Built for the modern React Native architecture used by Expo SDK 55+
• 📦 Expo Compatible - Tested against Expo SDK 55 and React Native 0.83
• 🪶 Tiny Bundle Size - Only 70kb unpacked size, won't bloat your app
• 🎯 Flexible API - From simple drag-and-drop to complex sortable lists
• 📱 React Native First - Designed specifically for mobile, not ported from web
• 🔧 TypeScript Ready - Full type safety with comprehensive definitions
• 🎨 Infinitely Customizable - Every animation, behavior, and style is configurable
• 📦 Complete Component Suite - Draggable, Droppable, Sortable, and more
• 🎪 Smart Collision Detection - Multiple algorithms (center, intersect, contain)
• 📜 Vertical & Horizontal Sortable Lists - Drag and drop to sort lists in any direction with automatic scrolling
• 🔲 Sortable Grids - 2D grid drag-and-drop with flexible layouts, insert and swap modes
• ↕ Dynamic Heights - Sortable lists with variable item heights
• ⚡ FlatList Performance - Optional FlatList rendering for large datasets with virtualization
• 🎭 Drag Handles - Precise control with dedicated drag areas
• 🎬 Custom Animations - Spring, timing, or bring your own animation functions
• 📐 Pixel-Perfect Positioning - 9-point alignment system with custom offsets
• 📦 Boundary Constraints - Keep draggables within specific areas
• ⚡ State Management - Complete lifecycle tracking and callbacks
• 🎯 Developer Experience - Intuitive APIs, helpful warnings, and extensive examples

📱 Interactive Examples

See it in action! A comprehensive example app with 18 interactive demos showcasing every feature and use case.

🎮 Try the Example App

📱 Scan & Play Scan with Expo Go to try the demo instantly

🚀 Quick Start Install Expo Go on your phone (SDK 55) Scan the QR code with your camera Explore 18 interactive examples! Or browse the code: 📂 View Example App →

📚 Complete Documentation

Comprehensive guides, API reference, and interactive examples

The example app includes: