8

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?

enter image description here

Basil Satti
  • 700
  • 1
  • 9
  • 24

3 Answers3

14

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;
sdkcy
  • 3,528
  • 1
  • 16
  • 23
  • Thank you for your answer but i got a problem with your code, I need to use the SafeAreaView, so i can adjust some layouts in iphone x. and if i changed the view above to SafeAreaView the status bar doesn't fit. – Basil Satti Jan 24 '19 at 19:57
  • 1
    I added one more solution for safeareaview. If you use react-navigation in your project, you dont need to new package. Just import safeareaview from react-navigation – sdkcy Jan 24 '19 at 20:18
  • You' re welcome. If it worked, please give the green tick to this answer. Because if someone encounter something like this problem, they can try this solution. Good luck :) – sdkcy Jan 25 '19 at 15:39
  • 1
    Thanks, this works if the content is shorter than the screen size. However, If you have to scroll, the status bar background gets hidden. Is there a way around that? – Betty Apr 30 '19 at 04:51
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.

Victor Pacheo
  • 121
  • 1
  • 5
0

iPhone X uses 44pt tall status bar

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

Ref to these cheatsheets

Bonface Mudiri
  • 3
  • 3