API reference

Hooks

The board is assembled from four hooks. They are internal, but understanding them helps when debugging gestures or building a custom board.

useDragGesture

Owns the pan gesture, drag preview values, and the dropped-item state.

The hook creates a manual-activation pan gesture. It only activates after a card has been lifted via long-press, then writes translation values into dragX and dragY shared values.

useDragGesture.ts

const { pan, dragItem, dragX, dragY, setDragCard } = useDragGesture({
  paginate,
  toColumnIndex,
  onDragEndSuccess: props.onDragEnd,
  onDrop: enableScrollers,
});

Prop	Type	Default	Description
paginaterequired	"left" \| "right" \| "center"	—	Scrolls the horizontal pager while the drag pointer nears an edge.
toColumnIndexrequired	number	—	The column currently under the viewport, used to decide whether a drop changed columns.
onDragEndSuccessrequired	(params) => void	—	The board's onDragEnd callback.
onDroprequired	() => void	—	Called on every gesture finalize, used to re-enable scrolling.

Edge thresholds

Pagination triggers when absoluteX is within 50px of either screen edge. The throttle in useColumnPagination prevents rapid repeats.

useColumnPagination

Scrolls the board left, right, or back to center.

useColumnPagination.ts

const { paginate, updateCurrentColumnIndex } = useColumnPagination({
  columnsHorizontalScrollRef,
  constants: {
    edgeColumnOff,
    columnContainerWidth,
  },
});

// Longitudinal pagination while dragging near the screen edges
paginate('left');
paginate('center');
paginate('right');

Prop	Type	Default	Description
columnsHorizontalScrollRefrequired	AnimatedRef<Animated.FlatList>	—	Ref to the horizontal column list.
constantsrequired	{ edgeColumnOff: number; columnContainerWidth: number }	—	Precomputed offsets derived from the screen and column widths.

paginate is throttled to one call per second with leading edge execution. It also stores the currently visible column index, updated when horizontal momentum scrolling ends.

useLayoutAnimation

A small wrapper around React Native LayoutAnimation.

MyList.tsx

import { useLayoutAnimation } from 'react-native-expo-kanban/dist/hooks/useLayoutAnimation';

function MyList({ items }) {
  useLayoutAnimation(items, { effectType: 'easeInEaseOut', duration: 200 });
  return <List data={items} />;
}

Prop	Type	Default	Description
effectType	'linear' \| 'spring' \| 'easeInEaseOut' \| 'opacitiy'	'opacitiy'	LayoutAnimation preset. Note the original spelling in the source.
duration	number	200	Animation duration in milliseconds.

The hook enables layout animations, applies a preset, and disables them again after 250ms. This workaround keeps Android animations reliable alongside Reanimated.

useDragContext

Read the card currently being dragged from any descendant.

CardOverlay.tsx

import { useDragContext } from 'react-native-expo-kanban/dist/utils/DraggedCardContext';

function CardOverlay() {
  const { dragCard, dragCardX, dragCardY } = useDragContext();

  if (!dragCard) return null;

  return <Text>Dragging {dragCard.id}</Text>;
}

The context exposes setDragCard, dragCard, and the shared dragX / dragY values. It is provided by the board, so consumers must render inside it.

Composing hooks

How the board wires them together.

useColumnPagination exposes paginate and the current column index.
useDragGesture consumes paginate and the current column index.
The board subscribes to the drop preview with useAnimatedStyle.
DragContextValue.Provider shares drag state with cards.

Not a public API

These hooks are shipped in dist and can be imported by deep path, but they are not covered by semver. Prefer the component unless you need something custom.