CODEWITHSUNDEEP
react-nativenested-listsreact-native-flatlistreact-native-draggable-flatlist
Per Quested Aronsson
Per Quested Aronsson

Reputation: 12120

How to keep drag overflow visible in react-native-draggable-flatlist

In react-native-draggable-flatlist, there is a an option dragItemOverflow, which makes it possible to drag items outside the list. To keep the items visible when they pass the list border I also had to add something like

<NestableDraggableFlatList
    style={{overflow:'visible'}}

In this (updated) Snack, Navigate to "Nested" and try dragging an item from any of the lists vertically outside the list container. Going up, it goes on top of all other elements, but going down, it only goes on top of the header below, not on top of the elements in the lists below. How can I make it go on top of all elements below?

I have tried setting zIndex on relevant elements (parents and children), but no luck so far. Can the problem be related to this issue?

Upvotes: 3

Views: 828

Answers (1)

Per Quested Aronsson
Per Quested Aronsson

Reputation: 12120

It can be solved by setting both style overflow and containerStyle zIndex. zIndex has to be applied conditionally, so that only the list containing the active item receives the elevated zIndex.

<NestableDraggableFlatList
    style={{overflow:'visible'}}
    containerStyle={{zIndex: activeListId === 1 ? 100 : 0}}

For implementation details, see this Updated Snack. Navigate to Nested and drag items to test. The code is in Project->Screens->Nested.

But maybe there is a better way? Please suggest if you know any.

Upvotes: -1

Related Questions