React Native Status Bar Example Tutorial

Hi Guys,

In this blog, I will explain you how to create status bar in react native. You can easily create status bar in react native. First i will import namespace StatusBar

, after I will make status bar using StatusBar tag in react native.

Here, I will give you full example for simply display status bar using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init StatusBar 

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from 'react'  
import { View,StyleSheet,AppRegistry,StatusBar } from 'react-native'  

  
export default class StatusBarDemo extends Component {  
    render() {  
        return (  
            <View style = {styles.container}>  
                <StatusBar  
                    backgroundColor = "#7BDCB5"  
                    barStyle = "dark-content"   
                    hidden = {false}    
                    translucent = {true}  
                />  
            </View>  
        )  
    }  
}  
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
    }  
})  

Step 3 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...