[iOS] Header menu should block presses from reaching screen content

[ferrannp]

Description

See video:

repo.mov

If you use https://github.com/dominicstop/react-native-ios-context-menu, you could avoid that by using onMenuWillShow and add an overlay to your content... but here we do not have such events. I think the best would be to have a prop to configure it. Or at least have a workaround like onMenuWillShow so we can add some invisible layer blocking touches.

FYI I tried this in iOS system apps and it should work as I described, so this is indeed a bug here.

Steps to reproduce

Using for example:

         unstable_headerRightItems: () => [
              {
                type: 'menu',

You will be able to press anything outside that will trigger... Except another header button itself which acts correctly (see video).

Snack or a link to a repository

https://github.com/ferrannp/menu-header-screens

Screens version

4.25.2

React Native version

0.85.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 17 Pro (26.4)

Acknowledgements

Yes