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.
<StatusBar barStyle = "dark-content" backgroundColor = "#3632A8" translucent = {true}/>
<StatusBar barStyle = "light-content" backgroundColor = "#3632A8" translucent = {true}/>
<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.
-
For faded status bar.
Value = ‘fade’
-
For the sliding status bar.
Value = ‘slide’
-
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-content, dark-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!
84+ registered 