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.
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 :(
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} />