React Native StatusBar Component Android iOS Example Tutorial

Status Bar is the top above main icon holder bar in android and iOS mobile phones. Status Bar is used to show Mobile device 2G, 3G, 4G Network Icon, WiFi icon, Live time clock, Notifications and Battery icon in both android and iOS mobiles. So in this tutorial we would going to make a react native app with StatusBar Component in both Android iOS Example. We would perform various types of functionality on Mobile’s own Status bar using this component. So let’s get started .

Contents in this project React Native StatusBar Component Android iOS Example Tutorial :

1. Import StyleSheet, View, StatusBar, Text and Platform component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, StatusBar, Text, Platform } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, View, StatusBar, Text, Platform } from ‘react-native’;

2. Create a Root View in render’s return block. This View is our main View component.

<br />
render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>     </View><br />
   );<br />
 }

render() {

return (

</View>

);

}

3. Create the StatusBar component in Root View.

barStyle : This prop would help us to set the color of StatusBar inside Text and Icons. There are 3 types of value this prop would support :

light-content
dark-content
default

hidden : This prop would hide the StatusBar and make your app full screen. If you set false inside it then it will not hide the StatusBar. If you set true in it then it will hide the StatusBar.

backgroundColor : Used to set the background color of StatusBar.

Note :: Only Android app supports backgroundColor prop and it will not work in iOS application.

translucent : This prop is also works only in Android devices. This would allow our app to draw the app data under the Status bar.

networkActivityIndicatorVisible : To show the Network Activity Indicator in iOS devices. This prop will not work in Android devices.

<br />
render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>        <StatusBar<br />
        barStyle = “light-content”<br />
        hidden = {false}<br />
        backgroundColor = “#00BCD4”<br />
        translucent = {true}<br />
        networkActivityIndicatorVisible = {true}<br />
        /></p>
<p>     </View><br />
   );<br />
 }

render() {

return (

<StatusBar

barStyle = “light-content”

hidden = {false}

backgroundColor = “#00BCD4”

translucent = {true}

networkActivityIndicatorVisible = {true}

</View>

);

}

4. Adding a Sample Text component after Status Bar.

<br />
<Text style={{textAlign : ‘center’, fontSize: 25}}> React Native Status Bar Example Tutorial </Text>

1	<Text style={{textAlign : ‘center’, fontSize: 25}}> React Native Status Bar Example Tutorial </Text>

5. Create Style for Root View.

<br />
const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>justifyContent: ‘center’,<br />
flex:1,<br />
marginTop: (Platform.OS == ‘ios’) ? 20 : 0</p>
<p>}</p>
<p>});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: ‘center’,

flex:1,

marginTop: (Platform.OS == ‘ios’) ? 20 : 0

}

});

6. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, StatusBar, Text, Platform } from ‘react-native’;</p>
<p>export default class Myproject extends Component {</p>
<p> render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>        <StatusBar<br />
        barStyle = “light-content”<br />
        hidden = {false}<br />
        backgroundColor = “#00BCD4”<br />
        translucent = {true}<br />
        networkActivityIndicatorVisible = {true}<br />
        /></p>
<p>        <Text style={{textAlign : ‘center’, fontSize: 25}}> React Native Status Bar Example Tutorial </Text></p>
<p>     </View><br />
   );<br />
 }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>justifyContent: ‘center’,<br />
flex:1,<br />
marginTop: (Platform.OS == ‘ios’) ? 20 : 0</p>
<p>}</p>
<p>});