Kanban Board Experimental
Demonstrates cross-container drag — moving items between sortable columns (kanban board pattern).
Key Concepts
useSortableBoard— board-level coordinatorSortableBoardContainer— monitoring wrapper for the board- Phantom slots — target column reserves space for incoming item
- Smooth transfers — hover covers the transition between columns
Features Shown
| Feature | How |
|---|---|
useSortableBoard | Board-level coordinator with onTransfer |
SortableBoardContainer | Wraps all columns, detects cross-boundary drags |
Per-column useSortableList | Each column manages its own reorder state |
| Cross-container transfer | Items move between columns on drop |
Source Code
example/app/(tabs)/kanban-board.tsx
// Full source available at:
// https://github.com/nuclearpasta/react-native-drax/blob/main/example/app/(tabs)/kanban-board.tsx
Related
- Cross-Container Drag Guide — Full tutorial
- API: useSortableBoard — Hook reference
- API: SortableBoardContainer — Container reference