[React Native] 가로의 길이가 바뀌는 디바이스(폴드) 대응: Dimensions -> useDimensions

[React Native] 가로의 길이가 바뀌는 디바이스(폴드) 대응: Dimensions -> useDimensions

---

 

루빗(루틴 관리 서비스 어플) 유저중에는 당연히 갤럭시 폴드 사용자도 있다.

종종 해당 유저들로부터 버그제보가 들어온다. 디바이스를 접거나 펴면 화면이 그에 맞게 대응되지 않는다는 것.

 

직접 버그를 재현해보았다. 정말이었다.

 

접은 상태: A / 편 상태: B

라고 하겠다.

👎Bad: A상태에서 B상태로 바꾸면 A상태의 width 그대로 기억함

A에서 B로 바뀌었는데, 하단 탭바는 여전히 A에 맞게 대응되어 있다.

 

이유가 무엇일까? 바로 Dimensions에 있다.

/*
  👎 Bad
*/
import { Dimensions, View } from 'react-native';

const width = Dimensions.get('screen').width;
const TabContainer = () => {
  return (
    <View 
      style={{
        ...
        width
      }}>
      ...
    </View>
  )
}

이렇게 사용하면 A에서 B 또는 B에서 A 상태로의 전환이 이루어지는 반면, width는 이전 상태를 그대로 기억한다.

그래서 컴포넌트 밖에서 선언하면 안된다.

-> react-native에서는 useWindowDimensions라는 hook을 지원한다.

/*
  👍 Good
*/

import { useWindowDimensions, View } from 'react-native';

const TabContainer = () => {
  const { width } = useWindowDimensions();
  return (
    <View 
      style={{
        ...
        width
      }}>
      ...
    </View>
  )
}

이렇게 사용하면 상태가 바뀌는 대로 width가 업데이트 되어 즉각 대응이 가능해진다.

👍Good: A상태에서 B상태로 바꾸면 B상태의 width로 잘 업데이트 됨

 

 

유저들의 불편함을 또 하나 없앴다! 😃