React Native 하루 기록 - SafeAreaView

• 화면을 그릴때 View영역이 StatusBar 영역과 겹치는 현상이 발생.
• 안드로이드에서만 SafeAreaView가 정상적으로 동작하지 않음.
• OS에 따라서 Padding을 주어 해결.

export default function App() {
  return (
    <SafeAreaView style={{ paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight }}>
      <Header></Header>
    </SafeAreaView>
  );
}

 

react-native-safe-area-context

react-native-safe-area-context를 설치하면 OS구분 없이 정상 동작하는걸 확인가능 

설치하기 

yarn add react-native-safe-area-context

사용하기 

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{flex : 1}}>
        <Header></Header>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}