iosreact-nativeios7-statusbar

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


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. Example


Solution

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

    simulator

    Maybe it's not clear in the code, but the trick is to use StatusBar, which works for Android, and create a "fake" status bar (a View with backgroundColor) for IOS.