[Android] Header fails to render when visibility is changed simultaneous with StatusBar

[alpha0010]

Description

Toggling header visibility simultaneous with StatusBar results in the header failing to show up again.

Initial state:

After calling navigation.setOptions({headerShown: false}); StatusBar.setHidden(true);:

After calling navigation.setOptions({headerShown: true}); StatusBar.setHidden(false);:

Cross-posted from react-navigation/react-navigation#13044 , as requested.

Steps to reproduce

1. Start with the header and status bar both visible
2. navigation.setOptions({headerShown: false}); StatusBar.setHidden(true);
3. navigation.setOptions({headerShown: true}); StatusBar.setHidden(false);
   • Notice that while the status bar is visible again (as expected), the header does not reappear (this is the bug)

Snack or a link to a repository

https://snack.expo.dev/@alpha0010/react-navigation-header-visibility-bug

Screens version

4.24.0

React Native version

0.84.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[kligarski]

Hi, @alpha0010. Thank you for reporting the issue. Unfortunately, I am unable to reproduce the issue using your minimal reproduction example. I used brand new react-native app on Pixel 3A emulator with API 36.

3795.mp4

Here are the dependencies I used:

"@react-navigation/native": "^7.2.0",
"@react-navigation/native-stack": "^7.14.8",
"react": "19.2.3",
"react-native": "0.84.1",
"react-native-safe-area-context": "^5.7.0",
"react-native-screens": "^4.24.0"

Can you provide more details (e.g. which Android API version and which emulator you are using)?

[alpha0010]

I have edgeToEdgeEnabled=true set in android/gradle.properties, which may differ from your setup?

Occurs on:

• Physical device, API 29, moto g7 power
• Emulator, API 28, "medium phone"
• Emulator, API 36, "medium phone"
  • Sort of. The minimal reproducer I provided seems to work fine here, but my prod app does not (and I cannot determine what the difference is yet.)

api28-header-bug.webm

Note that when the header reappears, its position now overlaps with the status bar, instead of below it:
https://github.com/user-attachments/assets/3c0236f0-d5e7-4978-8360-77176f6f059b

[kligarski]

Thanks for the reply.

I have edgeToEdgeEnabled=true set in android/gradle.properties, which may differ from your setup?

edgeToEdgeEnabled=true is the correct value for react-native-screens but I initially tried with both.

I'll have a look at the emulators you mentioned and let you know.

[kligarski]

Sorry for the delay. I confirm that the bug is reproducible on API 28. We'll add this to our queue.