CODEWITHSUNDEEP
androidreact-nativestatusbar
Zohar Levin
Zohar Levin

Reputation: 2444

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.

Upvotes: 91

Views: 135863

Answers (11)

abdullah agsar
abdullah agsar

Reputation: 11

try this,

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

function App(): JSX.Element {
  return (
    <View style={styles.container}>
        ...
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors._primaryStatusBarBackgroundColor,
    paddingTop: Platform.OS ? StatusBarManager.HEIGHT : StatusBar.currentHeight, // it's worked for me 
  },
});

Instead of using SafeAreaView, I made this to work on every operating system

Upvotes: 0

HannahCarney
HannahCarney

Reputation: 3631

You can get the height of the statusbar via

  import { useSafeAreaInsets } from 'react-native-safe-area-context'

  const insets = useSafeAreaInsets()

  console.log('height of status bar', insets.top)

Upvotes: 10

Nicolai Lissau
Nicolai Lissau

Reputation: 8312

The package react-native-status-bar-height works well, however, if you don't want another dependency, I have extracted the gist here:

Create file getStatusBarHeight.tsx

import {Dimensions, Platform, StatusBar} from 'react-native';

const STATUSBAR_DEFAULT_HEIGHT = 20;
const STATUSBAR_X_HEIGHT = 44;
const STATUSBAR_IP12_HEIGHT = 47;
const STATUSBAR_IP12MAX_HEIGHT = 47;
const STATUSBAR_IP14PRO_HEIGHT = 49;

const X_WIDTH = 375;
const X_HEIGHT = 812;

const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const IP12_WIDTH = 390;
const IP12_HEIGHT = 844;

const IP12MAX_WIDTH = 428;
const IP12MAX_HEIGHT = 926;

const IP14PRO_WIDTH = 393;
const IP14PRO_HEIGHT = 852;

const IP14PROMAX_WIDTH = 430;
const IP14PROMAX_HEIGHT = 932;

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

let statusBarHeight = STATUSBAR_DEFAULT_HEIGHT;

if (Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS) {
  if (W_WIDTH === X_WIDTH && W_HEIGHT === X_HEIGHT) {
    statusBarHeight = STATUSBAR_X_HEIGHT;
  } else if (W_WIDTH === XSMAX_WIDTH && W_HEIGHT === XSMAX_HEIGHT) {
    statusBarHeight = STATUSBAR_X_HEIGHT;
  } else if (W_WIDTH === IP12_WIDTH && W_HEIGHT === IP12_HEIGHT) {
    statusBarHeight = STATUSBAR_IP12_HEIGHT;
  } else if (W_WIDTH === IP12MAX_WIDTH && W_HEIGHT === IP12MAX_HEIGHT) {
    statusBarHeight = STATUSBAR_IP12MAX_HEIGHT;
  } else if (W_WIDTH === IP14PROMAX_WIDTH && W_HEIGHT === IP14PROMAX_HEIGHT) {
    statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
  } else if (W_WIDTH === IP14PRO_WIDTH && W_HEIGHT === IP14PRO_HEIGHT) {
    statusBarHeight = STATUSBAR_IP14PRO_HEIGHT;
  }
}

export function getStatusBarHeight() {
  return Platform.select({
    ios: statusBarHeight,
    android: StatusBar.currentHeight,
    default: 0,
  });
}

Usage:

import {getStatusBarHeight} from './getStatusBarHeight';

export const Test = () => {

  const statusBarHeight = getStatusBarHeight();

  return <Text style={{ marginTop: statusBarHeight }}>Test</Text>

}

Upvotes: -1

devtucuju
devtucuju

Reputation: 11

For the situation where I need to escape a StatusBar component, my solution for Android is to use StatusBar.currentHeight to escape the StatusBar component. For iOS I use react-native's SafeAreaView component to escape the StatusBar.

Upvotes: 1

subas pathak
subas pathak

Reputation: 1

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

Upvotes: -2

Michael Brenndoerfer
Michael Brenndoerfer

Reputation: 4066

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

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

Link to source

Upvotes: 2

Fr&#233;d&#233;ric Fara Wat
Fr&#233;d&#233;ric Fara Wat

Reputation: 877

import {NativeModules} from 'react-native';

// ...

const {StatusBarManager} = NativeModules;

const height = StatusBarManager.HEIGHT;

Upvotes: 7

Omar bakhsh
Omar bakhsh

Reputation: 1056

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,}

Upvotes: 11

dblazeski
dblazeski

Reputation: 534

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

Upvotes: 22

IjzerenHein
IjzerenHein

Reputation: 2755

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 :(

Upvotes: 155

jmurzy
jmurzy

Reputation: 3923

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} />

Upvotes: 42

Related Questions