react-native-drag-dnd-board

React Native DnD Board

A drag and drop Kanban board for React Native using Reanimated (V3 Support up to 3.17.5) and React Native Gesture Handler (V2 Support up to 2.25.0).

Installation

Step 1:

Install Reanimated V3.

Step 2:

Install React Native Gesture Handler V2.

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-drag-dnd-board

with yarn:

yarn add react-native-drag-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!