Inconsistency with navigationBarColor Transparency on react-native-screens versions >= 3.30.0"

[yunarch]

Description

Before version 3.30.0, when the navigationBarColor was set to transparent on a Stack navigator, the navigation bar would preserve transparency, adopting the color defined on SafeAreaView. However, in version 3.30.0 and onwards, this behavior has changed: the navigation bar no longer maintains transparency but instead defaults to a white color (or black if navigationBarColor is not explicitly defined).

Steps to reproduce

Setting a stack navigator with navigationBarColor set as transparent:

const Stack = createNativeStackNavigator();

....

<Stack.Navigator
      screenOptions={{
        ...
        navigationBarColor: "transparent",
      }}
    >
...
</Stack.Navigator>

Snack or a link to a repository

https://github.com/software-mansion/react-native-screens

Screens version

>= 3.30.0

React Native version

0.74.1

Platforms

Android

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

None

Device

Android emulator

Device model

Pixel_3a_API_34

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?

[klethonio]

I'm facing the same problem, after expo upgrade, the navigation bar is not longer transparent using that approach.

A way you can turn around that is to use npx expo install expo-navigation-bar, check expo docs about it, but to make this works now you have to set up this:

  import * as NavigationBar from 'expo-navigation-bar';

  // App.js
  NavigationBar.setPositionAsync('absolute');
  NavigationBar.setBackgroundColorAsync('#ffffff00');

Although I would prefer to do not have absolute position there, because I have to change all my screens that doesn't take that into account.

[yunarch]

@klethonio NavigationBar.setPositionAsync('absolute'); is not the same as setting navigationBarHidden: true on the stack navigator?

I didn't test it but by reading the documentation it looks like maybe the same result?

On my case i do not want to use navigationBarHidden: true as it floats the navigation bar above the content, and our designs are to shrink the screen to inline the navigation bar.

[yunarch]

@klethonio I just test your solution and works great as a workaround, i thought it was the same result as using navigationBarHidden but is not.

I as well would prefer to not have absolute position there, but the solution works nice.

One thing i detected is that ios is not affected, setting navigationBarColor: "transparent" works just fine, also setting setPositionAsync only works for android:

// App.tsx
if (Platform.OS === "android") {
  NavigationBar.setPositionAsync("absolute");
}

There is no need for setting transparent color with setBackgroundColorAsync as by just setting the navigationBar absolute correctly gets the transparent color defined on the navigator.

[klethonio]

Yeah, navigationBarHidden: true will, hide the navigation bar and the user has to swipe from bottom to top to show it again. The absolute position will basically put the navigation bar above your app and if it's transparent, there you have it.

I don't know what was the structure before, because it seemed to work like that but dynamically, always taking into account the bar height. Now it looks like the navigation bar being set as transparent, without absolute, its working, but below we have a black/white background, or it's not that, anyway, I'm lost. That's out of my league at the moment.

For example, I have a FAB and previously the bottom padding was related to the top of the navigation bar, and the bar was transparent and the content of the app was behind it, it was perfect. After the update the bar was opaque and after applying absolute my FAB has the margin bottom related to the bottom of the screen, it's taking the space of the bar.

Summing up... I think this should just work as before!

By the way, thank you for your thoughts.