`headerTitle` width ignores `headerRight` on iOS 26
Author: brsaylor2Created Apr 13, 2026Updated Sep 7, 2026
Labelsbugplatform:iosrepro provided
Current behavior
On iOS 26 with Native Stack Navigator, a headerTitle component with flex: 1 or width: '100%' extends too far toward the right edge of the screen, being overlapped by any headerRight component.
Screenshot:
Expected behavior
A headerTitle with flex: 1 or width: '100%' should be centered and limited to the space between the back button and the headerRight component, as on iOS < 26.
Screenshot:
Reproduction
https://github.com/brsaylor2/react-navigation-ios26-header-bug
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
- react-native-drawer-layout
- react-native-tab-view
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | 7.2.2 |
| @react-navigation/bottom-tabs | 7.15.9 |
| @react-navigation/native-stack | 7.14.10 |
| react-native-screens | 4.23.0 |
| react-native-safe-area-context | 5.6.2 |
| react-native-gesture-handler | 2.30.1 |
| react-native | 0.83.2 |
| expo | 55.0.15 |
| node | 22.22.2 |
| npm or yarn | 10.9.7 |
Source: react-navigation/react-navigation