CODEWITHSUNDEEP
reactjsreact-nativestatusbar
Rheisen
Rheisen

Reputation: 2791

Hiding the status bar with React Native

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.

Upvotes: 93

Views: 118817

Answers (9)

Eugene Ihnatsyeu
Eugene Ihnatsyeu

Reputation: 1585

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

Upvotes: 2

Rheisen
Rheisen

Reputation: 2791

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

Upvotes: 184

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

For Hidden:

StatusBar.setHidden(true, 'none');

For Show:

StatusBar.setHidden(false, 'slide');

Upvotes: 22

Serdar D.
Serdar D.

Reputation: 3391

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>

Upvotes: 0

HeshamSalama
HeshamSalama

Reputation: 158

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

Upvotes: 0

kojow7
kojow7

Reputation: 11384

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

Upvotes: 0

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

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

Upvotes: 8

Nir Ben-Yair
Nir Ben-Yair

Reputation: 1606

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.

Upvotes: 83

Alireza
Alireza

Reputation: 104680

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

Upvotes: 11

Related Questions