Does this skill support horizontal sortable lists?

Yes, the Sortable component supports both vertical and horizontal directions. You can configure horizontal lists using the direction prop and defining the itemWidth.

What are the required peer dependencies for this skill?

You must have react-native-reanimated (>=4.2.0), react-native-gesture-handler (>=2.28.0), and react-native-worklets (>=0.7.0) installed in your React Native project.

How do I implement a drag handle instead of the whole item being draggable?

You can use the Draggable.Handle or SortableItem.Handle components within your item layout to restrict the drag-initiating area to a specific UI element.

Can I use this for 2D grid layouts?

Yes, the SortableGrid component is specifically designed for multi-column layouts and supports both 'Swap' and 'Insert' reordering strategies.

Is TypeScript supported for the data items?

Absolutely. The library and this skill are built with TypeScript, allowing you to pass typed data objects through the draggable and droppable components.

Reanimated Drag & Drop

Name: Reanimated Drag & Drop
Author: entropyconquers

byentropyconquers

•

1,004

•

Mobile Development

Integrates high-performance drag-and-drop, sortable lists, and grids into React Native applications using Reanimated 4.

This skill provides comprehensive guidance for implementing complex drag-and-drop interfaces in React Native using the performant react-native-reanimated-dnd library. It leverages the latest Reanimated 4 and Gesture Handler features to ensure 60fps animations and smooth user interactions on the UI thread. Developers can quickly scaffold sortable vertical or horizontal lists, 2D grids with swap or insert logic, and custom drop zones with advanced collision detection. By providing standardized implementation patterns and detailed prop references, this skill streamlines the creation of interactive mobile UI elements while maintaining optimal performance.

主要功能

01Advanced collision detection algorithms including center, intersect, and contain.

021,004 GitHub stars

03Precise control with axis-locking, bounded dragging, and dedicated drag handles.

04High-performance 60fps animations running on the UI thread via Reanimated 4.

05Customizable sortable grids with configurable dimensions and reordering strategies.

06Support for sortable vertical and horizontal lists with dynamic height auto-measuring.

使用场景

01Creating interactive photo galleries with sortable grid reordering.

02Building reorderable task lists, kanban boards, or dashboard layouts.

03Developing complex UI editors where elements move between distinct drop zones.

主要功能

01Advanced collision detection algorithms including center, intersect, and contain.

021,004 GitHub stars

03Precise control with axis-locking, bounded dragging, and dedicated drag handles.

04High-performance 60fps animations running on the UI thread via Reanimated 4.

05Customizable sortable grids with configurable dimensions and reordering strategies.

06Support for sortable vertical and horizontal lists with dynamic height auto-measuring.

使用场景

01Creating interactive photo galleries with sortable grid reordering.

02Building reorderable task lists, kanban boards, or dashboard layouts.

03Developing complex UI editors where elements move between distinct drop zones.