Change navigation bar on android with RN with expo?

Question

I started using React Native with Expo and I encountered my first problem. I want to change the color of the navigation bar on Android. Unfortunately, I can't figure out how to do that.

I tried to use https://github.com/thebylito/react-native-navigation-bar-color#readme but it prints out the following error:

TypeError: TypeError: null is not an object (evaluating 'NavigationBarColor.changeNavigationBarColor')

if (Platform.OS == 'android') {
  changeNavigationBarColor('#f00', true);
}

Answer 1

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

Answer 2

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");