Adds drag-and-drop, sortable lists and grids, and drop zones to React Native apps with react-native-reanimated-dnd. The skill covers its components, hooks, and configuration options.
Claude Code
> /plugin marketplace add entropyconquers/react-native-reanimated-dnd> /plugin install reanimated-dnd@reanimated-dnd-skills
Codex
$ npx skills add entropyconquers/react-native-reanimated-dnd -a codex
Cursor
$ npx skills add entropyconquers/react-native-reanimated-dnd -a cursor
Gemini CLI
$ npx skills add entropyconquers/react-native-reanimated-dnd -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add entropyconquers/react-native-reanimated-dnd$ copilot plugin install reanimated-dnd@reanimated-dnd-skills
OpenCode
$ npx skills add entropyconquers/react-native-reanimated-dnd -a opencode
Windsurf
$ npx skills add entropyconquers/react-native-reanimated-dnd -a windsurf
A drag-and-drop library that finally works on React Native ✨
Powerful, performant, and built for the modern React Native developer
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.
See it in action! A comprehensive example app with 18 interactive demos showcasing every feature and use case.
📱 Scan & Play
Scan with Expo Go to try the demo instantly
🚀 Quick Start
Or browse the code: 📂 View Example App →
Comprehensive guides, API reference, and interactive examples
The example app includes:
Vertical list reordering with drag handles
https://github.com/user-attachments/assets/6493c05f-571c-416d-b81d-90bee98738b4
Features: Auto-scrolling • Drag handles • Smooth transitions
Reorderable horizontal scrolling list
https://github.com/user-attachments/assets/909c687e-146d-4233-a6e9-4bc3e7b69a35
Features: Horizontal scroll • Handle & full item modes
2D grid reordering with insert & swap
https://github.com/user-attachments/assets/9647af01-098c-485f-92ba-cfc39d1bba0c
Features: Grid layout • Insert & swap modes
Sortable list with variable item heights
https://github.com/user-attachments/assets/b53078ca-51ab-4675-9389-e8fe69492370
Features: Variable heights • Expand/collapse • Auto-scroll
Drag items to drop zones
https://github.com/user-attachments/assets/05859d25-6749-41b7-ae7e-cad5f864a268
Features: Drop zones • Pre-drag delay • Visual feedback
Dedicated regions for drag control
https://github.com/user-attachments/assets/f8be7bea-0f24-4446-83be-06ede43fa02a
Features: Full handle • Bar handle • Header handle
Visual hover effects on drop zones
https://github.com/user-attachments/assets/d4124110-6eb7-4a15-8f97-3e58b392d62e
Feedback: Pulse effect • Glow effect • Hover states
Precise drop positioning with offsets
https://github.com/user-attachments/assets/07fd39d0-a0d8-471c-86be-b73d70027163
Features: 9-point alignment • X/Y offset controls
Constrain movement within boundaries
https://github.com/user-attachments/assets/ce43a226-ec42-49c1-b528-df6599d294e1
Constraints: Container bounds • Axis-locked • Custom limits
Center, intersect & contain algorithms
https://github.com/user-attachments/assets/1ac1860a-acc1-469a-ae3e-644a22393b86
Algorithms: Center • Intersect • Contain
Track items across multiple zones
https://github.com/user-attachments/assets/e4effc88-7161-4c5c-af6e-c06152cfbd09
Features: Multi-zone tracking • Real-time mapping
State lifecycle tracking & callbacks
https://github.com/user-attachments/assets/bceb9e7c-8f29-4630-81b0-945a7bcf29c5
States: Idle • Dragging • Dropped
npm install react-native-reanimated-dnd
npm install react-native-reanimated react-native-gesture-handler react-native-worklets
Follow the setup guides:
Make sure your Babel config uses "react-native-worklets/plugin" as the last plugin and that your app is running on the New Architecture, which is required by Reanimated 4.
All items in your data array MUST have an id property of type string:
interface YourDataType {
id: string; // Required!
// ... your other properties
}
This is essential for the library to track items during reordering.
Example:
// ✅ Good - Each item has a unique string id
const tasks = [
{ id: "1", title: "Learn React Native", completed: false },
{ id: "2", title: "Build an app", completed: false },
{ id: "3", title: "Deploy to store", completed: true },
];
// ❌ Bad - Missing id properties
const badTasks = [{ title: "Task 1" }, { title: "Task 2" }];
// ❌ Bad - Non-string ids
const badTasksWithNumbers = [
{ id: 1, title: "Task 1" },
{ id: 2, title: "Task 2" },
];
The library includes runtime validation in development mode that will warn you if items are missing valid ID properties.
IMPORTANT: Sortable components maintain their own internal state for optimal performance and animation consistency.
onMove callbackssetItems(), setTasks(), or similar functions during drag operationsonMove for logging, analytics, or side effects onlyonDrop with allPositions parameter for read-only position trackingProgrammatic list operations (add, update, delete, reorder items) that work correctly with internal state management will be added in upcoming releases. This will provide safe methods to modify sortable lists externally.
Stars on GitHub
See 12 react-native-reanimated-dnd alternatives
Skills for contributors and app developers in the Expo monorepo: write TSDoc for Expo SDK APIs, run Expo's AI code reviewer on changes or pull requests, add Apple App Intents and Siri Shortcuts to Expo apps, and test Expo Router on Android emulators.
@expoA Claude Code skill that decompiles Android APK/XAPK/JAR/AAR files and extracts the HTTP APIs used by the app, Retrofit endpoints, OkHttp calls, hardcoded URLs, authentication patterns, so you can document and reproduce them without the original source code.
@simoneavogadroA vision bridge that lets text-only coding models such as DeepSeek and GLM read images. When an image path or URL appears in the conversation, it returns structured JSON with OCR text, layout, and semantic content.
@liustackSkills for building native-feeling mobile app screens in Expo and React Native, based on patterns from real app screens and flows. Includes a skill for researching those screens through the Appllama MCP before building.
@appllamaInstall it with the command on its page. It includes reanimated-dnd. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it