8000 Inconsistent Header on Android · Issue #12579 · react-navigation/react-navigation · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
8000

Inconsistent Header on Android #12579

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
5 of 13 tasks
Noitham opened this issue May 4, 2025 · 8 comments
Open
5 of 13 tasks

Inconsistent Header on Android #12579

Noitham opened this issue May 4, 2025 · 8 comments
Labels
bug needs repro platform:android

Comments

@Noitham
Copy link
Noitham commented May 4, 2025 •
edited
Loading

Current behavior

  • There seems to be inconsistencies wtih the header height position on Android.
  • It happens both on release and debug builds - When closing/opening the app, the header seems to reposition itself correctly.

More details:

  • Expo SDK 53.
  • New Arch enabled.
  • Edge-to-edge disabled.

Expected behavior

  • The header should behave as expected and not alter its position.

Reproduction

WIP - Will provide

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.1.7
@react-navigation/bottom-tabs 7.3.11
@react-navigation/material-top-tabs 7.2.11
@react-navigation/native-stack 7.3.11
react-native-tab-view 4.0.11
react-native-screens ~4.10.0
react-native-safe-area-context 5.4.0
react-native-gesture-handler ~2.25.0
react-native-reanimated ~3.17.5
react-native-pager-view 6.7.1
react-native 0.79.2
expo 53
node v20.11.1
npm or yarn or bun bun 1.2.4
@Noitham Noitham added the bug label May 4, 2025
@github-actions GitHub Actions
Copy link
github-actions bot commented May 4, 2025

Hey @Noitham! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro, or the provided repro is not valid (e.g. broken link, private repo, code doesn't run etc.).

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a valid repro.

@sarthak-cars24
Copy link

Seeing a similar issue on v6 with React Native 76, do you have any StatusBar instances in app? Their are mainly two thinks I have observed: 1. moving between screens having different statusBarTranslucent causes header bar to sync in Status bar or add extra padding from top, 2. I had some screens using StatusBar and setting its translucent value to true/false it was also leading to the same issue. I was able to fix 2nd point by removing all instances of StatusBar and adding one single one on app root with translucent set to true.

For first point as a work around we can try setting statusBarTranslucent to true as hardcoded value and add padding manually maybe. I haven't tried this as it will lead to a major refactor for me.

@Noitham Noitham changed the title Header inconsitencies between Android & iOS Header inconsitencies on Android May 4, 2025
@Noitham Noitham changed the title Header inconsitencies on Android Inconsistent Header on Android May 4, 2025
@sarthak-cars24
Copy link

A useful reference - software-mansion/react-native-screens#566 (comment)

8000 @bjarheim
Copy link
bjarheim commented May 4, 2025

I had the same problem, but when I replaced it with SystemBars the header issue disappeared. See https://github.com/zoontek/react-native-edge-to-edge?tab=readme-ov-file#systembars

@Noitham
Copy link
Author
Noitham commented May 4, 2025

@bjarheim, right, removing the usage of StatusBar from expo-status-bar seems to fix it, the strange thing is in my case I don't have edge-to-edge enabled on Android.

I'm actually explicitly setting edgeToEdgeEnabled: false, value on the expo app.config.ts(app.json) file.

🤔

@sarthak-cars24
Copy link

Same here, I am on a bare React Native project and haven't enabled edge to edge yet. This issues keeps popping up really randomly on the app. It would have made more sense if it happened consistently on Android 15, but unfortunately that's not the case.

@Noitham
Copy link
Author
Noitham commented May 5, 2025 •
edited
Loading

@sarthak-cars24, since adding the react-native-edge-to-edge package and using the SystemBars component instead of Expo's expo-status-bar StatusBar component fixes the issue, I think this issue might be on the Expo side.
8A3F

@sarthak-cars24
Copy link
sarthak-cars24 commented May 5, 2025 •
edited
Loading

Hey @Noitham, I am not using expo. Its a bare React Native app without even react-native-edge-to-edge this package installed. Still getting same issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs repro platform:android
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@bjarheim @Noitham @sarthak-cars24
0