How to Use StatusBar in React Native: Simple Guide

In React Native, use the StatusBar component to control the app's status bar appearance, such as its style, background color, and visibility. Import StatusBar from 'react-native' and set its props like barStyle, backgroundColor, and hidden to customize it.

Syntax

The StatusBar component accepts several props to customize the status bar:

• barStyle: Sets the text color, options are "default", "light-content", or "dark-content".
• backgroundColor: Sets the background color of the status bar (Android only).
• hidden: Boolean to show or hide the status bar.
• translucent: Boolean to make the status bar translucent (Android only).

javascript

import { StatusBar } from 'react-native';

export default function App() {
  return (
    <StatusBar
      barStyle="dark-content"
      backgroundColor="#6a51ae"
      hidden={false}
      translucent={false}
    />
  );
}

Output

A status bar with dark text on a purple background, visible and opaque.

Example

This example shows a simple React Native app that sets the status bar to light text on a blue background and keeps it visible.

javascript

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

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="#0000ff" />
      <Text style={styles.text}>Hello, StatusBar!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  text: {
    fontSize: 20
  }
});

Output

The app screen shows white background with centered text 'Hello, StatusBar!' and a blue status bar with light text on top.

Common Pitfalls

Common mistakes when using StatusBar include:

• Not importing StatusBar from 'react-native'.
• Using backgroundColor on iOS, which has no effect.
• Forgetting that barStyle values are case-sensitive.
• Not setting hidden properly to show or hide the status bar.

Also, on Android, translucent can cause content to overlap the status bar if not handled.

javascript

/* Wrong: backgroundColor on iOS does nothing */
<StatusBar backgroundColor="#ff0000" />

/* Right: Use barStyle for iOS text color */
<StatusBar barStyle="light-content" />

Quick Reference

Prop	Description	Platform
barStyle	Text color style: 'default', 'light-content', 'dark-content'	iOS, Android
backgroundColor	Status bar background color	Android only
hidden	Show or hide status bar (true/false)	iOS, Android
translucent	Make status bar translucent	Android only

Key Takeaways

Use the StatusBar component from 'react-native' to control the status bar appearance.

Set barStyle to change text color; use backgroundColor only on Android.

hidden prop controls visibility; translucent affects Android layout.

Always test on both iOS and Android as behavior differs.

Import StatusBar correctly and use case-sensitive prop values.