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.
8 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 />
-
24
-
2It hides StatusBar for all the components. anyway to hide it from specific component? May 25, 2017 at 12:34
-
-
I am using "react-native": "0.44.2" and Android Emulator Nexus_6_API_25. When I set <StatusBar hidden />, it is working great until the first refresh. After the first refresh I have to update my page some times to hide a status bar in android. How can I fix it?– YauhenJul 31, 2017 at 8:50
-
@KaranBhutwala did you find a way todo this? (hide for particular components)– James111Sep 1, 2017 at 3:57
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.
-
1missing apostrophe (') on import React, { Component } from 'react; Dec 19, 2017 at 19:38
-
Yes, its working, but its hiding status bar for every of the screen, even if I did it in the splash only. May 24, 2018 at 11:35
-
For Hidden:
StatusBar.setHidden(true, 'none');
For Show:
StatusBar.setHidden(false, 'slide');
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>
)
}
}
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<StatusBar hidden /> is the correct way to do this.... I'm newbie at this field and I think SafeAreaView only work on ios– TripleMOct 7, 2021 at 8:00
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
-
I wrote it in componentDidMound method but still status bar is showing. do I need to update info.plist too?– ChandniDec 30, 2020 at 16:07
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>
StatusBarIOS
is deprecated.StatusBar
is now the standard component across platforms.