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