edges Props에는 SafeArea를 적용할 모서리를 배열 형태로 전달합니다. 이와 같이 배열에 bottom 값을 넣어 설정하면 SafeArea를 하단 부분에만 적용한다는 의미입니다.

edges 배열에는 bottom 외에 top, left, right 값들을 넣을 수 있습니다. left와 right의 경우에는 디바이스를 가로 모드로 사용할 때 필요한 설정입니다.

이렇게 설정하고 화면을 보면 iOS에서는 다음과 같이 StatusBar와 DateHead가 겹쳐져서 나타날 것입니다.

▲ 그림 3-14 StatusBar와 겹쳐진 DateHead

겹쳐진 영역을 수정하려면 StatusBar 높이와 일치하는, 빈 View를 보여주면 됩니다. StatusBar의 높이는 모바일 디바이스별로 다릅니다. iPhoneX는 44이고, 하위 iPhone 디바이스는 20입니다. 디바이스별로 StatusBar의 크기를 설정하는 코드를 직접 구현하려면 복잡할 텐데요. 다행히 이 기능도 react-native-safe-area-context 라이브러리에 구현되어 있습니다.