Description

When using a native stack navigator in React Native, if the first screen in the stack has the native header hidden (e.g., headerShown: false), the header title on subsequent screens appears misaligned or not centered. This only happens when navigating from a screen without a native header to one that uses the default header.

I think this might be related to view recycling. It was also happening on old architecture a couple of months ago while I was testing.

Steps to reproduce

1. Create a stack navigator with two screens:

   • Screen A: headerShown: false
   • Screen B: default header shown

2. Navigate from Screen A to Screen B.

3. Observe that the header title on Screen B is not centered.

Make sure you cold start the app with header shown set to false for Screen A.

Snack or a link to a repository

https://snack.expo.dev/M-RIitAjPdl7xsK7AKYbQ

Screens version

4.11.1

React Native version

0.79.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 16

Acknowledgements

Yes