'How to find height of status bar in Android through React Native?

How can I find the height of the status bar on Android through React Native?

If I check the React.Dimensions height the value seems to include the status bar height too but I'm trying to find the height of the layout without the status bar.

Solution 1:^[1]

You don't need any plugins for this (anymore), just use StatusBar.currentHeight:

import {StatusBar} from 'react-native';
console.log('statusBarHeight: ', StatusBar.currentHeight);

EDIT: Apparently this does seem to work on Android always, but on iOS, initially undefined is indeed returned :(

Solution 2:^[2]

Unfortunately, as of v0.34, the API to do this is still inconsistent across platforms. StatusBarManager.HEIGHT will give you the current height of the Status Bar on Android.

import { Platform, NativeModules } from 'react-native';
const { StatusBarManager } = NativeModules;

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;

On iOS, you can use getHeight()

StatusBarManager.getHeight((statusBarHeight)=>{
  console.log(statusBarHeight)
})

As a side note, if you want your app to draw under the status bar on Android similar to the default iOS behavior, you can do so by setting a couple props on <StatusBar> as follows:

<StatusBar translucent={true} backgroundColor={'transparent'} {...props} />

Solution 3:^[3]

You can use this helper function which enables you to get the Status Bar height on iOS and Android. For iOS, the calculation is done to get the different StatusBar height when >= iPhone X (with notch) is used.

// functions-file.js
import { Dimensions, Platform, StatusBar } from 'react-native';

const X_WIDTH = 375;
const X_HEIGHT = 812;

const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const { height, width } = Dimensions.get('window');

export const isIPhoneX = () => Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
    ? width === X_WIDTH && height === X_HEIGHT || width === XSMAX_WIDTH && height === XSMAX_HEIGHT
    : false;

export const StatusBarHeight = Platform.select({
    ios: isIPhoneX() ? 44 : 20,
    android: StatusBar.currentHeight,
    default: 0
})

Then use it directly when imported:

import { StatusBarHeight } from './functions-file.js'

height: StatusBarHeight

Another option if you use react-navigation-stack - it provides the header height via hook - https://reactnavigation.org/docs/en/stack-navigator.html#headertransparent

import { useHeaderHeight } from 'react-navigation-stack';

// ...

const headerHeight = useHeaderHeight();

Solution 4:^[4]

import Constants and Dimensions.

import Constants from 'expo-constants';
import Dimensions  from 'react-native';

in stylesheet container hight - status bar hight = without status hight.

 container: {   height: Dimensions.get('window').height - Constants.statusBarHeight,}

Solution 5:^[5]

If you are using @react-navigation/native-stack

import { useHeaderHeight } from '@react-navigation/elements';
const headerHeight = useHeaderHeight();

Link to source

Solution 6:^[6]

"React-native-status-bar-height" is a small library that helps you to get status bar height.

Solution 7:^[7]

import {NativeModules} from 'react-native';

// ...

const {StatusBarManager} = NativeModules;

const height = StatusBarManager.HEIGHT;

Solution 8:^[8]

const deviceHeight = Dimensions.get('screen').height;

deviceHeight={deviceHeight}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lee Brindley
Solution 2	jmurzy
Solution 3
Solution 4	Omar bakhsh
Solution 5	Michael Brenndoerfer
Solution 6	Mehdi Saghari
Solution 7
Solution 8	subas pathak

'How to find height of status bar in Android through React Native?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]