ReactNative Status bar is easy to use and all you need to do is set properties to change it.

The hidden property can be used to hide the status bar. 

The barStyle can have three values – dark-content, light-content and default


    barStyle = "dark-content"
    // dark-content, light-content and default
    hidden = {false}
    //To hide statusBar
    backgroundColor = "#00BCD4"
    //Background color of statusBar only works for Android
    translucent = {false}
    //allowing light, but not detailed shapes
    networkActivityIndicatorVisible = {true}



//This is an example code for StatusBar//

import React, {Component} from 'react';

//import react in our code.

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

// import all basic components


export default class StatusbarExample extends Component {

  render() {

    return (

      <View style={styles.MainContainer}>



          // dark-content, light-content and default


          //To hide statusBar


          //Background color of statusBar


          //allowing light, but not detailed shapes



        <Text> Status Bar Example </Text>





const styles = StyleSheet.create({

  MainContainer: {

    justifyContent: 'center',

    alignItems: 'center',

    flex: 1,





React Native Statusbar

Subscribe For Daily Updates