Drag to Sort with Reanimated and Gesture Handler 🤌🏽

What's This About?

• Items can be dragged to reorder
• Visual feedback shows current position
• Items adjust their shape while dragging
• Gradient overlay adds depth

Technical Implementation

• Reanimated for drag gestures
• Custom list implementation for z-index handling
• Position tracking with shared values
• Linear gradient overlay
• Safe area handling

Usage

type Item = {
  id: string;
  title: string;
  // other item properties
};

// Basic usage
<SortableList
  data={items}
  listItemHeight={80}
  onDragEnd={(positions) => {
    console.log('New order:', positions);
  }}
  renderItem={({ item, index }) => (
    <ListItem
      item={item}
      index={index}
      style={{
        height: 80,
        margin: 6,
      }}
    />
  )}
/>;