Modal/Popover backdrop causes navbar to change color

[feruzm]

Is there way to force color change to stay unless you change it manually again?

Right now, it has been inconsistent, if modal or popover, dropdown modals are opened, they usually have background overlay, cannot figure out how to make color stay and don't get affected by modals.

Any ideas or suggestions?

[sergchernata]

Dealing with the same issue.

[crutchcorn]

This is a well-known issue. Follow the guide for this article and it should help resolve things for you:

https://github.com/mockingbot/react-native-immersive#restore-immersive-state

[ucheNkadiCode]

I had this problem in android. What I believe is happening is the react-native modal is simply taking the default android:navigationBarColor and every time it pops up, it overwrites the current navigation bar color until it gets dismissed.

The flag statusBarTranslucent was not working for me.

I was able to fix this by navigating to res/values/styles.xml

Then in the AppTheme style I added navigationBarColor to be transparent. It looks like this

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:navigationBarColor">@android:color/transparent</item> // <----This is what I added
  </style>

Then in my react native code, I am able to call

import changeNavigationBarColor from "react-native-navigation-bar-color";

  const setDarkMode = (isDarkMode: boolean) => {
    // logic to change my apps theme to dark mode
    changeNavigationBarColor(isDarkMode ? "black" : "white"); // Then I change the navigation bar color.
  };