react-native-nested-dnd
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

react-native-nested-dnd

Nested group drag and drop for react native

GitHub license npm

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-nested-dnd

Weekly Downloads

2

Version

1.1.2

License

ISC

Unpacked Size

17.2 kB

Total Files

9

Last publish

Collaborators

  • corupta