React Native IOS Status Bar background

Question

Since Applying the backgroundColor props to StatusBar component doesn't get applied On IOS. I need to set the background colour of SafeAreaView to get the effect i want, it works fine but on iPhone X it will have that same colour at the bottom of the screen. How can I solve this issue?

Answer 1

React-Native does not support background color change of StatusBar on iOS platform but on Android platform, it's ok (https://facebook.github.io/react-native/docs/statusbar#backgroundcolor). I wrote a work around for your problem. You can use it safely

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </View>
        );
    }
}

export default App;

For SafeAreaView:

import React, {Component} from "react";
import {StyleSheet, StatusBar, View, Platform} from "react-native";
import SafeAreaView from "react-native-safe-area-view";
//You can also use react-navigation package for SafeAreaView with forceInset.

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() {
    return (
        <View style={{
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        }}>
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );
}

class App extends Component {
    render() {
        return (
            <SafeAreaView style={{flex:1}}
                forceInset={{top: 'never'}}>
                <StatusBarPlaceHolder/>
                ...YourContent
            </SafeAreaView>
        );
    }
}

export default App;

Answer 2

Support for iPhone X

In addition to @sdkcy's answer, for iPhone X the STATUS_BAR_HEIGHT can´t be 20.

I solved it by installing the following library:

https://www.npmjs.com/package/react-native-status-bar-height

Install

npm install --save react-native-status-bar-height

Import

import { getStatusBarHeight } from 'react-native-status-bar-height';

And update the STATUS_BAR_HEIGHT like this:

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? getStatusBarHeight() : 0;

Finally, I also changed the height for Android to 0, because it was affecting the NavigationBar's height, but if it is working well for you, you can keep it the same.

Hope this helps.