Kanban

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-kanban

pnpm add react-native-gesture-handler react-native-reanimated

Usage

import { DocyKanban, type DocyKanbanColumn, type DocyKanbanItem } from '@/components/docyrus-native/kanban';

const columns: DocyKanbanColumn[] = [
  { id: 'todo', title: 'To Do', color: '#6366f1' },
  { id: 'progress', title: 'In Progress', color: '#f59e0b' },
  { id: 'review', title: 'Review', color: '#8b5cf6' },
];

const [items, setItems] = useState<DocyKanbanItem[]>([
  { id: 1, title: 'Setup CI', columnId: 'todo', priority: 'high', tag: 'DevOps' },
  { id: 2, title: 'Auth flow', columnId: 'progress', priority: 'medium', assignee: 'John' },
]);

<DocyKanban
  columns={columns}
  items={items}
  draggable
  showDoneSection
  onItemsChange={setItems}
  onCardPress={(item) => console.log(item.title)}
  onAddCard={(columnId) => console.log('add to', columnId)} />

DocyKanban (also exported as Kanban) is a monolithic adaptation of the web compound primitive (Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanOverlay, KanbanFinalZone, KanbanFinalColumn, …). On React Native the compound pieces would only re-wrap the same gesture + measurement plumbing, so the web capabilities are exposed as props instead: the board is KanbanBoard, each column header is the KanbanColumnHandle, every card is a KanbanItem, the floating copy that follows the finger is the KanbanOverlay, and final zones are KanbanFinalColumns.

Drag and drop

With draggable, long-press a card for 200 ms (the web touch-sensor delay) and drag it:

• Reorder inside a column. The other cards slide out of the way as you drag.
• Move to another column. The card lands exactly at the index shown by the gap.
• Drop on a final zone (Done / Archive / custom) to mark it final.

The board scrolls horizontally when you drag near its left or right edge. Because a card only activates after the long-press, a normal swipe still scrolls the board.

With columnDraggable (defaults to draggable), long-press a column header and drag it horizontally to reorder the columns. The other columns animate out of the way.

Moves are applied to the board optimistically. The board resyncs whenever items, value, columns or columnOrder changes.

Item sources

• Flat mode (items): items are grouped with getItemColumnId (default item.columnId). With the default accessor, a moved item is returned with its columnId updated (and done / archived set for the presets). So onItemsChange={setItems} keeps both the column AND the position. With a custom accessor, the item is returned untouched: use onValueChange or onMoveCard to persist the move.
• Grouped mode (value): the web Record<columnId, T[]> shape. It is authoritative for both membership and order. columns is optional here; without it, the keys become the columns.

Generic items

Any record type works. Pass getItemValue (the web name) for the id and a renderCard for the content. This is the mode a Docyrus kanban hook feeds with raw records and DocyrusKanbanColumnMeta columns:

type Deal = { id: string; name: string; amount: number };

<DocyKanban<Deal>
  columns={[
    { id: 'lead', label: 'Lead', icon: 'fal user-plus', color: '#0ea5e9' },
    { id: 'won', label: 'Won', color: '#22c55e', isFinal: true },
  ]}
  value={deals}
  onValueChange={next => setDeals(prev => ({ ...prev, ...next }))}
  getItemValue={deal => deal.id}
  draggable
  onFinalDrop={(deal, columnId) => closeDeal(deal.id, columnId)}
  onItemClick={id => openDeal(id)}
  renderCard={(deal, index, { isOverlay }) => <DealCard deal={deal} lifted={isOverlay} />} />

Final zones

Final zones are drop targets rendered below the board. Tap a zone to expand the items it holds. They come from three sources, and duplicate ids are ignored:

1. Columns with isFinal: true (the enum is_final_option from the web hook).
2. finalColumns — { id, label, color?, icon? }[].
3. The presets: showDoneSection (KANBAN_DONE_COLUMN_ID = '__done__') and showArchiveSection (KANBAN_ARCHIVE_COLUMN_ID = '__archive__'). In flat mode, items with done: true / archived: true land in these presets.

A final zone lists the items assigned to it: value[finalId] in grouped mode, or items whose column id is the final id in flat mode.

API Reference

All other View props (style, testID, …) are forwarded to the root view.

DocyKanbanColumn

A superset of the web hook's DocyrusKanbanColumnMeta.

DocyKanbanItem

The default item shape, used by the built-in rich card.

KanbanFinalColumn

KanbanMoveEvent

KanbanCardRenderContext

Translations

Components

Exports

Type Exports