# @rameshupadhaya/react-native-dnd-board

> Drag and drop Kanban board like Trello

Latest version **1.0.0** (published 2023-04-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install @rameshupadhaya/react-native-dnd-board
pnpm add @rameshupadhaya/react-native-dnd-board
yarn add @rameshupadhaya/react-native-dnd-board
bun add @rameshupadhaya/react-native-dnd-board
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-04-28 |
| First published | 2023-04-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Hung Tran |
| Maintainers | rameshupadhaya |
| Keywords | draggable, board, drag, and, drop, react, native, drag and drop, react-native, kanban, trello, task, card |

## Links

- npm: https://www.npmjs.com/package/@rameshupadhaya/react-native-dnd-board
- Repository: https://github.com/rameshupadhaya/react-native-dnd-board
- Homepage: https://github.com/rameshupadhaya/react-native-dnd-board#readme
- Issues: https://github.com/rameshupadhaya/react-native-dnd-board/issues
- npm.io page: https://npm.io/package/@rameshupadhaya/react-native-dnd-board

## Dependencies (2)

- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) ^2.13.0
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) ^2.9.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-04-28

## README

# React Native DnD Board

A drag and drop Kanban board for React Native using [Reanimated (V1)](https://github.com/software-mansion/react-native-reanimated) and [React Native Gesture Handler](https://github.com/software-mansion/react-native-gesture-handler).

<img src="./demo-ios.gif" width="400">   <img src="./demo-android.gif" width="396">

## Installation

### Step 1:

Install [Reanimated V1](https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/getting_started).

### Step 2:

Install [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/).

Make sure your `MainActivity.java` was updated by [follow all Android instructions](https://docs.swmansion.com/react-native-gesture-handler/docs/#android).

**React Native Gesture Handler IMPORTANT NOTE:** If you're using [wix/react-native-navigation](https://github.com/wix/react-native-navigation),
please wrap your board screen using `gestureHandlerRootHOC` ([View RNGH docs for more details](https://docs.swmansion.com/react-native-gesture-handler/docs/#with-wixreact-native-navigation)).
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:
```js
repository.updateData(data);
```
#### Handle column data:
```js
repository.addColumn(data);
```
```js
repository.updateColumn(columnId, data);
```
```js
repository.deleteColumn(columnId);
```
#### Handle row data:
```js
repository.addRow(columnId, data);
```
```js
repository.updateRow(rowId, data);
```
```js
repository.deleteRow(rowId);
```

#### Get rows with index updated:
```js
const { rows } = repository.getItemsChanged();
```
**[Example](https://github.com/hungga1711/react-native-dnd-board/blob/master/example/App.js)**
## Usage

You need to build `Repository`

```js
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`

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

`renderColumnWrapper` function

```js
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](https://github.com/hungga1711/react-native-dnd-board/blob/master/example/App.js) for more details.

## Performance

We're trying to improve board performance. If you have a better solution, please open a [issue](https://github.com/hungga1711/react-native-dnd-board/issues)
or [pull request](https://github.com/hungga1711/react-native-dnd-board/pulls). Best regards!

---
_Source: https://npm.io/package/@rameshupadhaya/react-native-dnd-board · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._