[React Native] Dimension height 뿌시기 (안드로이드)

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

const statusBarHeight = getStatusBarHeight(false); // skip android = false;

const deviceHeight = Dimensions.get('screen').height;
const windowHeight = Dimensions.get('window').height;

 

deviceHeight: 기기 전체 세로길이

windowHeight: 앱이 차지하는 만큼의 세로길이

statusBarHeight는 상태바의 세로길이

 

공식문서 링크: https://reactnative.dev/docs/dimensions

 

문제는 windowHeight가 삼성/구글 폰 별로 다른 것이다.

삼성폰은 window height가 statusBarHeight를 포함하지 않고,

구글폰은 window height가 statusBarHeight를 포함한다.

 

보통 bottomNavHeight가 48인데,

device height에서 window height를 뺐을 때 48이 나오면,

window height가 statusBarHeight를 포함한다는 뜻이다.

 

그래서 statusBarHeight를 뺀 진짜 windowHeight의 길이를 알고싶다면,

다음 함수를 사용한다.

 

const isWindowHeightIncludeStatusBarHeight = ({
  windowH,
  deviceH,
}: {
  windowH: number;
  deviceH: number;
}): boolean => {
  const tempDeviceH = windowH + bottomNavBarH;

  /**
   갤럭시 S22
    "_statusBarHeight": 27
    "windowH": 753
    "deviceH": 780
   */
  if (deviceH - tempDeviceH < 0) return false; // 오차가 0보다 작으면, bottomNavBarH는 없다는 뜻이야.


  if (deviceH - tempDeviceH >= 3) {
    // 오차 3정도 있다고 치고, 그래도 남는다 싶으면, windowH에는 statusBarHeight가 포함되지 않았다는 뜻이야.
    return false;
  }
  return true;
};

그러나 주의할 점.

갤럭시 S22 같이 bottomNavBar가 존재하지 않는데,

deviceH - tempDeviceH가 음수인 것을 통해 알 수 있다.

deviceH - tempDeviceH가 음수인 경우는, windowH = deviceH + statusBarHeight 이므로, 

return false로 예외처리 해준다.

 

 

* 주의: 갤럭시 S22같은 경우는 bottomNavBar가 존재하지 않는다.

* 주의: iOS는 windowHeight에 항상 statusBarHeight까지 포함한다.

 

 

참고링크

https://velog.io/@kjwsx23/ReactNative-Dimension%EA%B3%BC-%EC%A2%8C%ED%91%9C%EA%B0%92