React Native에서 SafeAreaView 동적 처리하기

문제 상황

회사 앱의 React Native 버전을 0.61로 업그레이드하면서 SafeAreaView를 전체적으로 적용했다. iOS에서는 노치 영역을 잘 피해서 렌더링되지만, Android에서 상단에 불필요한 여백이 생기는 문제가 발생했다.

원인 분석

SafeAreaView는 iOS 11+의 Safe Area를 기준으로 동작한다. Android에서는 StatusBar 영역을 Safe Area로 인식하지 않기 때문에, iOS처럼 자동으로 여백을 주지 않는다. 하지만 우리 코드에서는 padding을 추가로 주고 있어서 이중으로 여백이 생겼다.

해결 방법

Platform별로 분기 처리하고, Android에서는 StatusBar height를 직접 계산해서 적용했다.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  },
});

const Screen = () => {
  return (
    <SafeAreaView style={styles.container}>
      {/* 컨텐츠 */}
    </SafeAreaView>
  );
};

더 깔끔한 방법으로는 react-native-safe-area-context 라이브러리를 사용하는 것이다. 이 라이브러리는 Android/iOS 모두에서 일관된 Safe Area 처리를 제공한다.

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

const Screen = () => {
  const insets = useSafeAreaInsets();
  
  return (
    <View style={{ paddingTop: insets.top }}>
      {/* 컨텐츠 */}
    </View>
  );
};

결론

기본 SafeAreaView보다는 react-native-safe-area-context를 사용하는 것이 크로스 플랫폼 대응에 유리하다. 프로젝트에 전체 적용했고, QA 단계에서 디바이스별 테스트를 거쳐 배포 완료했다.