Getting started
Introduction
react-native-expo-kanban is a controlled kanban board component for React Native and Expo. It handles gestures, drag previews, and column pagination while you keep ownership of data and rendering.
Overview
One component, two callbacks you care about, and a plain array of columns.
The package exports a single default component, ReactNativeKanbanBoard. You describe your board as an array of columns, each with a header object and an array of items. You render each card and header with your own components. When a card is dropped into a different column, the board calls onDragEnd with the source index, destination index, and item id.
Fits any Expo workflow
react-native-reanimated and react-native-gesture-handler, both of which are supported by Expo Go and development builds.Features
What ships in the box.
Drag & drop
Long-press to lift, drag to another column, release to drop.
Custom rendering
renderItem and renderHeader keep your design system intact.
Responsive
Column width defaults to 80% of the screen and is overridable.
Controlled data
Move items in onDragEnd; the board renders from your state.
Reanimated 3
Drop previews and pagination run on the UI thread.
Typed
Generic item and header types across every callback.
How it works
The component is a horizontal FlatList of vertical FlatLists.
01
Columns
A horizontal paging FlatList holds one view per column.
02
Cards
Each column is a vertical FlatList of DataCard wrappers.
03
Gesture
A shared pan gesture drives the drag overlay and pagination.
Only the column under the viewport is draggable at a time. useDragGesture tracks the lifted card, useColumnPagination scrolls when the pointer nears an edge, and the drop callback decides whether onDragEnd should fire.
Quick start
Install the package, then render the board with your columns.
<ReactNativeKanbanBoard
columnData={columns}
renderItem={(item, isDragged) => <Card item={item} active={isDragged} />}
renderHeader={(header) => <Text>{header.title}</Text>}
onDragEnd={({ fromColumnIndex, toColumnIndex, itemId }) => {
moveItem(fromColumnIndex, toColumnIndex, itemId);
}}
/>;Project status
The package is open source and MIT licensed.