[React Native] 100vw, 100vh 구하기

영근·2024년 2월 17일
reactnative
0

React Native

목록 보기
1/1
post-thumbnail

2024.2.15.
GeunYeong Kim

문제상황

height: Dimensions.get('window').height;

bottomSheet를 구현하다가 위 코드가 iOS와 안드로이드에서 다르게 동작하는 문제가 발생했다.

  • iOS : 전체 화면 높이
  • 안드로이드 : 상단 헤더와 바텀 내비게이션을 제외한 화면 높이

조사

React Native에서는 vw, vh 등을 사용할 수 없기 때문에 Screen size를 구하기 위해 Dimension을 사용할 수 있다.
Dimension의 get에는 ‘window’와 ‘screen’의 두 가지 파라미터를 줄 수 있다.

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const screenWidth = Dimensions.get('screen').width;
const screenHeight = Dimensions.get('screen').height;

두 가지의 차이에 대해서공식문서에는 다음과 같이 정리되어 있는데, 제대로 이해하기는 어렵다.

  • window : 현재 앱의 창에서 보이는 부분의 크기
  • screen : 디바이스 화면의 크기

관련한 이슈도 있지만 아직 개선되지는 않은 상황이다.

이와 관련된 스택오버플로우 답변에서 자세한 대답을 찾을 수 있었다.

소스의 Dimension 부분을 살펴보면 주석으로 다음과 같이 적혀있는 것을 볼 수 있다.

// Screen and window dimensions are different on android

애초에 높이 계산 로직 자체를 다르게 해줘야하는 것 같았다.

아래 다른 답변을 확인해보니, 안드로이드에서 지원하는 여러 기능으로 인해 iOS와는 다르게 window 사이즈가 screen 사이즈보다 작거나 같을 수 밖에 없는 현상이 이해되었다.

  • 몇몇 안드로이드 디바이스 하단에 항상 내비게이션 바가 존재할 수 있다.
  • 안드로이드의 split-screen/multi-window 기능을 사용하면 window가 screen보다 작아질 수 있다.
  • 안드로이드 디바이스에서 screen-zoom이나 display size 조절을 하는 경우 달라질 수 있다.

따라서 다른 스택오버플로우 답변에서 알 수 있듯이, 안드로이드의 window 높이에는 iOS와는 다르게 ‘하단 내비게이션 바 높이가 포함될 가능성’이 존재하기 때문에 다르게 동작하는 것이었다.

해결

  • Dimension.get을 사용할 때는 screen을 사용해 iOS와 안드로이드의 크기를 맞출 수 있다.
  • 하지만 앱 실행시 한 번만 크기를 가져오기 때문에, 가로모드나 폴더블폰 지원을 위해서는 이벤트 리스너를 사용해주어야 한다.

    If you are targeting foldable devices or devices which can change the screen size or app window size, you can use the event listener available in the Dimensions module as shown in the below example.

const [dimensions, setDimensions] = useState({
    window: windowDimensions,
    screen: screenDimensions,
  });

  useEffect(() => {
    const subscription = Dimensions.addEventListener(
      'change',
      ({window, screen}) => {
        setDimensions({window, screen});
      },
    );
    return () => subscription?.remove();
  });

useWindowDimension

  • 공식문서에서는 이 hook을 사용할 것을 권장한다.
  • 앱이 실행될 때 한 번 크기를 가져오는 Dimension과 달리, 사이즈가 업데이트될 때마다 동작한다.
  • useWindowDimensions · React Native
  • 하지만 이것 역시도 iOS와 안드로이드의 높이 차이가 존재하기 때문에
    • 높이를 맞춰야 하면 -> 위의 방법
    • 높이가 조금 달라도 되면 -> hook 사용해서 편하게 구현 하면 될 듯 하다.

끝

Reference

profile
영근
Undefined JS developer

0개의 댓글