[ReactNative] Component | 01. SafeAreaView - 상태표시줄에 겹치지 않게 하기

모바일 환경에는 기기에서 우선적으로 사용하는 공간들이 있습니다. 화면 상단의 상태 표시줄(Status bar)이나 노치(Notch), 또는 화면 하단의 조작 UI 등을 예로 들 수 있습니다.

앱 디자인 단계에서 해당 영역들의 크기를 고려하여 미리 공간을 확보할 수도 있지만, 기기마다 이런 종류의 공간의 사용 여부나 크기가 제각각이라 모두 고려하기에는 힘든 부분이 있습니다.

때문에 ReactNative에서는 이런 공간에서부터 방해 받지 않는 안전한 공간(Safe area)을 확보하여 그 안에서 화면을 구성할 수 있도록 react-native-safe-area-context 패키지를 지원하고 있습니다.

npm install react-native-safe-area-context

// 혹은 expo 버전
npx expo install react-native-safe-area-context

SafeAreaView

패키지에 포함된 컴포넌트인 SafeAreaView를 사용하면, 안전한 공간을 자동으로 확보해주는 View를 사용할 수 있습니다. 아래 그림의 [unsafe area] 부분이 SafeAreaView에 포함됩니다.

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

function SomeComponent() {
  return (
    <SafeAreaView>
      <View />
    </SafeAreaView>
  );
}

safe area의 크기가 바뀌어도 unsafe area 크기는 유지됨

확보할 공간을 선택할 때는 edges 속성값을 사용하면 됩니다. ["top", "right", "bottom", "left"] 값들을 가질 수 있으며, 리스트 형태를 사용해 둘 이상의 값을 동시에 적용할 수도 있습니다. edges={['top']}의 경우, 요소의 윗 부분에 자동으로 패딩을 추가해줍니다.

<SafeAreaView edges={['top']}>

useSafeAreaInsets

useSafeAreaInsets()는 안전하지 않은 공간의 크기 자체를 사용하는 hook입니다. SafeAreaView를 사용할 때와 다른 점은, 사용자가 크기를 직접 받아 그 만큼의 길이를 View에 더해준다는 것입니다.

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

function HookComponent() {
  const insets = useSafeAreaInsets();

  return <View style={{ paddingTop: insets.top }} />;
}

아래는 insets.top을 사용한 예시 입니다. 고정된 높이의 View에 insets.top 만큼의 패딩을 더하면, 상태바의 높이 만큼의 공간이 생기고 그 만큼 내부 요소들이 밑으로 내려갑니다.

https://appandflow.github.io/react-native-safe-area-context/

Getting started | React Native Safe Area Context

 

https://docs.expo.dev/versions/latest/sdk/safe-area-context/

react-native-safe-area-context