SafeAreaView 컴포넌트는 이 그림과 같이 상단과 하단에 여백을 설정해 안전한 영역에만 UI 콘텐츠가 보이도록 제한하는데요. 아쉽게도 이 컴포넌트는 한쪽 여백만 없애도록 설정할 수 없습니다.

참고로 이 화면을 여러분의 시뮬레이터에서 직접 확인하고 싶다면 App 컴포넌트를 다음과 같이 수정하면 됩니다. 확인한 후에는 다시 원상 복구하세요.

App.js - App 컴포넌트

function App() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, backgroundColor: 'blue'}} />
    </SafeAreaView>
  );
}

3.1.3.1 react-native-safe-area-context 서드 파티 라이브러리 사용하기

특정 부분의 여백만 비활성화하고 싶다면 react-native-safe-area-context라는 서드 파티 라이브러리를 사용해야 합니다. 서드 파티 라이브러리(third party library)란 리액트 네이티브에서 공식적으로 만든 게 아니라 커뮤니티에서 오픈 소스로 공개한 라이브러리를 의미합니다.

프로젝트 경로에서 터미널 창을 열어 다음 명령어를 입력하세요.

$ yarn add react-native-safe-area-context