Ghost Click on headerRight Stack Navigator

I implemented the React Navigation Collapsible as per the documentation. Further I had to use headerRight from React Navigation V5 to place a button on the right of the Stack Navigator.

Now the Problem Case
First of all the Collapsible functionality is working flawlessly. The issue occurs in this scenario -

Step 1 - Scrolling up hides the navigator
Step 2 - Scrolling down reveals the collapsed navigator
Step 3 - Now consider that I'm half the way through my feed and I scroll down to reveal the header. Now when I click on the header right button it executes the onPress like it should. Although a card which is right behind the navigator is also ghost clicked.

The problem is solved when I remove the collapsible functionality. It occurs only with the collapsible.

Brother, can you guide me on how I can overcome this issue?

Hi, Thanks for the issue.

This is because react-navigation's headerBackground doesn't swallow the touch event but just pass it down to the next element.

react-navigation-collapsible/src/createCollapsibleStack.tsx

Line 132 in 51b3da7

headerBackground: CollapsedHeaderBackground({

I will report it to react-navigation or open PR there.

Does it happen always even if you click your right button correctly or it happens sometimes when you miss clicks? I'm asking it because your button component at least should swallow the touch event.

It looks like this one is the related one. react-navigation/react-navigation#7102

Hi, Thanks for the issue.

This is because react-navigation's headerBackground doesn't swallow the touch event but just pass it down to the next element.

react-navigation-collapsible/src/createCollapsibleStack.tsx

Line 132 in 51b3da7

headerBackground: CollapsedHeaderBackground({

I will report it to react-navigation or open PR there.

Does it happen always even if you click your right button correctly or it happens sometimes when you miss clicks? I'm asking it because your button component at least should swallow the touch event.

Hey!
Thanks for the quick reply mate. I'll go through the reference.

Yes, it does happen everytime I click on the headerRight button. To further add on to the case, both the HeaderButton onPress event and the card's (that's behind the navigation) onPress event both simultaneously gets processed.

Thanks for more information.

And I just tested the latest example of react-navigation and can see it.

Thanks for more information.

And I just tested the latest example of react-navigation and can see it.

Sure mate! Let me know if this gets solved.

react-navigation/react-navigation#8314
I opened PR on react-navigation.

The PR was merged but reverted because it made a weird problem on Android.
I opened PR again. react-navigation/react-navigation#8317

@react-navigation/stack@5.4.1 including the fix is released.
Let me do my side this weekend.

No need work from my side. It's fixed.

Just upgraded to @react-navigation/stack@5.4.1 and it's Flawless! Thanks, @benevbright .