SortableBoardContainer Experimental

Monitoring wrapper that coordinates cross-container item transfers. Detects when a drag crosses column boundaries and manages phantom slots, ejection, and transfer finalization.

Import

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

Usage

<SortableBoardContainer board={board} style={styles.board}>
  {columns.map((col) => (
    <Column key={col.id} id={col.id} items={col.items} />
  ))}
</SortableBoardContainer>

Props

Prop	Type	Default	Description
board	SortableBoardHandle<TItem>	required	Handle from useSortableBoard
style	StyleProp<ViewStyle>	—	Container style
children	ReactNode	required	Column components
draxViewProps	Partial<DraxViewProps>	—	Extra DraxView props

How It Works

1. Wraps a DraxView with monitoring — listens to all drags inside the board
2. Provides SortableBoardContext — columns auto-register via useEffect
3. On onMonitorDragOver, checks if hover position crosses column boundaries
4. Source→Target transfer: ejects item from source, creates phantom slot in target
5. Drop/End: fires onTransfer, clears state, hover covers the transition

Related

• Cross-Container Drag Guide
• useSortableBoard — Board-level hook
• SortableContainer — Column-level container