Can I use this for lists with items of different heights?

Yes, the skill covers the 'enableDynamicHeights' feature which automatically measures and handles variable-height items in sortable lists.

What version of Reanimated is required for this skill?

This skill is optimized for react-native-reanimated version 4.2.0 or higher, leveraging the latest performance improvements.

Does it support restricted drag areas like handles?

Absolutely. It provides specific patterns for implementing Draggable.Handle and SortableItem.Handle to restrict drag triggers to specific UI elements.

How does it handle item reordering in grids?

It supports multiple grid strategies including 'Insert' and 'Swap' to define exactly how items should shift when a user drags over them.

Are the drag-and-drop interactions cross-platform?

Yes, the patterns provided work across both iOS and Android, maintaining high performance on both platforms via Gesture Handler and Reanimated.

Reanimated Drag and Drop

Name: Reanimated Drag and Drop
Author: entropyconquers

byentropyconquers

•

1,004

•

Mobile Development

Implements high-performance, 60fps drag-and-drop interfaces, sortable lists, and grids in React Native using Reanimated 4.

This skill provides expert guidance for integrating the react-native-reanimated-dnd library into React Native projects. It enables the creation of fluid, production-grade interactions such as reorderable lists, 2D sortable grids, and complex drop-zone logic. By utilizing Reanimated 4 and Gesture Handler, the skill ensures all animations run exclusively on the UI thread for maximum performance. It covers advanced implementation patterns including collision detection, axis locking, dynamic item height measurement, and custom drag handles, making it essential for building sophisticated mobile user interfaces.

Características Principales

011,004 GitHub stars

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

03Advanced sortable grid support with custom columns and reordering strategies

04Automatic layout measurement for variable-height list items

05Sophisticated collision detection algorithms including center, intersect, and contain

06Pre-configured patterns for vertical and horizontal sortable lists

Casos de Uso

01Developing photo gallery editors with sortable grid functionality

02Creating interactive dashboard layouts with draggable and swappable widgets

03Building reorderable task lists or Kanban boards with smooth transitions

Características Principales

011,004 GitHub stars

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

03Advanced sortable grid support with custom columns and reordering strategies

04Automatic layout measurement for variable-height list items

05Sophisticated collision detection algorithms including center, intersect, and contain

06Pre-configured patterns for vertical and horizontal sortable lists

Casos de Uso

01Developing photo gallery editors with sortable grid functionality

02Creating interactive dashboard layouts with draggable and swappable widgets

03Building reorderable task lists or Kanban boards with smooth transitions