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
yarn add react-native-reanimated@^1.13.3
or
npm i react-native-nested-dnd --save 
npm i react-native-reanimated@^1.13.3 --save

cd ios
pod install

Usage

import { NestedDND } from 'react-native-nested-dnd'

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

• Make the underlying core support multiple item push
• Prevent underlying core's layout animation applying to flying item. (Replace LayoutAnimation with re-animated).
  • 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.)
  • Made it work with re-animated v1's Transition API
• 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)