Change navigation bar color

Question

I know it is possible since API 21 to change the color of the navigation bar. I have looked at the documentation of React Native but I can not find a way to do this.

The only way I know is by creating a native module, but that does not seem like a good solution since I am using Expo.

Is there a built-in way to do this?

Answer 1

(For those using react-native-cli) Just add <item name="android:navigationBarColor">#0D0D0D</item> to your style in android/app/src/main/res/values/styles.xml like:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">#000000</item>
    <item name="android:navigationBarColor">#0D0D0D</item> <!--  ADD THIS LINE TO YOUR styles.xml    -->
</style>

Answer 2

Well I had made one plugin for that it is use full to achieve what you want.

https://github.com/BhavanPatel/react-native-navbar-color

https://www.npmjs.com/package/react-native-navbar-color