React Native

[React Native] iOS, Android 의 SafeArea

mSubWay 2024. 12. 14. 22:09
SafeAreaProvider 가 있어야 StatusBar 를 사용이 가능하다.
StatusBar를 쓰는 이유는 Android 상태바 영역을 보장하고 이 영역의 색상을 줄 수 있다.
StatusBar 는 Android 상태바의 영역을 보장 받기 위헤 사용하는것이고,
SafeAreaView 를 써야 iOS 의 상태와 하단의 영역을 보장 받을 수 있다.
<SafeAreaProvider>
  <StatusBar backgroundColor="#C4C4C4" /> // Android 를 위해
  <SafeAreaView style={{flex: 1, backgroundColor: '#C4C4C4'}}> // iOS 를 위해
  .
  // 두 개를 다 써줘야 iOS, Android 모두 상태바에 대한 컨트롤이 가능하다. 
  .
  .
  .
  </SafeAreaView>
</SafeAreaProvider>