How to Get Current Status Bar Height In React Native?

Oct 18, 2022 . Admin

In this short tutorial we will cover an How to find height of status bar in Android through React Native. This post will give you simple example of how to get status bar height in react native. you can understand a concept of get status bar height react native Code Example. if you have question about react native statusbar example then I will give simple example with solution. You just need to some step to done React Native get correct status bar height on android.

In this example,We will get to status bar height in react native.you can mobile view not display then use StatusBar.currentHeight in react native.below's this example.

SafeAreaView are not working to android device or view not perfect then use to StatusBar.currentHeight in react native

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

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

import React from 'react';
import { StyleSheet, SafeAreaView, Text, StatusBar } from "react-native";
  
export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.title}>MyWebtuts.com</Text>
        </SafeAreaView>
      );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#3B5323",
        marginTop:StatusBar.currentHeight
      },
      title: {
        fontSize: 30,
        fontWeight: "bold",
        textAlign: "center",
        color: "#fff",
      },
});

Step 3: Run Project

In the last step run your project using the below command.