useSafeAreaInsets() Hook 함수를 사용하면 각 모서리에 필요한 공백의 크기를 알아올 수 있습니다. 이 함수의 반환값에는 top 외에도 bottom, left, right가 있습니다. 이제 iOS 화면을 확인해보세요. 다음과 같이 상태 영역의 배경색이 설정됐나요?

▲ 그림 3-15 iOS StatusBar 배경색 설정

3.1.3.3 StatusBar 내용 색상 변경하기

StatusBar의 정보가 초록색 위에 검은색으로 나타나니까 내용이 눈에 잘 들어오지 않습니다. 이번에는 StatusBar의 정보 색상을 설정하는 방법을 알아보겠습니다. 방법은 간단합니다. StatusBar에 barStyle Props를 light-content로 설정하면 됩니다.

<StatusBar backgroundColor="#26a69a" barStyle="light-content" />

barStyle 값은 dark-content(어두운 내용), light-content(밝은 내용), default(시스템 기본 설정)로 설정할 수 있습니다.

StatusBar에 있는 내용이 흰색으로 잘 바뀌었나요? 참고로 이 Props는 iOS, 안드로이드에서 공통으로 설정할 수 있습니다.

▲ 그림 3-16 StatusBar 내용 색상 변경