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'| Props | Description |
|---|---|
| animated | A status bar is animated if its property is changed. It supports backgrondColor, hidden, and barStyle. |
| barStyle | It sets the color of status bar text. |
| hidden | It 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. |
| backgroundColor | It sets the background color of the status bar. |
| translucent | When it is set of true, the app is built under the status bar. |
| showHideTransition | It displays the transition effect when showing and hiding the status bar. The default is ‘fade’. |
| networkActivityIndicatorVisible | It 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}>
<StatusBar
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>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: 'center',
alignItems:'center',
flex:1,
}
});
