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.

1

9 Answers

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

8

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.

3

For Hidden:

StatusBar.setHidden(true, 'none');

For Show:

StatusBar.setHidden(false, 'slide');

0

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

2

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

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

1

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

1

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>

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy