navigationBarColor props breaking safeArea / textinput & more

[pierroo]

Description

Seems like the issue I posted here: react-navigation/react-navigation#11139
is actually due to react native screens, so I will post the bug here instead.

On android, when using react navigation, adding navigationBarColor in the screenOptions of a @react-navigation/native-stack will completely mess up the display of the app.

TextInput will no longer be pulled up above the keyboard and the view doesn't adjust naturally

SafeAreaView turns out messed up and needs to be manually added on some screens, while removed on others and it seems random.

Steps to reproduce

Have a basic native-stack, with a basic screen, use the screen option navigationBarColor on it, and see the whole display being messed up.

Snack or a link to a repository

https://reactnavigation.org/docs/native-stack-navigator

Screens version

3.18.2

React Native version

0.69.7

Platforms

Android

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[naufaladi]

I also have this issue. The app would continue to draw the screen view "behind" the navigationBar. Even the RN "debug/ warning" pop up would be drawn behind the navigationBar.

I have tried to temporarily "solve" this by manually adding marginBottom to my topmost view (screenHeight - windowsHeight - statusBarHeight), but i don't think it's a very good solution due to unforeseen consequences from this bug.

This is the simplest example to reproduce said bug:

To clearly see the bug, make the screen to display a long list of items, you will notice that the bottom most items would only be partially shown and/or is behind the navigationBar.

Including or excluding the navigationBarHidden: false produce the same result.
Using safeAreaView on the screen produce the same result

[LukasMod]

I have the same problem. Adding navigationBarColor breaks KeyboardAvoidingView that worked well before with TextInput. It was a big surprise that a color setting could mess things up

"react-native": "0.71.1",
"@react-navigation/bottom-tabs": "^6.5.3",
"@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.8",
"@react-navigation/stack": "^6.3.11",

[arthur5005]

Wondering if anyone has a work around.

Experiencing exactly this. It's not the end of the world if the app doesn't bleed to the edges with the color I want, but trying to work around this with manual adjustments has a very obvious pitfalls.

Thanks again for all the hard work everyone, I get what it takes to maintain a package like this.

[matt-dalton]

I'm also getting this - took me a while to figure out what was messing up the layouts so thanks for the issue!

[MihailsKostjuks]

the same problem. SafeAreaView just not working with navigationBarColor... bottom: 0 starts from bottom of nav bar since this moment. How to play around it????

[kyle-belle]

I am having the same issue as well. I suspect this is a deeper problem in android. I think what this lib is trying to do is make the real nav bar transparent and cover up that area with the color we provide (could be wrong tho). Couple months ago when i was using another package react-native-navigation-bar-color wheneven i would set the nav bar to transparent (or any value with transparency for that matter) it always have the buggy behaviour but solid colors work fine.

For now a solution (if you don't mind installing the library) is to install react-native-navigation-bar-color and change the nav bar color with that

[scarlac]

The workaround is to install Expo's "NavigationBar" module, which is specific to Android, and can fix this issue:

npx expo install expo-navigation-bar

Then remove your use of navigationBarColor: "red" from all your navigators and replace it with calls to:

import * as NavigationBar from 'expo-navigation-bar';
// ...
NavigationBar.setBackgroundColorAsync('red');

Yes, the culprit is indeed when you set the following code:

<AppSwitcherStack.Navigator
  initialRouteName={initialRouteName}
  screenOptions={{
    header: (props) => <MyHeader {...props} />,
    navigationBarColor: 'red', // remove this - causes statusbar and navigationbar to become overlays/take no space
  }}
/>

The Expo module does not have this issue. I peeked the code for react-native-screens and I don't fully understand why the statusbar and navigationbar would change like it does, but it's clear that it does.

[jiyong1]

Please check this PR #1988