Add StatusBar in React Native App in Android and IOS

This tutorial explains how to add StatusBar in react native application for android and ios device. React Native StatusBar is a component to show the indicators like the battery, network, notification etc. React Native by default doesn’t understand the status bar and render the view from the top left corner of the screen and override the status bar. To avoid that we need to give top margin for IOs and Android both but as you know the hight of status bar of both the platform is different so we need a smart solution so here is the status bar which will help you to reserve the space for the StatusBar.

NOTE : The react native StatusBar component only support backgroundColor for Android only. So to change the color of the IOS status bar you have to wrap the Status Bar with a view which will have a hight of the status bar and background color.

React Native Status Bar Example 

Lets follow the steps that helps to add StatusBar in react native application for android and ios device.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.

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

Step 4: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle="dark-content"
          // dark-content, light-content and default
          hidden={false}
          //To hide statusBar
          backgroundColor="#ff4081"
          //Background color of statusBar
          translucent={false}
          //allowing light, but not detailed shapes
          networkActivityIndicatorVisible={true}
        />
        <Text style={styles.text}> Status Bar Example </Text>
      </View>
    );
  }
}

Step 5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: Platform.OS === 'ios' ? 20 : StatusBar.currentHeight,
  },
  text: {
    fontSize: 18,
    color: 'black',
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to add StatusBar in react native application for android and ios device.

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


export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle="dark-content"
          // dark-content, light-content and default
          hidden={false}
          //To hide statusBar
          backgroundColor="#ff4081"
          //Background color of statusBar
          translucent={false}
          //allowing light, but not detailed shapes
          networkActivityIndicatorVisible={true}
        />
        <Text style={styles.text}> Status Bar Example </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: Platform.OS === 'ios' ? 20 : StatusBar.currentHeight,
  },
  text: {
    fontSize: 18,
    color: 'black',
  },
});

Screenshot :

This is all about Adding StatusBar in React Native App in Android and IOS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.