How to fix “RNCSafeAreaProvider” was not found in the UIManager Error

RNCSafeAreaProvider” was not found in the UIManager Error Screenshot

This error might come when you upgrade the version of `react-navigation` library, it’s dependencies and linked modules. As mentioned in the react-navigation doc , it is made up of some more core utilities.

The issue can be there because of,

1.) Some needed libraries are not installed.
2.) The Library versions of these connected modules are not compatible with each other (probably when manually upgrading libraries )
3.) A clean rebuild is required

STEP 01 — Install Utility Libraries

As mentioned in the React Navigation documentation try installing the rest of the needed libraries.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

STEP 02 — Fixing incompatible versions

You shouldn’t be worrying about this step if you didn’t have those utility libraries installed in the first place. Move forward to step 03 :)

Now if the React-Native app was working before updating the versions and not anymore, that could be because of incompatible react-navigation and other utility library versions. Easiest way to fix this is…

npm remove react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

then…

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

This should fix any incompatible version issues introduced during the upgrading process.

STEP 03 — Build App Again

Since I tried this fix in an Android build environment…

1.) Uninstall the app.
2.) cd android android folder and type ./gradlew clean
3.) npx react-native run-android to build the app again.

The “RNCSafeAreaProvider” was not found in the UIManager Error should be gone by now ;)

by Heshan Wickramaratne