Reanimated Dnd
This skill helps Claude integrate react-native-reanimated-dnd into your React Native apps, covering drag and drop zones, vertical and horizontal sortable lists, and 2D grids with swap or insert reordering. It knows the full component API including Draggable, Droppable, SortableItem, and SortableGrid, plus all the props for axis constraints, collision detection, drag handles, and dynamic height measurement. The skill automatically triggers on drag and drop keywords and will set up the GestureHandlerRootView wrapper, configure drop alignment and capacity, and wire up the onMove handlers with proper state updates. Good for dashboards, kanban boards, image galleries, or any UI where users need to reorder content by touch.
- skills.sh installs
- 198
- GitHub stars
- 1.1K
- last updated
- Jun 3, 2026
Install
$ npx -y skills add entropyconquers/react-native-reanimated-dnd --skill reanimated-dnd --agent claude-codeInstalls into .claude/skills of the current project.
Files
react-native-reanimated-dnd Integration Skill
Version: 2.0.0 Category: UI / Drag and Drop Platform: React Native (requires react-native-reanimated >=4.2.0, react-native-gesture-handler >=2.28.0, react-native-worklets >=0.7.0)
Overview
react-native-reanimated-dnd provides performant drag-and-drop primitives for React Native. It offers both high-level components and low-level hooks for:
- Drag & Drop: Move items between drop zones
- Sortable Lists: Vertical and horizontal reorderable lists
- Sortable Grids: 2D grids with insert or swap reordering
- Constraints: Axis locking, bounded dragging, collision detection
- Dynamic Heights: Auto-measuring variable-height items in lists
All animations run on the UI thread via Reanimated worklets.
Installation
npm install react-native-reanimated-dnd
# or
yarn add react-native-reanimated-dnd
Peer dependencies (must be installed separately)
npm install react-native-reanimated react-native-gesture-handler react-native-worklets
Required setup
Wrap your app root with GestureHandlerRootView:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/entropyconquers/react-native-reanimated-dnd
- Categories
- Frontend Development, Mobile Development
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
ngrxoguzhan18/angular-ecosystem-skillsALWAYS use when implementing Angular state management with NgRx, including Store, Effects, Entity, and Signal Store.195skills.sh installs
design-tokensdylanfeltus/skillsGenerate type scales, color palettes, spacing systems, WCAG contrast checks, and dark mode derivations with math. Use when setting up a design system, creating 193skills.sh installs
codeck-reviewhiyeshu/codeckReviewer role. Opens rendered HTML, inspects every slide visually, fixes problems in custom.css or slides.html and rebuilds through build-html.sh. Use whenever 192skills.sh installs
framer-motion-best-practicespproenca/dot-skillsFramer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensu187skills.sh installs
viem0xsardius/onchain-typescript-skillsTypeScript patterns for low-level EVM blockchain interactions using Viem. Use when writing Node scripts, CLI tools, or backend services that read/write to Ether186skills.sh installs
plugin-structureaiskillstore/marketplaceThis skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plu184skills.sh installs