Stack Nested in Tab Navigator: Header Flickers on Tab Change with Edge-to-Edge Enabled [Android]

[hirvesh]

Description

I initially posted on react-native-edge-to-edge but @zoontek advised to post here.

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

I have a very peculiar thing happening with my app. I have reproduced it below and I am hoping it is something dumb from my side.

I have a tab navigator using Expo router and inside each tab navigator, I have a stack navigator.

When I switch to non initial tabs, there's is a visible flicker on the stack navigator header ONLY on first mount of the tab. When I disable edge-to-edge, it doesn't happen - this happens on Android, possibly on iOS but it's not super visible on iOS as mounts are faster I think.

Repro is here: https://github.com/hirvesh/tab-flicker

screen-20250829-150202.mp4

Library version

1.6.0

Environment info

System:
  OS: macOS 15.4.1
  CPU: (16) arm64 Apple M3 Max
  Memory: 100.23 MB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.5.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2025.04.07.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.4
      - iOS 18.4
      - macOS 15.4
      - tvOS 18.4
      - visionOS 2.4
      - watchOS 11.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.24978.46.2431.13363775
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 23.0.2
    path: /opt/homebrew/opt/openjdk/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.1
    wanted: ^20.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.6
    wanted: 0.79.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Reproducible sample code

https://github.com/hirvesh/tab-flicker

Steps to reproduce

1. Run App (on Android)
2. Navigate to (tabs)/settings or (tabs)/analytics
3. Observe flicker on stack header as tab mounts for the first time
4. Disable edge-to-edge, repeat 1-3, issue doesn't occur

Snack or a link to a repository

https://github.com/hirvesh/tab-flicker

Screens version

4.15.4

React Native version

0.79.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

None

Device

Real device

Device model

Pixel 4a, but happens on latest Android emulator as well, SDK 35

Acknowledgements

Yes

[kkafar]

Hey! Thanks for the report. I'm aware of the issue & experimenting on fixes here: #3192

I'll close this ticket in favour of #3006, which I believe describes the very same issue. Let's move the discussion there.