CODEWITHSUNDEEP
iosreact-nativestatusbar
Basil Satti
Basil Satti

Reputation: 700

React Native IOS Status Bar background

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

Upvotes: 8

Views: 15672

Answers (4)

Roshik_bangalee
Roshik_bangalee

Reputation: 1

iOS does not support StatusBar component in React-Native like Android. Implementing the SafeAreaView component somehow lowers the view from the original status bar in iOS. I searched for many solutions and most of them guided to use custom components or use a library. Here's a quick solution that came in my head and it worked just fine. Just before the SafeAreaView wrap the total UI under a JSX fragment like <></>.

I am giving an example of my code so that you can understand better. I have tested this on iPhone 11 Pro Max and iPhone 14 and it works fine.

import React, {useState, useContext} from 'react';
import {
  SafeAreaView,
  Text,
  View,
  Dimensions,
  StyleSheet,
  Alert,
  FlatList,
  StatusBar,
  TouchableOpacity,
  Image,
  ScrollView,
  Linking,
  Platform,
  ActivityIndicator,
} from 'react-native';
const {height, width} = Dimensions.get('window');
import {
  BackArrow,
  UserIcon,
  BellIcon,
  LogoutIcon,
  HomeIcon,
} from '../Includes/Includes';
import Colors from '../Components/Colors';
import {WebView} from 'react-native-webview';
const Notification = () => {
return(
<>
    {
      Platform.OS == "ios" && (
        <View style={{width: "100%", height: height * 0.05, backgroundColor: Colors.themeColor}}/>
      )
    }
    <SafeAreaView style={styles.mainContainer}>
      <StatusBar
        barStyle={'light-content'}
        backgroundColor={Colors.themeColor}
      />
      <InnerHeader />
      <MyView />
</SafeAreaView>
</>
)
}

Upvotes: 0

Bonface Mudiri
Bonface Mudiri

Reputation: 3

iPhone X uses 44pt tall status bar

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

Ref to these cheatsheets

Upvotes: 0

Victor Pacheo
Victor Pacheo

Reputation: 131

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.

Upvotes: 2

sdkcy
sdkcy

Reputation: 3548

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;

Upvotes: 14

Related Questions