React Native/RN 를 이용하여 개발을 하다보면 IOS 에서의 노치가 있어서 View가 노치에 가려지는 상황이 발생합니다. 예전의 IOS와 달리 비교적 최근부터는 노치가 생겼기 때문에 이런 현상이 발생합니다. 상단바 제외(리액트 네이티브)하여 원하는 컨텐츠가 잘 보이게 해야되는 니즈가 있을 때는 어떻게 해야할까요? SafeAreaView 를 사용하는 경우에는 이런 현상을 방지할 수 있습니다. SafeAreaView 는 무엇일까요?
SafeAreaView의 목적은 장치의 안전 영역 경계 내에서 콘텐츠를 렌더링하는 것입니다. 현재 iOS 버전 11 이상이 설치된 iOS 기기에만 적용됩니다.
SafeAreaView는 내비게이션 막대, 탭 표시줄, 도구 모음 및 기타 조상 보기로 덮이지 않은 보기 부분을 반영하기 위해 중첩된 콘텐츠를 렌더링하고 패딩을 자동으로 적용합니다. 또한 가장 중요한 것은 Safe Area의 패딩이 둥근 모서리 또는 카메라 노치(예: iPhone 13의 센서 하우징 영역)와 같은 화면의 물리적 제한을 반영한다는 것입니다.
reactnative 공식 홈페이지 에서 확인해보면 위와 같이 설명해주고 있습니다.
이미지에서 볼 수 있는 것처럼 IOS 에서는 노치/헤더가 존재합니다. 이 부분에 View 가 들어오면 아이콘이나 텍스트가 가려지기 때문에, SafeAreaView 를 사용하여 이러한 현상을 방지할 수 있습니다. Android 에서는 노치가 없어서 현재의 SafeAreaView는 큰 역할이 없습니다.
읽어주셔서 감사합니다! 좋은 하루 되세요!
reference
- https://reactnative.dev/docs/safeareaview