[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.

[Wolf-Den1994]

Hello, I have the same problem with Zeego.
Right now I’m using it like this:

const [dragEnable, setDragEnable] = useState(false);

<Sortable.Flex
  sortEnabled={dragEnable}
  dragActivationDelay={400}
  ...
>
  {data.map((item) => (
    <TapToDismissLayout key={item.id} onTapEnd={() => setDragEnable(false)}>
      <StyledContextMenu onDragStart={() => setDragEnable(true)}>
        <MyComponent item={item} />
      </StyledContextMenu>
    </TapToDismissLayout>
  ))}
</Sortable.Flex>

import * as ContextMenu from 'zeego/context-menu';
...
const StyledContextMenu = ({ children, onDragStart }: Props) => {
  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
      <ContextMenu.Content style={contextStyles.content}>
        <ContextMenu.Preview>{children}</ContextMenu.Preview>

        <ContextMenu.Item style={contextStyles.item} onSelect={onDragStart} key="drag">
          <ContextMenu.ItemTitle>Sortable (dnd)</ContextMenu.ItemTitle>
        </ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  );
};

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { runOnJS } from 'react-native-reanimated';
...
const TapToDismissLayout = ({ children, onTapEnd }: Props) => {
  const tapToDismiss = useMemo(() => {
    return Gesture.Tap()
      .maxDistance(20)
      .cancelsTouchesInView(false)
      .onEnd(() => {
        if (onTapEnd) {
          runOnJS(onTapEnd)();
        }
      });
  }, [onTapEnd]);

  return <GestureDetector gesture={tapToDismiss}>{children}</GestureDetector>;
};

This works as follows: when I long press, a menu appears where I can enable Drag&Drop. And it turns off with any tap on the component. I set dragActivationDelay to 400 in order to block opening the ContextMenu when dragEnable is true. I think this is a hack. But I have no idea how to make it work like icons on the iPhone home screen: when you hold down, a menu appears, and when you start dragging, the icons can be rearranged.
I hope it will work without hacks. Thanks, for great lib.

[MatiPl01]

@Wolf-Den1994 Can you check if setting bringToFrontWhenActive to false fixes the issue? It changes the behavior a little bit as the active item might be rendered below other items afterwards but it might be sufficient in your case.

If not, then I have another idea that might be working. I can change the zIndex after the active item is moved by the minimum threshold offset and keep it unchanged if it doesn't reach this threshold, so that the zIndex is unaffected when the item is just long pressed. I will try to implement this later on and see if it works.

[liixing]

@MatiPl01 hi , bringToFrontWhenActive is not woking

[Wolf-Den1994]

@MatiPl01 Hi!
bringToFrontWhenActive doesn’t work for me either.
I set up a clean project to reproduce the conflict and added my hacky workaround project link. Here’s also the solution I tried PR link. This approach works for me, but ideally it would behave like the iPhone home screen when editing icons. I realize this might not even be possible, but I hope there could be some ideas on how to achieve something similar:

• press & drag -> triggers sorting
• hold a bit longer (e.g. +500ms) -> shows the context menu

I also noticed my previous comment with hack works fine on iOS, but poorly on Android, since you need to split the logic with something like: Platform.OS === 'android' && !dragEnable

Here’s what I found while testing the repo:

1. main branch (pay attention to delay defined at the top)

1.1. Android: with both 600ms and 300ms delay, behavior doesn’t change - context menu and sorting both trigger on long press togther

video_2025-08-25_15-27-15.mp4

1.2. iOS: with 600ms delay -> context menu shows first, blocks can’t be moved. With 300ms delay -> drag starts first and the menu doesn’t appear.

IMG_0053.MP4

2. fix branch (pay attention to dragEnable at the top)

2.1. Android: with 300ms delay, sorting is enabled via the menu and disabled by tapping anywhere. While sorting is active, you can’t open the menu.

video_2025-08-25_15-28-36.mp4

2.2. iOS: with 300ms delay, same as Android - sorting is toggled via the menu, disabled by tapping, and the menu can’t be opened while sorting is active.

IMG_0054.MP4

[MatiPl01]

Hey @Wolf-Den1994! Thanks for the detailed issue description. I will look into it closer to the weekend and let you know once I figure something out.