How to hide status bar (react native/iOS)?

Question

Just starting out learning React Native. Going through examples on the official site. I did the Hello World example and the status bar is overlapping the text. How can I hide the status bar?

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Thanks

post your code here

Anantha Raju C
– Anantha Raju C

2017-04-11 02:34:27 +00:00
Commented Apr 11, 2017 at 2:34 — Anantha Raju C
– Anantha Raju C, Commented Apr 11, 2017 at 2:34

fubar · Accepted Answer · 2017-04-11 02:52:41Z

3

You can use the StatusBar component.

import React, { Component } from 'react';
import { AppRegistry, StatusBar, Text, View } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <StatusBar hidden={true} />
        <Text>Hello world!</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

answered Apr 11, 2017 at 2:52

fubar

17.4k4 gold badges43 silver badges47 bronze badges

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

2 Comments

Adam Over a year ago

Thanks! Much appreciated

sejn Over a year ago

Above not worked for me. I need to hide status bar in some screens and not for all screens

Collectives™ on Stack Overflow

How to hide status bar (react native/iOS)?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related