Expo Kanban
1.1k
On this page4 sections
Required propsLayout propsStyle propsFull reference

API reference

Props

The component accepts four required props and seven optional styling and layout props.

Required props

These four props define the board.

PropTypeDefaultDescription
columnDatarequiredcolumnDataType<T, K>[]—Ordered list of columns. Each entry has a header object K and an items array T[].
renderItemrequired(props: T, isDragged?: boolean) => JSX.Element—Renders each card. isDragged is true for the floating drag preview.
renderHeaderrequired(props: K) => JSX.Element—Renders the header of each column. The item count is appended by the board.
onDragEndrequired(params: { fromColumnIndex: number; toColumnIndex: number; itemId: string }) => void—Called when a card is dropped into a different column. Mutate your state here.

The board never mutates your data

columnData is treated as read-only. Moving an item is your responsibility inside onDragEnd.

Layout props

Control how wide columns are and how the board sits in its parent.

PropTypeDefaultDescription
columnWidthnumberscreen width × 0.8Width of each column in pixels. Also used as the horizontal snap interval.
gapBetweenColumnsnumber12Horizontal gap between columns. The same value is used as inner column padding.
containerStyleViewStyle{}Style for the outer horizontal FlatList. Use it for flex, background, or margins.
contentContainerStyleViewStyle{}Style for the horizontal FlatList content container. Useful for vertical padding.

Style props

All styles are React Native ViewStyle objects.

PropTypeDefaultDescription
columnHeaderStyleViewStyle{}Style for the header wrapper of each column, above the card list.
columnContainerStyleViewStyle{}Base style applied to every column container.
columnContainerStyleOnDragViewStyle{}Merged over columnContainerStyle when another column is the active drop target.

Full reference

The complete TypeScript interface, copied from src/types.ts.

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;
}
4required props
7optional props
2generics
1drag callback
PreviousExamplesNextTypes