How to Set iOS Status Bar Background Color in React Native

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

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

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.

Change the status bar color on iOS

use react-native-safe-area-context instead SafeAreaView and customize it.

see my answer here
.

React Native How to change the color of the top portion of the iphone where the wifi and time is displayed

Since iOS doesn't have a backgroundColor prop of the status bar, I found a different approach.

Normally the height of the status bar

• 44 for safe iPhoneX
• 30 for unsafe iPhoneX
• 20 for other iOS devices
• StatusBar.currentHeight for Android

Check below sample code & modify it according to your requirements. This works both iOS & Android devices.

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

const STATUS_BAR_HEIGHT = Platform.OS === "ios" ? 20 : StatusBar.currentHeight;
const HEADER_HEIGHT = Platform.OS === "ios" ? 44 : 56;

export default class Example extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: STATUS_BAR_HEIGHT, backgroundColor: "#5E8D48" }}>
          <StatusBar
            translucent
            backgroundColor="#5E8D48"
            barStyle="light-content"
          />
        </View>
        <View style={{ backgroundColor: "#79B45D", height: HEADER_HEIGHT }} />
        <View style={{ flex: 1, backgroundColor: "#33373B" }}>
          {/* Display your content */}
        </View>
      </View>
    );
  }
}

Hope this will helps you. Feel free for doubts.

React Native IOS Status Bar background

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;

Change status bar color on iOS and Android in React Native

You can use headerStyle

const MyHeader = props => {
  return(
    <View style={{flex: 1, backgroundColor: 'red', height: '100%', padding: 10, justifyContent: 'center'}}>
      <Text style={{color: 'white'}}>Testing</Text>
    </View>
  )
}

static navigationOptions = {
    headerTitle: () => <MyHeader />,
    headerStyle: {
      backgroundColor: 'red',
    }
  };

IOS

Android

---

Related Topics