Updated March 27, 2023
Introduction to React Native StatusBar
StatusBar in react native is used to manage the status bar, it gives a powerful mechanism to status bar for making it more useful, it has features like animation (background color), hidden (to hide or to show status bar ),background-color(used to design the background color) other than these attributes it has some methods also which makes it very useful, these methods are like setHidden (to hide or to show status bar ), setNetworkActivityIndicatorVisible (handle network activity ), setBackgroundColor (this function is used to manage color of background of status bar), setBarStyle(to design and customization of status bar).
Syntax:
In the below syntax we are using attributes like backgroundcolor(to put some color to the background of the status bar), barStyle(we can pass the types of style which we wanted to use in these attributes), etc.
<StatusBar
backgroundColor="color of background"
barStyle="bar style which we wanted to have in bar status"
hidden = { boolean value of bar status if we want to hide or we want to show status bar }
translucent = {boolean value }
networkActivityIndicatorVisible={boolean value to make network indicator visible}
/>Attributes
1. Animated: A status bar with attribute animation will play its role when there will be any change in the property. In attribute will also support background Color(background color will be useful to represent status bar in the required color and on change). It also supports hidden and barStyle.
2. barStyle: Whatever text will be used in react native can be designed with the help of barStyle(like font size, font color, etc .)
3. hidden: If we wanted to hide or show the status bar then we can use property hidden. In case if we do not set value for this property then it will be false. It’s working principle is like hidden = {false} then the status bar will be visible and if hidden={true} then the status bar will not visible.
4. backgroundColor: Background color is an important thing in react native, it gives color to the background of the status bar.
5. Translucent: If we wanted to build an app under the status bar then we can use translucent attributes. When it will be true, the app will build under the status bar.
6. showHideTransition: It is kind of an effect, it creates a transition effect in case showing and hiding happening. In case if we do not define value for showHideTransition then it will take ‘fade’
7. networkActivityIndicatorVisible: This attribute is mainly used with IOS devices, It checks for network activity indicator(checks for visibility for the network activity)
8. setHidden: This method in react native status bars is used to show or hide status bars.
9. setBarStyle: This function is used for designing status bars. It gives a powerful way to customize the status bar.
10. setBackgroundColor: This attribute is only supported by android apps. In this attribute, we can design a background color for the status bar.
11. setNetworkActivityIndicatorVisible: This attribute only use IOS devices and it controls the network activity indicator.
12. setTranslucent: This attribute will work only with Android apps. It used to handle the translucency of the status bar.
Examples to implement React Native StatusBar
Given below are the examples of React Native StatusBar:
Example #1
In the below example we are displaying a simple status bar along with little design over it. In the design section, we are selecting barStyle with the value dark-content and hidden with value false(which means the status bar will be visible). We have set the value for background color also. Here We are setting translucent as the false and networkActivityIndicatorVisible as the true(displaying network)
//Here we are writing a very simple example to show the status bar in react native//
Code:
import React, { Component } from 'react';
//importing react and component inside our code for uses
import { StyleSheet, View, Text, StatusBar, Platform } from 'react-native';
// here we are importing all the components of react native inside our code
export default class App extends Component {
render() {
return (
<View style={statusBarStyles.styleForMainContainer}>
<StatusBar
barStyle="dark-content"
//it has few properties like dark-content, light-content and default
hidden={false}
//if we do not want to show status bar than we will set hidden={false}
backgroundColor="#00BCD4"
//here we are setting the background color for the status bar
translucent={false}
//here we are allowing light
networkActivityIndicatorVisible={true}
//here we are making network indicator true ,in case if we do not want to show network indicator we can set it as false
/>
<Text> This is an example for status bar </Text>
</View>
);
}
}
const statusBarStyles = StyleSheet.create({
styleForMainContainer: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});Output:
Example #2
In the below example we are displaying a simple status bar along with little design over it. In the design section, we are selecting BarStyle with the value dark-content and hidden with the value true(which means the status bar will not be visible). We have set the value for background color also. Here We are setting translucent as the false and networkActivityIndicatorVisible as the true(displaying network)
//Here we are writing a very simple example to show the status bar in react native//
Code:
import React, { Component } from 'react';
//importing react and component inside our code for uses
import { StyleSheet, View, Text, StatusBar, Platform } from 'react-native';
// here we are importing all the components of react native inside our code
export default class App extends Component {
render() {
return (
<View style={statusBarStyles.styleForMainContainer}>
<StatusBar
barStyle="light-content"
//it has few properties like dark-content, light-content and default
hidden={true}
//if we do not want to show status bar than we will set hidden={false}
backgroundColor="#b3e6ff"
//here we are setting the background color for the status bar
translucent={false}
//here we are allowing light
networkActivityIndicatorVisible={false}
//here we are making network indicator true ,in case if we do not want to show network indicator we can set it as false
/>
<Text> This is an example for status bar with hiding status bar</Text>
</View>
);
}
}
const statusBarStyles = StyleSheet.create({
styleForMainContainer: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});Output:
Conclusion
From this article we learned about the implementation of the status bars in android and IOS apps with help of react-native StatusBar component, we learned it’s attribute which contains all the useful attributes for any status bars.
Recommended Articles
This is a guide to React Native StatusBar. Here we discuss the basic concept, attributes, and examples of React Native StatusBar with code and output. You may also have a look at the following articles to learn more –
