React Native에서 iOS Safe Area 대응하기

문제 상황

iPhone X 출시 이후 노치 디바이스 대응이 필요해졌는데, 기존 코드는 paddingTop: 20 같은 하드코딩된 값으로 상태바를 회피하고 있었다. iPhone X에서는 상단 44pt, 하단 34pt의 Safe Area를 고려해야 하는데 이게 제대로 처리되지 않아 UI가 노치에 가려지는 문제가 발생했다.

해결 방법

react-native-safe-area-context 라이브러리를 도입했다.

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

App.js를 SafeAreaProvider로 감싸고:

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

function App() {
  return (
    <SafeAreaProvider>
      <Navigator />
    </SafeAreaProvider>
  );
}

각 화면에서는 SafeAreaView를 사용:

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

function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Header />
      <Content />
    </SafeAreaView>
  );
}

주의사항

• edges prop으로 어느 방향의 Safe Area를 적용할지 선택 가능했다
• 기존 하드코딩된 패딩 값들을 모두 제거해야 했다
• Android에서는 기본적으로 Safe Area가 적용되지만 StatusBar 높이는 별도 처리 필요

전체 화면을 일일이 수정하는 작업이 번거로웠지만, 이후 다양한 디바이스에서 일관된 UI를 유지할 수 있게 되었다.