React Native / SafeAreaView (iOS, Android 헤더 제외)

React Native 사용시

핸드폰으로 확인 하는 경우 헤더(Header)부분이 배터리, 시계 영역으로 잡혀있어서 보이지 않는 경우가 있음

이에 marginTop 을 주는것이 아니라 React Native 내에 내장된 컴포넌트를 이용하여 사용 가능

1. import 부분에 SafeAreaView 추가

import { StyleSheet, Text, SafeAreaView } from 'react-native';

2. SafeAreaView 적용

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>헤더내용</Text>
    </SafeAreaView>
  );
}

SafeAreaView를 최상위 컴포넌트로 warpping하여 사용한다.

차곡차곡, 뚜잇