Skip to main content

SortableItem

Per-item wrapper that handles shift animations, visibility during drag, and measurement tracking. Used with useSortableList and SortableContainer.

Import​

import { SortableItem } from 'react-native-drax';

Usage​

<SortableItem sortable={sortable} index={index}>
  <View style={styles.item}>
    <Text>{item.label}</Text>
  </View>
</SortableItem>

Props​

Extends all DraxViewProps plus:

PropTypeDefaultDescription
sortableSortableListHandle<any>requiredHandle from useSortableList
indexnumberrequiredCurrent index in the list
childrenReactNoderequiredItem content

All DraxViewProps are supported — they're spread onto the inner DraxView:

<SortableItem
  sortable={sortable}
  index={index}
  dragHandle              {/* Enable drag handle */}
  hoverStyle={{ opacity: 0.8 }}
  longPressDelay={500}
>
  ...
</SortableItem>

Accessibility​

Auto-generated attributes (overridable via props):

AttributeDefault Value
accessibilityLabel"Item {N} of {M}"
accessibilityHint"Long press to drag and reorder"
accessibilityRole"adjustable"

How It Works​

  • Wraps content in Reanimated.View with animated shift transform
  • Shift values come from shiftsRef SharedValue (keyed by item key)
  • Visibility controlled by hoverReadySV + draggedIdSV — hidden when being dragged
  • Measures itself on layout and stores in itemMeasurements Map
  • Calls onItemSnapEnd when snap-back completes (triggers reorder finalization)
  • Respects reduced motion via useReducedMotion()