아이폰의 노치

아이폰엔 M자탈모라 불리는 노치부분이 있다. 그래서 React Native로 앱을 개발할 때 기본 View들만을 사용해서 만들면 상단 부분이 노치에 의해 가려지거나 잘리는 현상이 발생할 수 있다.

SafeAreaView 컴포넌트

이 문제를 해결해주는 컴포넌트가 react-native에서 제공되는데, SafeAreaView 컴포넌트이다. 이 컴포넌트의 목적은 이름 그대로 content들을 안전한 범주안에서만 렌더링 해주는 것이다. iOS 11 버전 이후부터 적용 가능하다.
SafeAreaView는 내재된 content들을 렌더해줄 때 다른 부분(navigation bar, tab bar, toolbar 등)에 의해 가려지지 않는 구역까지 자동으로 padding을 적용시켜준다. 이에 더해서 굴곡진 모서리나 카메라노치 부분도 고려해서 padding을 매겨준다.

SafeAreaView 사용 예시

가장 상위 레벨의 뷰를 'flex: 1' 스타일과 함께 SafeAreaView로 감싸주면 된다. 앱 디자인에 맞춰 background 색상도 지정해주면 된다.
플랫폼에 따라 padding을 자동으로 매겨주는 컴포넌트이기에 SafeAreaView에 직접적으로 설정해주는 padding 스타일은 무시될 수 있다. 그 하위의 컴포넌트에 padding을 적용시키는 방식으로 사용해야 한다. (#22211 참고)

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Page content</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text: {
    fontSize: 25,
    fontWeight: '500',
  }
});

export default App;

Ref: https://reactnative.dev/docs/safeareaview#emulateunlesssupported

상단과 하단의 backgroundColor를 다르게 설정하려면?

https://medium.com/reactbrasil/react-native-set-different-colors-on-top-and-bottom-in-safeareaview-component-f008823483f3 를 참고하면 된다.