react-native-nested-dnd v1.1.2
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
- 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.)
- (When trying to run example
- 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)