React Native Expo Kanban
Drag-and-drop kanban boards for React Native.
A controlled kanban board component for Expo apps. Bring your own cards, keep your own state, and let Reanimated handle the motion.
Overview
Create kanban screens for Android, iOS, and Expo
The board renders one column at a time on phones and pages horizontally as cards are dragged toward the edge. Cards lift on long-press, follow your finger, and drop into the column under the viewport.
- Controlled columns — you own the data and the drop logic
- Custom cards and headers with render props
- Drag preview, drop hover states, and edge pagination
- TypeScript generics for items and column headers
10
GitHub stars
2
Forks
1.1k
Total npm downloads
MIT
License
Features
Everything you need for a kanban screen
The component handles gestures, drag previews, and pagination. Your app keeps ownership of data, rendering, and business rules.
Drag and drop
Long-press a card, drag across columns, and drop. Edge pagination auto-scrolls the board while you move.
Custom rendering
renderItem and renderHeader are fully controlled. Your cards, your typography, your design system.
Built on Reanimated
Gestures and drop animations run on the UI thread, keeping interactions fluid even with dense columns.
Made for Expo
Works with Expo Go and development builds. The package has no native modules of its own.
Controlled data model
Columns are a plain array. Move items in onDragEnd and the board re-renders from your state.
TypeScript support
Generic props keep item and header shapes type-safe across renderItem, renderHeader, and onDragEnd.
Demo
Drag, page, and drop between columns
Dragging near either edge pages the board to the next column. Releasing a card over a new column fires onDragEnd, while a drop in the same column springs the preview back into place.
Every interaction runs through Reanimated's shared values, so the drag preview stays smooth on both platforms.
Explore examples
Quick start
From install to dragging in four steps
- 1Install the package and its peer dependencies.
- 2Describe columns as an array of headers and items.
- 3Render your cards and column headers.
- 4Move the item in onDragEnd to update your state.
import React, { useState } from 'react';
import ReactNativeKanbanBoard from 'react-native-expo-kanban';
export default function BoardScreen() {
const [columns, setColumns] = useState(initialColumns);
return (
<ReactNativeKanbanBoard
columnData={columns}
renderItem={(item, isDragged) => (
<LeadCard item={item} isDragged={isDragged} />
)}
renderHeader={(header) => <ColumnHeader {...header} />}
onDragEnd={({ fromColumnIndex, toColumnIndex, itemId }) => {
setColumns((prev) =>
moveCard(prev, fromColumnIndex, toColumnIndex, itemId)
);
}}
columnWidth={320}
gapBetweenColumns={12}
/>
);
}Documentation
Explore the documentation
Setup instructions, the full prop and type reference, and a file-by-file look at how the board is built.
Ready to add a kanban board?
Install the package, render your cards, and handle one callback. The board takes care of gestures and column pagination.