@tcmfiles/react-native-dnd-board v0.0.10

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

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!