How to find height of status bar in Android through React Native?
AndroidReact NativeStatusbarAndroid Problem Overview
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.
Android Solutions
Solution 1 - Android
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 - Android
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 - Android
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 - Android
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 - Android
If you are using @react-navigation/native-stack
import { useHeaderHeight } from '@react-navigation/elements';
const headerHeight = useHeaderHeight();
Solution 6 - Android
"React-native-status-bar-height" is a small library that helps you to get status bar height.
Solution 7 - Android
import {NativeModules} from 'react-native';
// ...
const {StatusBarManager} = NativeModules;
const height = StatusBarManager.HEIGHT;