Pressables not working after context menu opened

[mrousavy]

When wrapping Pressables (<Pressable>, <TouchableOpacity>, ...) with a context menu, the entire JS responder system will fail/crash once you open the context menu once. In other words, your entire screen becomes unresponsive if you open a context menu that contains a pressable.

There might be some extra treatment required to support inlining the JS pressability API.

(Also, it looks like native buttons such as the back button from react-native-navigation are still working, it's just the current screen that "freezes"/doesn't trigger onPress events anymore)

Screen.Recording.2021-01-18.at.10.49.40.mov

Code:

return (
  <View style={styles.container}>
    <ContextMenuView onPressMenuItem={onContextActionPressed} menuConfig={menuConfig} previewConfig={previewConfig}>
      <Pressable style={styles.imageContainer} onPress={onImagePressed}>
        <FastImage
          style={styles.image}
          source={imageSource}
        />
      </Pressable>
    </ContextMenuView>
  </View>
);

[RazaShehryar]

Hey. The same above code is working out for me. The only thing that I am facing is the crash when you navigate quickly when the context menu view is still visible. Here's what I am talking about.

image-from-ios_uhG5u3Fw.mov

Just solved the @RazaShehryar's issue. Here's a code:

<ContextMenuView { ...props }>
    <Pressable
        delayLongPress={100} // Leave room for a user to be able to click
        onPress={action} // Here's your action
        onLongPress={() => {}} // A callback that does nothing
</ContextMenuView>

Explanation:

Pressable always invokes onPress right after onPressOut. onLongPress, if defined, is called instead if a certain time from onPressIn passes. It means onPress will always be called if onLongPress is not defined. (even if you've been pressing eternity)

The conflict happens, Pressable navigates a user to a different screen (common behavior), and ContextMenuView tries to mount a context menu, but a parent component for the context menu doesn't exist anymore.

What we did is we set up a time frame for onPress. If a user clicks, onPress is called. If the user presses long enough, a context menu is rendered. If the user starts pressing but removes his/her/their finger too soon, nothing happens.

@mrousavy , this might be a reason for your bug as well.

I hope it will help you guys.

[ansh]

The fix mentioned above works, but it causes another issue.

Many users have reported that sometimes the clicks are not registered. There is also an obvious delay between clicking on the item and something happening.

This can be sometimes (non-deterministically) recreated by tapping many times and trying many long presses and eventually breaking the view.

I start to them get this error:

 WARN  measure cannot find view with tag #285
 WARN  measure cannot find view with tag #285
 WARN  Invalid view set to be the JS responder - tag 285

My code is pretty simple, and just like the example:

    <ContextMenu.Root>
     <ContextMenu.Trigger>
       <AnimatedTouchableOpacity
         onPress={onPress}
         className={cn('px-4 py-2.5 active:bg-gray-100 hover:bg-gray-100', className)}
         delayLongPress={100}
         onLongPress={() => {}}
         style={animatedStyles}
       >

I've added a video below that clearly shows that the tap gestures are not working and are delayed.

Simulator.Screen.Recording.-.iPhone.16.-.2024-12-10.at.20.15.21.mp4

@nandorojo or @mrousavy or @dominicstop Have you folks figured out fix or workaround to this?

[kalashshah]

delayLongPress={200}
Fixes my issue and also doesn't miss clicks randomly.