StatusBar in React Native

In this tutorial, we'll show you how easy it is to customize a status bar in React Native.

What is the StatusBar?

In iOS, the StatusBar is the area at the top of the screen that displays information such as the time, battery level, and cellular signal. In React Native, we can use the StatusBar component to customize the appearance of the status bar.

Hide StatusBar

To hide the StatusBar, we can use the hidden prop.

import { StatusBar } from 'react-native';

<StatusBar hidden />

Style StatusBar

The StatusBar component in React Native also allows you to customize the style of the StatusBar. You can use the barStyle prop to specify whether the StatusBar should have a light or dark style.

The barStyle prop can have two values: light-content and dark-content. By default, it is set to dark-content.

On Android, you can change the background color of the StatusBar by using the backgroundColor prop.

import { StatusBar } from 'react-native';

<StatusBar barStyle="light-content" backgroundColor="#ff00ff" />

Height

In iOS, the height of the StatusBar varies based on the device and orientation. In React Native, you can use the StatusBar.currentHeight component to get the height of the StatusBar.

import { StatusBar, Dimensions } from 'react-native';

const statusBarHeight = StatusBar.currentHeight;
const screenHeight = Dimensions.get('screen').height;
const contentHeight = screenHeight - statusBarHeight;

<View style={{ height: contentHeight }}>
  <StatusBar barStyle="light-content" />
  <Text>Hello, world!</Text>
</View>

We hope you enjoyed this content and now better understand how to use StatusBar in React Native.