NavigationBar has a background color when using the Modal component on Android

[mydesweb]

Why it is needed?

Modal component has a property statusBarTranslucent which works, but there is no option to control the Navigation bar.. there is any way to make also Navigation bar translucent?

Possible implementation

No response

Code sample

No response

[zoontek]

Not as I know, but I highly recommend using react-navigation modals instead.

[baghel-rohan]

That is exactly the same issue I am also facing.

react-native: 0.71.14,
react-native-bars: 2.4.2, (previously: 1.1.2 still same issue on both versions),
react-native-bootsplash: 4.7.5,

I would, If I could color the navigation bar white but this is how it looks when modal is open

I can manage the status bar, but there should be a prop to handle the background color of the navigation bar, on the go.

Thanks for just reading it all, I would be thankful if it could actually be done.

great library RNbootsplash though 👍

[zoontek]

@baghel-rohan This is actually impossible to do from this library as react-native uses a Dialog for Modal (and so, a different context that the one we can access in react native module).

That's also why these kind of issues occurs and why it have a statusBarTranslucent property (as it doesn't care about the main activity status / navigation bar transparency - see here)

Until there's a solution in React Native for that, I highly recommend using react navigation modals.

[baghel-rohan]

Hi @zoontek, Thank you for the response, and I really like your work!!

There is another approach to the library which can be implemented, if user wants to, i.e. not using it in edge to edge mode.

I would like to propose a feature which can allow a background color that will be used in navigation bar and status bar if the user is not using library to implement edge to edge.

I have cloned and implemented this on my end, and would like you to see if you would want to intergrate it with the library.

Below is the video after implementing this approach.
untitled.webm

[zoontek]

Unfortunately that's not what I want to achieve with this library.

Android is currently the only platform that bother devs with opaque bars, even if they push against, see the SplashScreen API that is edge-to-edge on system thread or the improved keyboard management that only works when the UI is edge-to-edge, but uh…legacy. We continue to support versions as old as Android 5 when Android 14 is available.

Opaque bars must die, and we need to move collectively to reach this goal 😄

[zoontek]

This quirk is now explained in the README