How to get height of Status bar in Android app using React Native?

React Native provides StatusBar component which has a constant currentHeight. This constant provides the status bar + notch height. It works in Android apps.

You need to import the StatusBar component from react-native package and use StatusBar.currentHeight to get the height of statusbar.

Code Example

import React, { useState } from 'react';
import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View } from 'react-native';

const App = () => {
  

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>Status Bar Height: {StatusBar.currentHeight}</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ECF0F1'
  },
  textStyle: {
    textAlign: 'center',
    marginBottom: 8
  }
});

export default App;

Output –

In our code we are getting the statusbar height in line 10.

Live Demo

Conclusion

Getting the height of status bar is useful to plan the heights and margins of various UI elements in app. Luckily, React Native provides StatusBar.currentHeight constant which gives the value of height of status bar.