StatusBar color in React Native
14,375
Solution 1
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
Solution 2
You can use
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
You can see the documentation here.
Solution 3
add color.xml in ..android/app/src/main/res/values and pate following code
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- color for the app bar and other primary UI elements -->
<color name="colorPrimary">#3F51B5</color>
<!-- a darker variant of the primary color, used for
the status bar (on Android 5.0+) and contextual app bars -->
<color name="colorPrimaryDark">#A52D53</color>
<!-- a secondary color for controls like checkboxes and text fields -->
<color name="colorAccent">#FF4081</color>
</resources>
copy and pate following code in ..android/app/src/main/res/values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Solution 4
use this
import {StatusBar} from 'react-native';
const bar = ()=>{
return( <StatusBar backgroundColor="insert your color here"/> );
};
Author by
Maxim Romanyuk
Updated on June 27, 2022Comments
-
Maxim Romanyuk almost 2 years
How can I change background color of
StatusBar
component fromreact-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.