react-native-nested-dnd

Nested group drag and drop for react native

Summary

I've implemented a ~~hacky~~ wrapper to use react-native-drag-sort by @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 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

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

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 |backgroundColor: 'blue, zIndex:999|style |ghostStyle| StyleProp |{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).
  • [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)