Getting started

Installation

Add the package, install its peers, and wire up the two native dependencies it relies on.

Requirements

The package itself is JavaScript only; the peers do the native work.

React Native with Expo (Expo Go or a development build)
react-native-reanimated 3.x
react-native-gesture-handler 2.x
lodash 4.x
TypeScript is optional but recommended

Version ranges

The published peer ranges are react-native-reanimated ^3.x, react-native-gesture-handler ^2.x, and lodash ^4.x.

Install the package

Pick your package manager. The same command works inside an Expo project.

$ npm install react-native-expo-kanban

terminal

# Core component
npm install react-native-expo-kanban

# Required peer dependencies
npm install react-native-reanimated react-native-gesture-handler lodash

Installing the peers separately keeps you in control of their versions, which matters because Reanimated must match your Expo SDK.

Peer dependencies

Why each peer is required.

react-native-reanimatedDrives the drag overlay, rotation, scale, and spring return.

react-native-gesture-handlerCaptures the long-press and pan gestures used to lift cards.

lodashThrottles column pagination so edge scrolling cannot fire in a loop.

Reanimated setup

Reanimated needs its Babel plugin. Newer Expo versions enable it automatically.

On Expo SDK 50 and newer, babel-preset-expo already includes the Reanimated plugin. On older projects, add it as the last plugin in babel.config.js.

babel.config.js

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Plugin order matters

The Reanimated plugin must be the last entry in the plugins array. If you change Babel config, clear the Metro cache with npx expo start -c.

Expo setup

Gesture Handler needs a root view, and the board needs a parent with height.

Wrap your application in GestureHandlerRootView. Without it, gestures will not reach the board on some platforms.

App.tsx

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app */}
    </GestureHandlerRootView>
  );
}

The board uses a horizontal FlatList. Make sure the screen or parent view gives it height — for example with flex: 1 on the screen container.

Verify

Render a tiny board to confirm everything is wired up.

SmokeTest.tsx

<ReactNativeKanbanBoard
  columnData={columns}
  renderItem={(item, isDragged) => <Card item={item} active={isDragged} />}
  renderHeader={(header) => <Text>{header.title}</Text>}
  onDragEnd={({ fromColumnIndex, toColumnIndex, itemId }) => {
    moveItem(fromColumnIndex, toColumnIndex, itemId);
  }}
/>;

Long-press a card and drag it to the next column. If it moves, you are ready.

Next: Usage