How to set iOS status bar background color in React Native?

Question

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

My goal is to have a darker status bar color.

Answer 1

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