Change navigation bar on android with RN with expo?

This functionality was merged into expo on Aug 9th. You need to add these directives to app.json

{
  "androidNavigationBar": {
     /*
        Determines to show or hide bottom navigation bar.
        "true" to show, "false" to hide.
        If set to false, status bar will also be hide. As it's a general rule to hide both status bar and navigation bar on Android developer official docs.
      */
    "visible": BOOLEAN,
    /*
      Configure the navigation bar icons to have light or dark color.
      Valid values: "light-content", "dark-content".
    */
    "barStyle": STRING,

    /*
      Configuration for android navigation bar.
      6 character long hex color string, eg: "#000000"
    */
    "backgroundColor": STRING
  }
}

Here's the pull request with more information https://github.com/expo/expo/pull/5280

So now you can change the color of NavigationBar on the fly.

Expo released a package - expo-navigation-bar

Simply install it

expo install expo-navigation-bar

Usage is well explained in the docs here

For changing the navigation bar color simply run,

NavigationBar.setBackgroundColorAsync("white");

Did you install 'react-native-navigation-bar-color'?

If not

1. npm install react-native-navigation-bar-color --save

2. react-native link react-native-navigation-bar-color

And

Did you import changeNavigationBarColor from 'react-native-navigation-bar-color'?

If not import changeNavigationBarColor from 'react-native-navigation-bar-color';

OR

The name of the color is not clear. an example of color

white : "#ffffff" , black : "#000000"

use reac-native-navigation-bar-color:

example = async () => {
      try{
        if (Platform.OS == 'android') {
          const response = await changeNavigationBarColor('#ffffff');
          console.log(response)// {success: true}
          }
      }catch(e){
          console.log(e)// {success: false}
      }

  };
...
<Button
          title="Set color white"
          onPress={() => {
            this.example();
          }}
        />

IF not I suggest you try another module. react-native-navbar-color

1. npm install --save react-native-navbar-color
2. react-native link react-native-navbar-color

Example.js

import NavigationBar from 'react-native-navbar-color'

export default class App extends Component {
    componentDidMount() {
        NavigationBar.setColor('#ffab8e')
    }
...

Description of the module

This module does not work with Expo. Make sure you checkout the READ ME file for any module you want to install with Expo.

If you see the installation step requires 'react-native link module-name' then most likely it won't work with Expo unless it's already included/pre-packaged in the Expo SDK version you have.

I've learned my lesson the hard way.

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

and you may apply this answer to your case.

I had the same error, but I found that I was importing the method like this:

import { changeNavigationBarColor } from 'react-native-navigation-bar-color';

So I switched to this:

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

And then it worked.

I tried many answers throughout the forums but couldn't find the working solution. Finally below worked for me and will for you if you are using latest RN 0.62 https://reactnative.dev/docs/navigation

You can also set header background instead of backgroundColor. Below is my code:

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Main}
            options={{ title: 'Welcome', headerStyle: {
              backgroundColor: '#e7305b'
           } }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}