Search code examples
androidreact-nativestatusbarexpocreate-react-native-app

StatusBar color in React Native

How can I change background color of StatusBar component from react-native, without editing Android specific files?

Docs says, that I can use backgroundColor property. But it fails. barStyle property, setBarStyle && setBackgroundColor static methods don`t work properly too.

Only hidden property works.

I`m using create-react-native-app, built with Expo.

Solution

  • In Expo App, you need to edit app.json in your project root directory like this:

    {
    "expo": {
        "sdkVersion": "16.0.0",
        "androidStatusBar": {
            "barStyle": "dark-content",
            "backgroundColor": "#0A48A5"
        }
    }
}

    See Expo documentation: https://docs.expo.io/versions/v16.0.0/guides/configuration.html