React-Navigation과 React-native-safe-area-context의 중복 여백 문제

React Navigation을 사용하게 될 경우, 다양한 의존 라이브러리를 설치해야 하는데, react-native-safe-area-context 라는 라이브러리도 이에 해당한다. 

 

react-native-safe-area-context를 설치한 김에 해당 라이브러리를 확인해 보았을 때, iOS 기기의 safe area 영역을 효율적으로 관리할 수 있다는 내용을 확인하고, 어차피 설치해야 하는 거 사용하게 되었는데, navigation의 헤더를 사용할 때 iOS기기에서만 Header와 화면 사이에 여백이 생기게 된다.

 

이를 해결하려면 Header를 사용하는 스크린에서는 SafeAreaView를 사용하지 않고 View로 대체해야 한다.