search

thebylito / react-native-navigation-bar-color

React Native component to change bottom bar/navigation bar color on Android
MIT License
269 stars 49 forks source link

Modal/Popover backdrop causes navbar to change color #30

Open feruzm opened 4 years ago

feruzm commented 4 years ago

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 commented 4 years ago

Dealing with the same issue.

crutchcorn commented 4 years ago

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 commented 1 year ago

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.
  };