API reference

Types

The library is generic over your item and header shapes. These are the public types that describe the contract.

Board props

KanbanBoardProps is the full prop contract.

types.ts

export type columnDataType<T, K> = {
  header: K;
  items: T[];
};

export type ItemType = { id: string };

export type HeaderParams = {
  title: string;
  subtitle?: string;
};

export interface DraggedCardProps<T> {
  id: string;
  y: number;
  x: number;
  width: number;
  props: T;
  columnIndex: number;
}

export interface KanbanBoardProps<T extends ItemType, K> {
  columnData: columnDataType<T, K>[];
  renderItem: (props: T, isDragged?: boolean) => JSX.Element;
  renderHeader: (props: K) => JSX.Element;
  onDragEnd: (params: {
    fromColumnIndex: number;
    toColumnIndex: number;
    itemId: string;
  }) => void;
  containerStyle?: ViewStyle;
  contentContainerStyle?: ViewStyle;
  columnHeaderStyle?: ViewStyle;
  columnContainerStyle?: ViewStyle;
  columnContainerStyleOnDrag?: ViewStyle;
  columnWidth?: number;
  gapBetweenColumns?: number;
}

Column data

A column pairs a header with its items.

column.ts

export type columnDataType<T, K> = {
  header: K;
  items: T[];
};

The column order in the array is the visual order on screen. There is no separate id for a column — indices are used in onDragEnd.

Item types

Any item shape works as long as it has a string id.

item.ts

export type ItemType = { id: string };

The README's demo uses a lead-shaped item. It is a good example of a richer record, but it is not required by the component.

ItemParams.ts

export type ItemParams = {
  id: string;
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  company: string;
  created_on: string;
  priority: string;
  status: string;
  notes: string;
  assigned_to: {
    first_name: string;
    last_name: string;
    profile_pic: null;
  };
};

Drag types

Used internally by the drag context and card wrapper.

drag.ts

export interface DraggedCardProps<T> {
  id: string;
  y: number;
  x: number;
  width: number;
  props: T;
  columnIndex: number;
}

DraggedCardProps stores the measured position and size of the lifted card so the overlay can be placed exactly where the card was before the gesture began.

Import paths

The package entry point default-exports the component. The types are compiled to dist/types.d.ts but are not re-exported from dist/index.d.ts. Define your own item and header types locally — the generics keep them checked at the call site.

Generics

T is the item, K is the header.

BoardScreen.tsx

type Lead = {
  id: string;
  name: string;
  company: string;
  priority: 'low' | 'medium' | 'high';
};

type ColumnHeader = {
  title: string;
  subtitle?: string;
};

// T = Lead, K = ColumnHeader
<ReactNativeKanbanBoard<Lead, ColumnHeader>
  columnData={columns}
  renderItem={(lead, isDragged) => (
    <LeadCard lead={lead} isDragged={isDragged} />
  )}
  renderHeader={(header) => <Header {...header} />}
  onDragEnd={({ itemId }) => console.log(itemId)}
/>;

If you pass explicit generics, TypeScript validates every callback. Without them, the component infers T and K from columnData.