headerBackButtonMenuEnabled: false doesn't work when headerBackButtonDisplayMode is 'minimal' on iOS

[ismkerem]

Current behavior

Hi,

I'm using @react-navigation/native-stack on iOS with these options:

screenOptions={{
  headerBackButtonDisplayMode: 'minimal',
  headerBackButtonMenuEnabled: false,
}}

The back button shows only the arrow, but if I long-press the back button, the stack menu still appears.

Expected behavior

I expect that setting headerBackButtonMenuEnabled: false should completely disable the long-press back button menu, regardless of the display mode. However, the menu still appears when I long-press the back button on iOS. Am I misunderstanding how this option is supposed to work, or could this be a bug?

Reproduction

https://github.com/ismkerem/RNnavigation

Platform

• [ ] Android
• [x] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [x] @react-navigation/native-stack
• [ ] react-native-drawer-layout
• [ ] react-native-tab-view

Environment

Package	Version
@react-navigation/native	^7.1.14
@react-navigation/bottom-tabs	7.4.2
@react-navigation/drawer	^7.5.3
@react-navigation/material-top-tabs	^7.3.2
@react-navigation/stack	^7.4.2
@react-navigation/native-stack	^7.3.21
react-native-drawer-layout	^4.1.12
react-native-tab-view	^4.1.2
react-native-screens	^4.13.1
react-native-safe-area-context	^5.5.2
react-native-gesture-handler	^2.27.2
react-native-reanimated	^4.0.0
react-native	0.80.1
expo	—
node	23.9.0
npm or yarn	11.2.0

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• react-native-tab-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. Seems that this issue is related to react-native-screens library which is a dependency of React Navigation. Can you also post your issue in this repo so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it.

[ezgna]

same

[oliverdolgener]

same :/

[flybluewolf]

same

[juancstlm]

I tracked this down and it's probably due to react-native-screens only sets the menu hidden when the back button has a title.

https://github.com/software-mansion/react-native-screens/blob/10ffdf7ced4b204e0dd50bfed04b380d7372eb08/ios/RNSScreenStackHeaderConfig.mm#L784-L790 #

I added an empty back bar button item to hide the menu if the disableBackButtonMenu is true or when headerBackButtonMenuEnabled is false.

You could probably override the back button title to an empty string in the options and it might work as well

  } else {
    // back button title should be not visible next to back button,
    // but it should still appear in back menu
    prevItem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeMinimal;
    if (config.disableBackButtonMenu) {
      // When the title is hidden we still need a custom back bar button item in order to
      // disable the default UIMenu attached to the back chevron. Otherwise the system would
      // recreate its standard item (with menu) because no custom item is provided.
      RNSBackBarButtonItem *backBarButtonItem = [[RNSBackBarButtonItem alloc]
          initWithTitle: @""
                  style:UIBarButtonItemStylePlain
                 target:nil
                 action:nil];
      [backBarButtonItem setMenuHidden:YES];
      prevItem.backBarButtonItem = backBarButtonItem;
    }
  }

[username14415]

Same. The touchable area also matches the hidden text space