Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[50$] Feature Request / Bug Report - iOS / Android onPress action for <ContextMenu.Trigger> that doesn't conflict with normal the actual ContextMenu Deployment #145

Open
ChristopherGabba opened this issue Mar 7, 2025 · 0 comments

Comments

@ChristopherGabba
Copy link

ChristopherGabba commented Mar 7, 2025

First of all, I want to show my sincere appreciation for this library and all the wonderful docs. Its absolutely phenomenal.

This issue has sort of been bothering me in our app for a while. There is a "workaround" available for iOS, which I'm not a huge fan of, but it's still flaky on Android.

Desired Functionality:
I wrap my some content in my app with a <ContextMenu>. That content is a wrapped in a TouchableOpacity. The functionality I desire is:

  1. User quickly taps on that content, it takes them to play the video or full screen the image (similar to the repro)
  2. If a user long presses on the content, they can "Share", "Comment" or "Delete" (all options within my Context Menu)

The Problem
The onPress of my "Touchable" currently interacts with the deployment of the <ContextMenu/>. When you long tap on the context menu it also fires the onPress of the button. Here is a video of the issue.

The Workaround (Identified here)
On iOS the workaround fairly solid. You essentially make the onLongPress of the inner Touchable an empty function like so:

      <ContextMenu.Trigger action="longPress">
        <TouchableOpacity
          onPress={onQuickPress}
          /**THIS IS A WORKAROUND TO AVOID ACCIDENTAL FIRING OF BUTTON */
          onLongPress={() => {}} 
          activeOpacity={0.7}
        >
          {children}
        </TouchableOpacity>
      </ContextMenu.Trigger>

Video Detailing Issue
https://github.com/user-attachments/assets/7e0e58e9-1285-4d54-936e-db4f2b297964

Note: It seems to work well on iOS and Android via simulator, but in reality, just scrolling on a real android device triggers this context menu sometimes. It's just not an ideal user experience. Really this needs a real solution where the context menu itself has its on onPress event that handles all of this stuff.

Reproduction:

  1. Clone Repro: https://github.com/ChristopherGabba/ContextMenu-Press-Repo
  2. Run yarn install
  3. Run npx expo run:ios --device / npx expo run:android --device

Note:
There are quite a few related issues that detail this exact topic:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant