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.

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

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 :

  1. light-content
  2. dark-content
  3. 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.

4. Adding a Sample Text component after Status Bar.

5. Create Style for Root View.

6. Complete source code for App.js File :

Screenshot in Android device :


Screenshot in iOS device :

Leave a Reply

Your email address will not be published. Required fields are marked *