How to set iOS status bar background color in React Native?
IosReact NativeIos7 StatusbarIos Problem Overview
Is there a single place in the react native iOS native code that I could modify to set iOS statusbar backgroundColor? RCTRootView.m ?
The react native StatusBar component only support backgroundColor for Android only.
The iOS operating system seems to allow setting status bar backgroundColor
Ios Solutions
Solution 1 - Ios
iOS doesn't have a concept of a status bar bg. Here's how you'd achieve this in a cross-platform way:
import React, {
Component,
} from 'react';
import {
AppRegistry,
StyleSheet,
View,
StatusBar,
Platform,
SafeAreaView
} from 'react-native';
const MyStatusBar = ({backgroundColor, ...props}) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<SafeAreaView>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</SafeAreaView>
</View>
);
class DarkTheme extends Component {
render() {
return (
<View style={styles.container}>
<MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" />
<View style={styles.appBar} />
<View style={styles.content} />
</View>
);
}
}
const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
const styles = StyleSheet.create({
container: {
flex: 1,
},
statusBar: {
height: STATUSBAR_HEIGHT,
},
appBar: {
backgroundColor:'#79B45D',
height: APPBAR_HEIGHT,
},
content: {
flex: 1,
backgroundColor: '#33373B',
},
});
AppRegistry.registerComponent('App', () => DarkTheme);
Solution 2 - Ios
Add import { StatusBar } from 'react-native';
to the top of your app.js
and then add StatusBar.setBarStyle('light-content', true);
as the first line in your render()
to change the status bar text/icons to white.
The other color options are 'default'
and 'dark-content'
.
Refer to https://facebook.github.io/react-native/docs/statusbar.html for further info.
Other than that: no, you would have to follow the link you provided.
Solution 3 - Ios
If you are using react-native-navigation, you need to:
1-) Add this to your info.plist file:
<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>
2-) At first line of your render()
function, eg:
render(){
this.props.navigator.setStyle({
statusBarTextColorScheme: 'light'
});
return (
<Login navigator={this.props.navigator}></Login>
);
}
This example will transform your status bar to light text/buttons/icons color.
Solution 4 - Ios
set iOS & Android statusbar backgroundColor in react-native
import React, { Component } from 'react';
import { Platform, StyleSheet, View, StatusBar } from 'react-native';
import Constants from 'expo-constants';
class Statusbar extends Component {
render() {
return (
<View style={styles.StatusBar}>
<StatusBar translucent barStyle="light-content" />
</View>
);
}
}
const styles = StyleSheet.create({
StatusBar: {
height: Constants.statusBarHeight,
backgroundColor: 'rgba(22,7,92,1)'
}
});
export default Statusbar;
Solution 5 - Ios
you need to customize it.
StatusBar is not part of screen layout in ios else if you use SafeAreaView from reac-native
instead use react-native-safe-area-context and customize it.
see this snack.
Solution 6 - Ios
Add to root view. (Out of SafeAreaView if has)
{Platform.OS === 'ios' &&
<View style={{
width: "100%",
height: 100, // For all devices, even X, XS Max
position: 'absolute',
top: 0,
left: 0,
backgroundColor: "red"}}
/>}
// App screen
...
Solution 7 - Ios
Please, make sure to use padding
and not margin
. This is my code and it works well in iOS:
import { SafeAreaView } from 'react-native'
import { StatusBar } from 'expo-status-bar'
// ...
// ...
return <SafeAreaView style={{ paddingTop: height }}>
{/* your content here */}
<StatusBar style="light" />
</SafeAreaView>
Solution 8 - Ios
import {SafeAreaConsumer} from 'react-native-safe-area-context';
<SafeAreaConsumer>
{(insets)=>(
<View style={{flex:1}}>
<View style={{height:insets.top ,backgroundColor :"black"}}/>
<StatusBar barStyle="light-content"/>
<View style={{flex:1}}>
<Text>My Text</Text>
</View>
</View>
)}
</SafeAreaConsumer>
Solution 9 - Ios
Slightly changed jmurzy's solution this one should work with android and iOS including iOS with notch:
import React from 'react'
import { SafeAreaView, StatusBar, View } from 'react-native'
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
const App = () => {
const isDarkMode = true
return (
<SafeAreaProvider>
<CustomStatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={'red'}
/>
<SafeAreaView style={{ flex: 1 }}>
</SafeAreaView>
</SafeAreaProvider>
)
}
export default App
const CustomStatusBar = ({backgroundColor, ...props}) => {
const { top } = useSafeAreaInsets()
return (
<View style={{ height: (StatusBar.currentHeight || top), backgroundColor }}>
<SafeAreaView style={{ backgroundColor }}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</SafeAreaView>
</View>
)
}
Solution 10 - Ios
If you are using React Navigation it is really easy!
Just set the headerStyle
, see also documentation here.
Something like
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'my app',
headerStyle: {
backgroundColor: 'green',
},
}}
/>
</Stack.Navigator>
Solution 11 - Ios
This works for me with react-native-safe-area-context
version 3.3.2
import { StatusBar } from "react-native"
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"
const App = () => {
const theme = ... get your theme
return (
<>
<StatusBar
backgroundColor={theme === "light" ? "#fff" : "#000"}
barStyle={theme === "light" ? "dark-content" : "light-content"}
/>
<SafeAreaProvider>
<SafeAreaView
style={{
flex: 1,
backgroundColor: theme === "light" ? "#fff" : "#000",
}}
>
// stuff goes here
</SafeAreaView>
</SafeAreaProvider>
</>
)
}
Solution 12 - Ios
I was able to change the background color of status bar on iOS but updating the backgroundColor
property of the SafeAreaView
component.
<SafeAreaView style={{backgroundColor: 'blue'}}>
// App Content
</SafeAreaView>