[React Native] requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

1. 문제 발생

React Native cli / Typescript 환경에서 SafeAreaProvider 컴포넌트를 설치하고, import했더니 이 에러를 만나게 되었다.

SafeAreaProvider: 리액트 네이티브가 제공하는 컴포넌트 중에 하나로 기기의 안정영역(Safe Area)을 고려하려 UI를 렌더링 할 수 있게 도와주는 컴포넌트이다.

Safe Area: 기기의 화면에서 실제 컨텐츠를 렌더링 할 수 있는 영역

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

function App(): JSX.Element {
  return (
    <SafeAreaProvider>
      ...
    </SafeAreaProvider>
  );
}

error: 

Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

 

2. 원인

SafeAreaProvider 패키지를 설치하고, ios종속성 설치를 해주어야 했다.

ios애플리케이션은 'node_modules' 디렉토리에 있는 패키지만으로는 부족할 수 있기 때문에 ios애플리케이션 개발에 필요한 패키지 중 일부는 CocoaPods를 통해 설치가 필요하다.

 

3. 문제 해결

1. SafeAreaProvider 패키지 설치

npm install react-native-safe-area-context
# or
yarn add react-native-safe-area-context

2. React Native iOS 프로젝트에 새로 설치된 SafeAreaProvider 라이브러리를 연결

npx pod-install ios

npx pod - install ios: React Native 프로젝트를 개발할 때 IOS 애플리케이션의 종속성을 설치하는 명령어.