Skip to main content

SortableContainer

Monitoring wrapper that handles drag detection, item reordering, and auto-scroll for a sortable list. Used with useSortableList and SortableItem.

Import​

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

Usage​

<SortableContainer sortable={sortable} scrollRef={listRef}>
  <FlatList ref={listRef} ... />
</SortableContainer>

Props​

PropTypeDefaultDescription
sortableSortableListHandle<any>requiredHandle from useSortableList
scrollRefRefObject<any>requiredRef to the scrollable list component
styleStyleProp<ViewStyle>—Container style
childrenReactNoderequiredList content
draxViewPropsPartial<DraxViewProps>—Extra props for the container's DraxView
renderDropIndicator(props: DropIndicatorProps) => ReactNode—Render a drop indicator at insertion point

Drop Indicator​

<SortableContainer
  sortable={sortable}
  scrollRef={listRef}
  renderDropIndicator={({ visible, horizontal }) => (
    <View
      style={{
        width: horizontal ? 2 : '100%',
        height: horizontal ? '100%' : 2,
        backgroundColor: '#cf5f34',
      }}
    />
  )}
>

The indicator is positioned automatically using animated translateX/translateY.

How It Works​

  • Wraps a DraxView with isParent and monitoring
  • Listens to onMonitorDragStart, onMonitorDragOver, onMonitorDragEnd, onMonitorDragDrop
  • Uses position-based slot detection (not receiver-based) for stable reorder behavior
  • Manages auto-scroll when dragging near container edges
  • Finalizes reorder after snap animation completes