React Native DnD Board

A drag and drop Kanban board for React Native using Reanimated (V1) and React Native Gesture Handler.

Installation

Step 1:

Install Reanimated V1.

Step 2:

Install React Native Gesture Handler.

Make sure your MainActivity.java was updated by follow all Android instructions.

React Native Gesture Handler IMPORTANT NOTE: If you're using wix/react-native-navigation, please wrap your board screen using gestureHandlerRootHOC (View RNGH docs for more details). If not do it, your board won't work.

Step 3:

Install this package using npm or yarn

with npm:

npm install react-native-dnd-board

with yarn:

yarn add react-native-dnd-board

API reference

The package exports a Board component which is the one you'd use to render the dnd board and a Repository class to handle column, row layout.

Board

| Property | Type | Required | Description | | :------------------ | :------------------------------------------------------ | :------: | :---------------------------------------------------------------------- | | repository | Repository | yes | Object that holds data | | renderRow | ({ item, index }) => {} | yes | Function responsible for rendering row item | | renderColumnWrapper | ({ item, index, columnComponent, layoutProps }) => {} | yes | Function responsible for rendering wrapper of the column | | onRowPress | (row) => {} | no | Function invoked when row pressed | | onDragStart | () => {} | no | Function invoked when drag is started | | onDragEnd | (fromColumnId, toColumnId, row) => {} | no | Function invoked when drag is finished | | style | StyleProp | no | Style of the board | | columnWidth | number | no | Initial min column width | | accessoryRight | function\|View | no | Render end of the board. Useful when rendering virtual add more column. | | activeRowStyle | StyleProp | no | A custom style for the row when being dragged. | | activeRowRotation | number | no | Degrees to rotate the row when being dragged. Default is 8. | | xScrollThreshold | number | no | Offset from X to calculate scroll from. Default is 50. | | yScrollThreshold | number | no | Offset from Y for the rows. Default is 50. | | dragSpeedFactor | number | no | When dragging you can accelerate the scrollTo position. Default is 1. |

Repository

Update repository data:

repository.updateData(data);

Handle column data:

repository.addColumn(data);

repository.updateColumn(columnId, data);

repository.deleteColumn(columnId);

Handle row data:

repository.addRow(columnId, data);

repository.updateRow(rowId, data);

repository.deleteRow(rowId);

Get rows with index updated:

const { rows } = repository.getItemsChanged();

Example

Usage

You need to build Repository

import Board, { Repository } from "react-native-dnd-board";

const mockData = [
  {
    id: "1",
    name: "Column 1",
    rows: [
      {
        id: "11",
        name: "Row 1 (Column 1)",
      },
      {
        id: "12",
        name: "Row 2 (Column 1)",
      },
    ],
  },
  {
    id: "2",
    name: "Column 2",
    rows: [
      {
        id: "21",
        name: "Row 1 (Column 2)",
      },
    ],
  },
];

const [repository, setRepository] = useState(new Repository(mockData));

Render the Board

<Board
  repository={repository}
  renderRow={renderCard}
  renderColumnWrapper={renderColumnWrapper}
  onRowPress={onCardPress}
  onDragEnd={onDragEnd}
/>

renderColumnWrapper function

const renderColumnWrapper = ({ item, columnComponent, layoutProps }) => {
  return (
    <View style={styles.column} {...layoutProps}>
      <Text style={styles.columnName}>{item.name}</Text>
      {columnComponent}
    </View>
  );
};

IMPORTANT: You need pass layoutProps to wrapper view props and columnComponent must be rendered inside renderColumnWrapper fuction.

See example for more details.

Performance

We're trying to improve board performance. If you have a better solution, please open a issue or pull request. Best regards!