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

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

Answer 2

(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 3

The other possible ways to change background color of Status Bar and Navigation Bar of Android Device is through StatusBar module and NativeModules

I already post my answer about NaigationBar of Android, you may check this

Answer 4

I created a package with color replacement and more.

react-native-system-navigation-bar

Install

yarn add react-native-system-navigation-bar

or

npm install react-native-system-navigation-bar

Links

https://www.npmjs.com/package/react-native-system-navigation-bar

https://github.com/kadiraydinli/react-native-system-navigation-bar

Answer 5

With the latest versions of Expo you can install the module

https://docs.expo.dev/versions/latest/sdk/navigation-bar/ then in your App.js

you make import of import * as NavigationBar from 'expo-navigation-bar';

and you can then set NavigationBar.setBackgroundColorAsync("color of your choice"); in your body

Answer 6

For react-navigation v6:

Simply set navigationbarColor in the navigator:

screenOptions={{navigationBarColor: 'gold'}}

Answer 7

Below is another choice. It has recent commits.

react-native-navigation-bar-color

https://github.com/thebylito/react-native-navigation-bar-color