Hiding the status bar with React Native

Reactjs Problem Overview

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.

Reactjs Solutions

Solution 1 - Reactjs

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

Solution 2 - Reactjs

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.

Solution 3 - Reactjs

For Hidden:

StatusBar.setHidden(true, 'none');

For Show:

StatusBar.setHidden(false, 'slide');

Solution 4 - Reactjs

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

Solution 5 - Reactjs

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

Solution 6 - Reactjs

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

Solution 7 - Reactjs

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

Solution 8 - Reactjs

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>

Solution 9 - Reactjs

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Rheisen	View Question on Stackoverflow
Solution 1 - Reactjs	Rheisen	View Answer on Stackoverflow
Solution 2 - Reactjs	Nir Ben-Yair	View Answer on Stackoverflow
Solution 3 - Reactjs	Mahdi Bashirpour	View Answer on Stackoverflow
Solution 4 - Reactjs	Alireza	View Answer on Stackoverflow
Solution 5 - Reactjs	Hastig Zusammenstellen	View Answer on Stackoverflow
Solution 6 - Reactjs	kojow7	View Answer on Stackoverflow
Solution 7 - Reactjs	HeshamSalama	View Answer on Stackoverflow
Solution 8 - Reactjs	Serdar D.	View Answer on Stackoverflow
Solution 9 - Reactjs	Keshav Gera	View Answer on Stackoverflow