Hiding the status bar with React Native

Question

How do you hide the status bar for iOS or Android when developing with React Native? I've imported StatusBar, but I believe there is also StatusBarIOS and a StatusBar for Android.

Answer 1

Figured out how to hide the status bar. First of all, StatusBarIOS is deprecated so you need to import StatusBar and then simply include this code snippet at the top of your render:

<StatusBar hidden />

React Native Docs on StatusBar

Answer 2

You can invoke this method from anywhere in your component:

import React, { Component } from 'react';
import { StatusBar } from 'react-native';

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}

EDIT:

This will hide the status bar for the entire app and not just in your specific component, to solve this you can do:

componentWillUnmount() {
     StatusBar.setHidden(false);
}

Or calling this method with false from somewhere else.

Answer 3

For Hidden:

StatusBar.setHidden(true, 'none');

For Show:

StatusBar.setHidden(false, 'slide');

Answer 4

I prefer the simple way of importing the StatusBar component and passing true to hidden prop...

So Simply:

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

class App extends React.Component {

    render() {
       return (
        <View>
          <StatusBar hidden={true} />
          <Text>Hello React Native!</Text>
        </View>
       )
    }
}

Answer 5

From version 0.?? to current (0.55 / June 2018)

<StatusBar hidden />

Credit to the first comment in this answer

Remember to first import the StatusBar component as per the other answers here

Answer 6

If your reason for hiding it is to prevent your components from overlapping it, you might prefer to just use SafeAreaView as follows:

<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
  <View style={{flex: 1}}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>

It should be the parent component of a screen and can optionally use a backgroundColor to match the color of your screen. Make sure to set a flex attribute. Your components will now just take up any area not being used by the status bar. This is especially useful in getting around the 'notch' issue with some of the newer phones.

SafeAreaView is a component of react-native so you will need to make sure you add it to your imports:

import { SafeAreaView, Text, View } from 'react-native';

Answer 7

{Platform.OS === 'ios' && <StatusBar barStyle="light-content" />} 

Answer 8

to make it transparent on android you can do this

<StatusBar  backgroundColor={'#ffffff00'} />

{Platform.OS === 'ios' && <StatusBar barStyle="light-content" />} 

also <StatusBar hidden /> is hidden it but you may see a margin on top

Answer 9

It hasn't worked doesn't matter what you have tried?

Maybe there is another <StatusBar hidden="false"> in your code. And it is deeper than your definition. This will replace your previous hidden="true" setting.

<View>
  <StatusBar hidden={true} /> // this will be replaced by the deeper StatusBar tag
  
  <View>
    <StatusBar hidden={false} /> // remove this or put your `hidden="true"` here
  </View>
</View>