React Native

React Native – StatusBar

React Native StatusBar is a component which is used to decorate status bar of the app. It is used by importing the StatusBar component from the react-native library. We can use multiple StatusBar at the same time.  

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 the 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 and you can start working directly.

import { StatusBar } from 'react-native'
animatedA status bar is animated if its property is changed. It supports backgrondColor, hidden, and barStyle.
barStyleIt sets the color of status bar text.
hiddenIt is used to hide and show the status bar. By default, it is false. If hidden = {false} it is visible, if hidden = {true}, it hide the status bar.
backgroundColorIt sets the background color of the status bar.
translucentWhen it is set of true, the app is built under the status bar.
showHideTransitionIt displays the transition effect when showing and hiding the status bar. The default is ‘fade’.
networkActivityIndicatorVisibleIt checks the network activity indicator is visible or not. It supports in iOS.
//This is an example code for StatusBar// 
import React, { Component } from 'react';
import { StyleSheet, View, Text ,StatusBar, Platform  } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.MainContainer}>
        barStyle = "dark-content" 
        // dark-content, light-content and default
        hidden = {false}
        //To hide statusBar
        backgroundColor = "#00BCD4"
        //Background color of statusBar
        translucent = {false}
        //allowing light, but not detailed shapes
        networkActivityIndicatorVisible = {true}
        <Text> Status Bar Example </Text>
const styles = StyleSheet.create({
  MainContainer :{
    justifyContent: 'center',

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button