How do I restrict dragging to a specific part of a component?

You can use the Draggable.Handle or SortableItem.Handle sub-components to wrap only the specific area (like an icon or header) you want to initiate the drag.

Can I use this for both vertical and horizontal lists?

Yes, the Sortable component supports a direction prop that can be set to either 'vertical' or 'horizontal' with support for custom gaps and widths.

What are the peer dependency requirements for this skill?

The library requires react-native-reanimated >= 4.2.0, react-native-gesture-handler >= 2.28.0, and react-native-worklets >= 0.7.0.

Does it support 2D grid reordering?

Yes, it includes a SortableGrid component that supports both 'swap' and 'insert' reordering strategies in multi-column layouts.

How is performance maintained during heavy animations?

The library uses Reanimated worklets to perform all position calculations and animations on the UI thread, preventing frame drops even when the JS thread is busy.

React Native Reanimated DnD

Name: React Native Reanimated DnD
Author: entropyconquers

byentropyconquers

•

1,004

•

Mobile Development

Implements high-performance drag-and-drop, sortable lists, and interactive grids in React Native applications using Reanimated 4.

This skill provides specialized guidance for integrating the react-native-reanimated-dnd library into React Native projects to achieve fluid, 60fps drag-and-drop interfaces. It streamlines the implementation of complex UI patterns including vertical and horizontal sortable lists, 2D reorderable grids, and sophisticated drop zone logic. By leveraging Reanimated 4 worklets, it ensures all animations run on the UI thread for maximum performance, while offering deep support for features like dynamic item heights, axis constraints, and customizable collision detection algorithms.

主な機能

01Pre-built Sortable and SortableGrid components for easy list reordering

02Sophisticated collision detection with center, intersect, and contain modes

031,004 GitHub stars

04Support for dynamic and variable-height items in sortable lists

0560fps UI-thread animations via Reanimated 4 and Worklets

06Customizable drag handles and axis-locking for precise movement control

ユースケース

01Developing complex drag-to-drop interfaces with multiple target zones

02Creating interactive photo galleries with draggable grid layouts

03Building reorderable task boards, kanban views, or todo lists

主な機能

01Pre-built Sortable and SortableGrid components for easy list reordering

02Sophisticated collision detection with center, intersect, and contain modes

031,004 GitHub stars

04Support for dynamic and variable-height items in sortable lists

0560fps UI-thread animations via Reanimated 4 and Worklets

06Customizable drag handles and axis-locking for precise movement control

ユースケース

01Developing complex drag-to-drop interfaces with multiple target zones

02Creating interactive photo galleries with draggable grid layouts

03Building reorderable task boards, kanban views, or todo lists