[React Native] SafeAreaView

SafeAreaView

들어가며

• 리액트 네이티브(React Native)의 SafeAreaView 컴포넌트에 대해 간단하게 정리해 본다.

 

SafeAreaView

개념

• React Native에서 화면 상단의 상태바나 노치와 같은 UI 요소로부터 콘텐츠가 겹치지 않도록 자동으로 안전한 영역을 설정해 주는 컴포넌트
• @SafeAreaView@ 컴포넌트를 사용하면 다양한 기기에서 콘텐츠가 적절하게 배치되고, 화면 가장자리나 상단의 중요한 UI 요소에 가려지지 않게 된다.

Safe Area (ⓒnaukri.com)

 

주요 기능

• 노치, 상태 바, 하단의 홈 바 등과 같은 화면 요소가 있는 디바이스에서 콘텐츠가 겹치지 않도록 자동으로 여백을 추가해 준다.
• 다양한 화면 크기와 해상도에 따라 안전 영역을 자동으로 인식하고, 이에 맞게 여백을 적용해 준다.

 

사용 방법

• React Native에서 기본으로 내장된 컴포넌트이므로, 별도의 라이브러리 설치 없이 바로 사용할 수 있다.

import { SafeAreaView } from 'react-native';

 

• 전체 화면을 감싸는 형태로 사용한다.

<SafeAreaView style={styles.container}>
  <Text>안전 영역 안에 있는 내용</Text>
</SafeAreaView>

 

• 스타일을 자유롭게 추가할 수 있으며, 화면 크기와 여백을 적절히 조절할 수 있다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20, // 추가적인 여백 지정 가능
  },
});

 

안드로이드에서 적용하기

• 안드로이드에서는 @react-native@ 패키지의 @SafeAreaView@ 적용이 안된다.
• 따라서 다음과 같이 @react-native-safe-area-context@ 라이브러리를 설치하여 적용해준다.

$ npm install react-native-safe-area-context

 

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

 

• 버전 관련 이슈로, @react-native-safe-area-context@ 라이브러리를 인식할 수 없는 문제가 발생할 경우, 다음과 같이 호환되는 버전의 라이브러리를 설치해준다.

$ npm install react-native-safe-area-context@3.4.1

 

참고 사이트

SafeAreaView · React Native

react-native-safe-area-context