[Bug]: can't work with ContextMenu such as zeego

[liixing]

Description

Thanks for the great library.

I have implemented a ContextMenu using Zeego. However, it is also triggered by a long press, so the contextMenu cant't show in the screen

Steps to reproduce

I am using a renderItem with a ContextMenu.
However, the ContextMenu fails to display when i long press the item

Code snippet, Snack or GitHub repository link

https://github.com/liixing/sortables

React Native Sortables version

1.7.1

Reanimated version

4.0.0-beta5

React Native Gesture Handler version

2.24.0

React Native version

0.79.4

Platforms

iOS

Architecture

None

Workflow

None

Device

No response

Acknowledgements

Yes

[MatiPl01]

Hey @liixing!

Thanks for reporting the issue. Could you possibly share a reproduction code snippet? It will help me debug the issue.

[liixing]

@MatiPl01 Hi, I've created a reproduction repo for the issue. You can check it out here: sortables. I've tested it on iOS using a development build.

[MatiPl01]

A quick update on this one. I noticed that the issue is caused by the change of the zIndex value of the sortable component when you start/end dragging. I change zIndex from 0 to a greater value on the currently active Sortable component in order to make sure that the active item, that is dragged around, renders above its other siblings (by default it will render below components rendered later on the screen).

Why it breaks?

When the native context menu pops up, the react-native-gesture-handler's gesture that I use in my library receives the onTouchesCancelled event. When touches are cancelled, I assume that the dragging is finished and do the cleanup of values, as well as, set the zIndex back to 0. This change of zIndex of the parent component of the item which context menu is open changes the stacking context in which the item is rendered and somehow impacts the native context menu, which in result gets closed. It often is very quick, so you don't even see the menu opening.

I will think about solution to this problem. If I don't figure out any good solution, I will just add another prop to the Sortable.Grid that will disable this zIndex change but it may result in rendering dragged items below other content on the scren.