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.

FYI, StatusBarIOS is deprecated. StatusBar is now the standard component across platforms. — Bilal Budhani
– Bilal Budhani, Commented Mar 24, 2016 at 7:23

kartik tyagi · Accepted Answer · 2021-10-05 14:30:18Z

184

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

edited Oct 5, 2021 at 14:30

kartik tyagi

7,2102 gold badges17 silver badges34 bronze badges

answered Mar 23, 2016 at 19:03

Rheisen

2,7912 gold badges12 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Piotr Over a year ago

You don´t need the ={true} - <StatusBar hidden /> is enough

Karan Bhutwala Over a year ago

It hides StatusBar for all the components. anyway to hide it from specific component?

santhosh Over a year ago

@KaranBhutwala In that particular render section add this code

Jenya Over a year ago

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?

James111 Over a year ago

@KaranBhutwala did you find a way todo this? (hide for particular components)

|

Nir Ben-Yair · Accepted Answer · 2018-06-05 07:56:43Z

83

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.

edited Jun 5, 2018 at 7:56

answered Sep 7, 2017 at 23:33

Nir Ben-Yair

1,6063 gold badges17 silver badges18 bronze badges

2 Comments

Gil Perez Over a year ago

missing apostrophe (') on import React, { Component } from 'react;

Narendra Singh Over a year ago

Yes, its working, but its hiding status bar for every of the screen, even if I did it in the splash only.

Mahdi Bashirpour · Accepted Answer · 2021-05-29 14:57:20Z

22

For Hidden:

StatusBar.setHidden(true, 'none');

For Show:

StatusBar.setHidden(false, 'slide');

edited May 29, 2021 at 14:57

answered Nov 10, 2018 at 13:42

Mahdi Bashirpour

19k17 gold badges134 silver badges154 bronze badges

Comments

David Schumann · Accepted Answer · 2018-04-17 13:18:28Z

11

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

edited Apr 17, 2018 at 13:18

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Apr 11, 2018 at 9:51

Alireza

105k27 gold badges280 silver badges173 bronze badges

2 Comments

Nir Ben-Yair Over a year ago

This is an identical answer to the chosen one.

ShadyAmoeba Over a year ago

This one includes the import. @NirBen-Yair

2 revs · Accepted Answer · 2018-06-08 08:17:19Z

8

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

edited Jun 8, 2018 at 8:17

community wiki

2 revs
Hastig Zusammenstellen

Comments

Eugene Ihnatsyeu · Accepted Answer · 2024-03-04 07:47:05Z

2

This worked for me

import { StatusBar } from 'react-native';

...

<StatusBar translucent backgroundColor="transparent" />

If your background makes hard to see the bar's icons, you can add barStyle="dark-content" to your StatusBar

edited Mar 4, 2024 at 7:47

answered Mar 2, 2024 at 17:02

Eugene Ihnatsyeu

1,63517 silver badges19 bronze badges

Comments

kojow7 · Accepted Answer · 2018-07-16 05:06:31Z

0

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

answered Jul 16, 2018 at 5:06

kojow7

11.6k21 gold badges94 silver badges148 bronze badges

1 Comment

TripleM Over a year ago

<StatusBar hidden /> is the correct way to do this.... I'm newbie at this field and I think SafeAreaView only work on ios

Keshav Gera · Accepted Answer · 2020-10-28 06:38:14Z

0

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

edited Oct 28, 2020 at 6:38

Keshav Gera

11.3k1 gold badge78 silver badges56 bronze badges

answered Oct 20, 2020 at 17:47

HeshamSalama

1581 silver badge4 bronze badges

1 Comment

Chandni Over a year ago

I wrote it in componentDidMound method but still status bar is showing. do I need to update info.plist too?

Serdar D. · Accepted Answer · 2020-11-16 21:59:20Z

0

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>

answered Nov 16, 2020 at 21:59

Serdar D.

3,4311 gold badge35 silver badges26 bronze badges

Collectives™ on Stack Overflow

Hiding the status bar with React Native

9 Answers 9

8 Comments

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

8 Comments

2 Comments

Comments

2 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related