React Native에서 SafeAreaView로 노치 대응하기

문제 상황

회사 앱을 iPhone 11에서 테스트하던 중 상단 헤더가 노치에 가려지는 이슈를 발견했다. 기존에는 iPhone 8 기준으로 개발했기 때문에 Safe Area를 고려하지 않았었다.

SafeAreaView 적용

React Native에서 제공하는 SafeAreaView를 사용하면 간단히 해결된다.

import { SafeAreaView, StyleSheet } from 'react-native';

function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Header />
      <Content />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

iOS에서만 적용하기

Android에서는 SafeAreaView가 제대로 동작하지 않는 경우가 있다. Platform으로 분기 처리했다.

import { Platform, SafeAreaView, View } from 'react-native';

const SafeArea = Platform.OS === 'ios' ? SafeAreaView : View;

function App() {
  return (
    <SafeArea style={styles.container}>
      {/* ... */}
    </SafeArea>
  );
}

react-native-safe-area-context

더 세밀한 제어가 필요한 경우 react-native-safe-area-context 라이브러리를 사용할 수 있다. Safe Area 값을 직접 가져와서 padding으로 적용할 수 있어서 유용했다.

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

function Header() {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ paddingTop: insets.top }}>
      {/* Header Content */}
    </View>
  );
}

결론

노치 대응은 이제 선택이 아닌 필수다. 기본적으로 SafeAreaView를 적용하고, 복잡한 레이아웃에는 react-native-safe-area-context를 사용하는 방식으로 정리했다.