react-native 에서 SafeAreaView가 있고

react-native-safe-area-context 에서도 있다.

혼란스럽다. 차이가 뭘까..

똑같이 안전한(배너, 하단배너 가려지지않고) 레이아웃을 잡아 준다.

react-native 의 SafeAreaView 는 보다 추가 기능이 적지만 쉽게 사용할 수 있다.

1. React Navigation 을 사용하지 않는다면 react-native의 것을 사용하도록 하자.

2. It just may work better with React Navigation.

3. react-native-safe-context 는 NavigationContainer에 SafeAreaProvider를 씌워 줘야 한다.

   export default function App() {
     return (
       <SafeAreaProvider>
         <NavigationContainer>{/*(...) */}</NavigationContainer>
       </SafeAreaProvider>
     );
   }
   

ESLint 를 활용해서 잘못 import하는 사고를 예방하자.

'no-restricted-imports': [
  'error',
  {
    paths: [
      {
        name: 'react-native',
        importNames: ['SafeAreaView'],
        message: 'Import SafeAreaView from react-navigation instead',
      },
      {
        name: 'react-native-safe-area-context',
        importNames: ['SafeAreaView'],
        message: 'Import SafeAreaView from react-navigation instead',
      },
      {
        name: 'react-native-safe-area-view',
        importNames: ['SafeAreaView'],
        message: 'Import SafeAreaView from react-navigation instead',
      },
    ],
  },
],

참고

https://stackoverflow.com/questions/61887661/what-are-the-differences-between-different-implementations-of-safeareaview

https://reactnavigation.org/docs/handling-safe-area/#hiddencustom-header-or-tab-bar