[ReactNative/iOS] SafeAreaView 등을 사용해도 iOS의 노치 부분을 제어할 수 없을 때

나는 RN을 개발할 때, 주로 Window 환경에서 Android로 개발한 후 디버깅 단계에서 iOS의 UI 등을 확인하곤 하는데,

iOS의 노치 부분을 제어하기 위해 SafeAreaView로 감싼 Component임에도 노치 부분을 제어할 수 없는 몇몇 컴포넌트가 존재하곤 한다.

 

그래서 요즘 아주 흥미가 생긴 chatGPT에게 노치 부분을 제어하는 방법에 대해 물어봤다.

https://k-taeyang.tistory.com/43

Controlling the Notch in React Native

 

답변은 언제나 나를 놀라게 하지만, GPT의 답변으로도 내 고민은 해결되지 않았다.

그래서 iOS의 노치 부분을 제어할 수 있는 몇가지 방법을 더 작성해보려 한다.

 

1. react-native-safe-area-context 라이브러리의 SafeAreaView 태그 사용하기.

https://github.com/th3rdwave/react-native-safe-area-context

GitHub - th3rdwave/react-native-safe-area-context: A flexible way to handle safe area insets in JS. Also works on Android and We

개발을 하다보면 느끼는게, 내가 맞닥뜨린 에러나 고민거리는 대부분 다른 개발자분들이 항상 먼저 겪고 스택 오버플로우나 깃헙같은 커뮤니티에 질문과 해결방법을 제시해주고 있다.

그리고 이 경우의 대부분은 라이브러리화 되어있음을 알 수 있다.

 

npm install react-native-safe-area-context

npm을 설치한 후 react native에서 가져온 safeareaview가 아닌 위 라이브러리에서 import해주면,

보다 많은 props를 지닌 safeareaview를 사용할 수 있을 것이다.

 

2. useSafeAreaInsets()를 사용하여 강제로 top을 내려주기.\

일단 이 방법도 1의 라이브러리에서 제공해주는 Hooks인데,

노치 부분의 Height를 가져와서 그 부분만큼 컴포넌트를 내려주는 방법이다.

(나는 아무리 노력해도 노치 부분을 제어할 수 없을 때 최종적으로 사용한다.)

아래는 useSafeAreaInsets() 의 예제이다.

 

...
import { useSafeAreaInsets } from 'react-native-safe-area-context';
...

const { top } = useSafeAreaInsets();

return (
<View
        style={{
          height: top,
        }}
      >
        <StatusBar
          barStyle={'dark-content'}
        />
      </View>
      )

가만보니 이 경우는 주로 StatusBar 부분을 translucent={true} 해주어 배경을 투명하게 하는 UI에 적용할 때

많이 사용된 것 같다.