React Native에서 Safe Area 처리 패턴 정리

문제 상황

iPhone 14 Pro 시리즈가 출시되면서 Dynamic Island 영역 대응 이슈가 발생했다. 기존에 사용하던 React Native의 기본 SafeAreaView는 iOS에서만 동작하고, Android의 노치나 펀치홀 대응이 제대로 되지 않았다.

특히 Modal이나 Overlay 컴포넌트에서 SafeAreaView를 중첩 사용할 때 여백이 이중으로 적용되는 문제가 있었다.

해결 방법

react-native-safe-area-context 라이브러리로 전환했다. 이 라이브러리는 Android/iOS 모두에서 일관되게 동작하며, Hook 기반 API를 제공한다.

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

function Screen() {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {/* content */}
    </View>
  );
}

// App.js
function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        {/* routes */}
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

적용 패턴

1. 전체 화면: SafeAreaView 대신 useSafeAreaInsets로 필요한 부분만 padding 적용
2. 스크롤 화면: contentContainerStyle에 insets 적용
3. 고정 헤더/푸터: paddingTop/paddingBottom으로 개별 적용
4. Modal: 별도의 insets 계산 없이 자동 처리됨

React Navigation 6.x와 함께 사용할 때는 헤더 높이 계산에 top inset이 자동으로 포함되므로 중복 적용에 주의해야 한다.

결과

iOS/Android에서 일관된 safe area 처리가 가능해졌고, Dynamic Island를 포함한 최신 기기에서도 정상 동작을 확인했다.