[React-Native] Stack Header와 SafeAreaView의 관계

Stack Navigation 으로 구성된 스크린중에 iOS 모델 기준, 화면의 뷰가 노치로 인해 가려지는 부분을 해결하기 위해 컴포넌트를 구현하는 중에 화면의 일부가 자동적으로 padding 스타일이 적용되어 이슈가 발생한 경험이 있습니다.

이 이슈는 Navigation header 가 존재하여 SafeAreaView 와 같은 노치 가림 방지 효과가 자동적으로 적용이 됐는데, 내부 View에서도 SafeAreaView 컴포넌트를 사용해서 노치 가림 방지 효과가 자동적으로 적용이 되어 이중 노치 가림 방지 효과 로 인한 스타일링이 적용된 이슈였습니다.

그래서 SafeAreaView 를 View 로 바꿔서 구현하니 이슈가 해결됐습니다.

따라서 아래와 같은 결론을 도출 해낼 수 있었습니다.

• header 존재 = SafeAreaView 자동 적용(노치 겹침 x) 효과
  -> SafeAreaView 필요 없음
• header 존재 x = SafeAreaView 자동 적용(노치 겹침 x) 효과 x
  -> SafeAreaView 필요함