How to hide status bar in Android w/ React Native?

Question

How to hide status bar in Android w/ React Native?

https://facebook.github.io/react-native/docs/statusbarios.html#content

Answer 1

You no longer need to install a dependency to hide the status bar in react-native. The following should work for both Android and iOS.

To hide the StatusBar you can use the component straight from react-native. It is listed in the documentation here.

You can use it in two different ways. One as a component, and the other imperatively. For both you import it from react-native.

import { StatusBar } from 'react-native';

Component

In side your render:

render() {
  return (
    <View style={styles.container}>
      <StatusBar hidden={true} /> // <- you could set this from a value in state
       ...
    </View>
  );
}

Imperatively

This allows you to hide it via a function call.

componentDidMount () {
  // doesn't have to be in the componentDidMount it could be in some other function call.
  StatusBar.isHidden(true);
}