# react-native-nested-dnd

> Nested group drag and drop for react native

Latest version **1.1.2** (published 2021-09-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-nested-dnd
pnpm add react-native-nested-dnd
yarn add react-native-nested-dnd
bun add react-native-nested-dnd
```

## 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.1.2 |
| Published | 2021-09-27 |
| First published | 2021-09-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | corupta |

## Links

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

## Dependencies (1)

- [react-native-drag-sort-cr](https://npm.io/package/react-native-drag-sort-cr.md) ~2.7.3

## Recent versions

- 1.1.2 (latest) — 2021-09-27
- 1.1.1 — 2021-09-24
- 1.1.0 — 2021-09-24
- 1.0.2 — 2021-09-23
- 1.0.1 — 2021-09-22
- 1.0.0 — 2021-09-22

## README

# react-native-nested-dnd
Nested group drag and drop for react native

![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)
[![npm](https://img.shields.io/npm/v/react-native-nested-dnd.svg?style=flat)](https://npmjs.com/package/react-native-nested-dnd)

### Summary
I've implemented a ~~hacky~~ wrapper to use 
[react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort) 
by [@mochixuan](https://github.com/mochixuan) with nested groups.

Overall, this package allows drag&dropping items of groups across and within groups. 
Also, it allows reordering groups by dragging them.

Additionally, because of the DND core, it supports auto-scrolling when an item/group is dragged near the edge of the screen.

Special thanks to [@mochixuan](https://github.com/mochixuan) for building such a nice and performant DND core.

#### Implementation Details

The original package can work with custom sized items.
My way around is to convert groups and nested items into a flattened list.
Then, each item can be dragged & drop within and across different groups.
~~However, when a group is dragged, I quickly hide the items and put them inside the group view,
so that all items within the group will also be dragged. Finally, I revert this process when the drag ends.~~
Updated the core to take a count parameter, to make it move that many items when each item is moved. 
So group items' count are (items.length+1) whereas normal items' are 1. 
That way, when a group is moved, its children are also moved, and when a drag finishes, 
I re-create next groups data format, and call `updateGroups` prop. 
As a result, `groups` prop changes and the 1d flattened list is recreated from new `groups` (we start over)
Thus, we can achieve nested drag&drop.

### Installation

```bash
yarn add react-native-nested-dnd
or
npm i react-native-nested-dnd --save 

export { NestedDND }
```

### Tip
Please do not try to implement keys via indexes, use something like `uuid`. 
Keys being unique is critical for the package to work.



### Examples（with GIF）
Go to `examples/examples` folder
You can see the current examples here.
Go to `examples/App.js`, switch between different exports to try different examples.
You can run react-native within inside `examples/` folder.

* Please, check out the examples for how to use.

| [NestedDNDTest](https://github.com/corupta/react-native-nested-dnd/blob/master/examples/examples/NestedDNDTest.js) |
| ------ |
| ![NestedDNDTest](img/NestedDNDTest.gif?raw=true) |


### API

#### NestedDND

isRequired if there is a * in the name field

|Name|Proptypes|Default|Description|  
----|----|-----|---|
|**groups** *|array||main data
|**updateGroups** *|func||This method is called when the groups data changes after a finished drag.
|**renderItem** *|func||render item view
|**renderGroupHeader** *|func||render group header view
|**groupKeyExtractor**|func|`(g) => g.key`|(group) => key
|**itemKeyExtractor**|func|`(i) => i.key`|(item) => key
|**groupToItemsKey**|string|`"items"`|which property of each group contains an array of items (eg: group.items)
|**onGroupHeaderPress**|func||(group) => void
|**onItemPress**|func||(item) => void
|**movedWrapStyle**| StyleProp<ViewStyle> |`backgroundColor: 'blue, zIndex:999`|style
|**ghostStyle**| StyleProp<ViewStyle> |`{opacity:0.5}`|style
|**renderHeaderView**|element||
|**headerViewHeight**|number||
|**renderBottomView**|element||
|**bottomViewHeight**|number||


### Known Issues

* If a group is empty, cannot drag and drop an item inside it, for some reason. (I guess, need to update core so that it will support different heights better)
~~* When a group is dragged, due to the nature of my hacky implementation it blinks at first. Unfortunately, this won't be fixed. To fix it one might need to come up with a ground-up implementation that supports nested drag/drop. (Need to re-write current DND core)~~
* Group drag causes a different kind of flicker, now?

### Roadmap
* [X] Make the underlying core support multiple item push
* [X] Prevent underlying core's layout animation applying to flying item. (Replace LayoutAnimation with [re-animated](https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/layoutTransitions)). 
    * [X] Did the replacement but it looks like current reanimated doesn't work well with rn 0.65.1 
    * [ ] ~~It is being actively developed, so let's wait for it to be stabilized.~~ 
        * (When trying to run example `I get error Invariant Violation: `new NativeEventEmitter()` requires a non-null argument.`)
    * [X] Made it  work with re-animated v1's Transition API
* [X] Rewrite with React.PureComponent instead of functional component
* [ ] Find out the source of group drag flicker, and fix it (may need to update core, again)

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