[React Native] 3. iOS에서 노치와 홈 인디케이터 고려하여 UI 배치하기

이번에는 이어서 react native로 iOS 개발할 때 고려해야할 요소에 대해서 다뤄보겠다.

android와는 다르게, ios는 TOP 부분에 있는 노치 영역을 피해서 UI 요소를 배치해야 한다. 고려하지 않으면, UI와 노치가 겹치게 되므로, 이는 반드시 처리해야 하는 요소이다.

BOTTOM 부분에도 홈 버튼이 없는 대신 얇은 하얀 선이 있는데, 이것 역시 처리해주지 않으면 UI와 겹치게 되므로 고려해주어야 한다.

이를 고려하여 처리하는 방법에는 2가지 방법이 있다.

SafeAreaView

SafeAreaView는 iOS에서 노치(Notch), 상태 표시줄(Status Bar), 홈 인디케이터(Home Indicator)와 같은 인터페이스 요소를 피해서 콘텐츠를 배치하는 데 사용하는 뷰이다. 즉, 화면의 안전한 영역(Safe Area)에 맞게 콘텐츠를 배치하여 UI가 잘리지 않도록 해준다.

사용법도 굉장히 간단하다.

npm install react-native-safe-area-context

설치해준 후, safeAreaView를 import하여 컴포넌트의 최상단에 배치된 view 대신 safeAreaView를 사용하면 된다.

하지만, 이 방법은 Bottom tab navigator를 함께 사용하는 경우나, 혹은 더 복잡한 컴포넌트 배치 로직을 사용하는 경우에는 오히려 잘 적용되지 않는다.

공식 문서에서도, safeAreaView를 사용하는 방식 보다는, 밑의 방식을 권장하고 있다.

useSafeAreaInsets

useSafeAreaInsets는 react-native-safe-area-context에서 제공하는 훅으로, top, bottom 등의 노치와 홈 인디케이터를 고려한 insets 값을 가져올 수 있다.

이 insets를 사용하기 위해서는 앱의 최상단 컴포넌트를 SafeAreaProvider로 감싸준 후, 사용해야 한다.

그래서 보통은 App.tsx에서 navigator를 호출하는 컴포넌트를 Provider로 감싸준다.

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

const App = () => {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
      }}>
      <Text>Safe Area Inset Example</Text>
    </View>
  );
};

이런식으로, View의 padding을 inset를 이용하여 커스터마이징할 수 있다.

이렇게 App에 패딩을 처리할 수도 있지만, 필요한 화면 컴포넌트에 맞춰 패딩을 조절하는게 더 적절한 방법이다.

나는 프로젝트에서 bottom tab navigator를 이용하였는데, 이때 insets.bottom의 크기와 tab height를 모두 고려하여 컴포넌트의 패딩을 주는 방식을 이용하였다.

정리

네비게이터 로직이 복잡할수록, 예상처럼 패딩 처리가 안되는 경우가 있을 수 있는데, 직접 해보면서 패딩을 조절해보며 최적의 패딩 크기를 찾는게 좋을 듯 하다.