Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

React Native Status Bar

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

In this blog, we will discuss in-depth about React Native Status Bar. We will learn about customizing your status bar by adding setting values for different properties that are present in the status bar class. If you are new to React, please refer to the blog React Basics and Components on the Coding Ninjas Website.

Click on the following link to read further: Hooks in React JS

What is a Status Bar?

A status bar is a horizontal window at the bottom of a parent window that displays various types of status information. It looks something like the images shown below.


In an Android device, it shows notifications, battery percentage, network status etc. 

status bar in android

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

React Native Status Bar

It is used to decorate the default status bar of the application. This component is present in the react-native library and can be used by importing from it. React Native gives us the power to use even multiple status bars simultaneously. We can also customize the status bar by specifying the values for different properties that are taken by this status bar. Some of the props of the status bar are discussed below.

Prop Name: hidden

Role: We can set the value of this property to true or false to hide or show the status bar.

 

Prop Name: backgroundColor

Role: This property is used to set the background colour of the status bar.

 

Prop name: showHideTransition

Role: We can set the transition of showing/hiding the status bar with the help of this property.

 

Prop Name: animated

Role: We can animate our status bar with the help of this attribute. It can allow the use of other attributes like barStyle, hidden, etc.

 

Prop Name: barStyle

Role: We can set the colour of the text on the status bar using this property.

 

Prop Name: translucent

Role: We can set the value of this property to true or false based on whether the application will be built under the status bar or not.

Implementation of the Status Bar

The following is an example to demonstrate the use of React Native Status bar.

Code:

import React, { Component } from 'react';
import { StatusBar } from 'react-native'

const App = () => {
   return (
      <StatusBar barStyle = "dark-content" backgroundColor = "#3632A8" translucent = {true}/>
   )
}

export default App

Output:

This is a basic status bar, we can also add animation and change the animation in it. Let’s see how?

Status Bar Style

The type of status bar style is ‘enum’. It can be changed into various styles like creating a status bar with a custom background, for example, dark or light. 

  • For dark background
<StatusBar barStyle = "dark-content" backgroundColor = "#3632A8" translucent = {true}/>
  • For light background
<StatusBar barStyle = "light-content" backgroundColor = "#3632A8" translucent = {true}/>
  • For default background
<StatusBar barStyle = "default" backgroundColor = "#3632A8" translucent = {true}/>

Not only this, we can add animations in the status bar as well. Let’s see how.

Status Bar Animation

The status bar animation type for transitions on iOS is ‘enum’. This can have different values as given below.

  1. For faded status bar.
    Value = ‘fade’
  2. For the sliding status bar.
    Value = ‘slide’
  3. For the default status bar.
    Value = ‘none’

By changing these values we can change the animation of a status bar.

Also read, React devtools

Frequently Asked Questions

What are some of the React Native StatusBar Methods?

Some of the commonly used React Native Status Bar methods are setHidden, setTranslucent, setBackgroundColor, etc.

Which property do I need to set if I want to make the Status Bar animated?

One can set the animated property of the React Native Status Bar to add animation to the status bar.

What are the values taken by the barStyle property?

The barStyle property can take any of the three values, i.e. light-contentdark-content and default.

Conclusion

This article extensively discussed React Native Status Bar and a sample application containing its implementation. Check out our Android Development Course on the Coding Ninjas Website to learn everything you need to know about Android development.

We hope this blog has helped you enhance your React Native Status Bar knowledge. If you want to learn more, check out the amazing content on the Coding Ninjas Website. You can also consider our React Js Course to give your career an edge over others. Do upvote our blog to help other ninjas grow. 

Happy Coding!

Topics covered
1.
Introduction
2.
What is a Status Bar?
3.
React Native Status Bar
4.
Implementation of the Status Bar
5.
Status Bar Style
6.
Status Bar Animation
7.
Frequently Asked Questions
7.1.
What are some of the React Native StatusBar Methods?
7.2.
Which property do I need to set if I want to make the Status Bar animated?
7.3.
What are the values taken by the barStyle property?
8.
Conclusion