ReactNative 에서 StatusBar 높이 구하기

문제의 상황

상단바 높이를 커스텀해야 하는데,
SafeArea에 속하는 StatusBar의 높이를 알아야 커스텀이 가능한 상황

원하는 결과

어떤 기종이든 상관 없이 50px + StatusBar 높이로 세팅해야 한다.

ios

ios 에서는 StatusBar 높이를 다음과 같이 구할 수 있다.

# import package
npm install --save react-native-status-bar-height

import { getStatusBarHeight } from 'react-native-status-bar-height';

const statusBarHeight = getStatusBarHeight(true);

android

위 패키지를 그대로 사용할 경우 안드로이드에서는 statusBarHeight 값이 0 으로 찍히게 된다.

따라서 안드로이드의 경우에는 다음과 같은 방법으로 구할 수 있다.

import { StatusBar } from 'react-native';

const statusBarHeight = StatusBar.currentHeight;

최종 정리

정리된 코드는 다음과 같다.

import { getStatusBarHeight } from 'react-native-status-bar-height';
import { StatusBar, Platform } from 'react-native';

const StatusBarHeight =
    Platform.OS === 'ios' ? getStatusBarHeight(true) : StatusBar.currentHeight;

const headerStyle: {
	backgroundColor: 'red',
	height: 50 + StatusBarHeight,
},