ReactNative StatusBar(상태바)의 높이 구하기

문제상황

ReactNative를 하다보면 StatusBar(상태바)의 높이를 구해야 하는 일이 있습니다.
여느때와 같이 react-native-status-bar-height를 사용하며 개발을 하던 도중 iPhone 14 Pro의 다이나믹 아일랜드에 대한 대응이 되어있지 않아 난감했습니다.

2년 전에 업데이트가 되어 다이나믹 아일랜드가 지원이 안 되네요...

그래서 현재는 다른 모듈을 써야합니다.

해결과정

# install package
npm install react-native-safearea-height
# OR
yarn add react-native-safearea-height

패키지를 설치해주고, 사용법은 react-native-status-bar-height와 같습니다.

import {getStatusBarHeight} from 'react-native-safearea-height';

getStatusBarHeight();

안드로이드는 iOS와 다르게 StatusBar가 뷰에 포함되어있지 않습니다. 그래서 statusBarHeight를 0으로 주고 싶을때는

getStatusBarHeight(true);

로 skipAndroid를 true로 주면 간단하게 android에서는 0이 반환됩니다!

최종정리

import {getStatusBarHeight} from 'react-native-safearea-height';

getStatusBarHeight();
// skip android (android status bar height 0)
getStatusBarHeight(true);

모두 열심히 코딩하세요!