status bar

iOS와 Android의 status bar 설정이 다르다..
다크모드의 경우 따로 막아줘야 한다

iOS

SafeAreaView에 backgroundColor를 주면 StatusBar까지 색이 들어간다
-> 상태바가 분리된 영역이 아니라 root 영역에 아이콘만 들어간 느낌
-> 상태바에 색을 주려면 전체 영역에 색을 주고 아래 영역에 대해 따로 색을 입혀야할듯..

전체 영역에 색을 주는 방법에 대해

전체 영역에 색을 주고 위에 덮어 쓰는 것이 외의 방법을 찾아보니
ios의 StatusBar height는 20이라고 한다

또 보니까 이건 16:9 비율의 구형 모델 아이폰에만 해당하고
notch가 있는 신형은 노치 크기만큼을 더해줘야 하는데
노치 크기를 구하는 것은 다 3rd-party 라이브러리인 것 같다
아무래도 네이티브 코드를 건들여야해서 그런 것일까..

import {getStatusBarHeight} from 'react-native-status-bar-height';

const StatusBarHeight =
  Platform.OS === 'ios' ? getStatusBarHeight(true) : 0;

<SafeAreaView
  style={{
         flex: 1,
         backgroundColor: '#333444',
        }}
>
	<StatusBar backgroundColor="#333444" barStyle={'light-content'} />
</SafeAreaView>

import {getStatusBarHeight} from 'react-native-status-bar-height';

const StatusBarHeight =
  Platform.OS === 'ios' ? getStatusBarHeight(true) : 0;

<View
  style={{
         height: StatusBarHeight,
         backgroundColor: '#333444',
        }}
>
	<StatusBar backgroundColor="#333444" barStyle={'light-content'} />
</View>

이런 식으로 StatusBar의 backgroundColor 속성으로 Android 대응을 하고
iOS의 StatusBar 뒤쪽으로 StatusBar height만큼 색이있는 Veiw를 주는 방식으로..

Android

StatusBar에 backgroundColor 속성을 주면 바로 적용된다
-> 전체 영역 위를 상태 바가 덮고 있는듯 (position: absolute 같은 느낌)