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

Question

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 ba

Answer 1

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();