not able to Import SafeAreaProvider of react native - react-native

Question

I am doing a watch along project development with the help of https://www.youtube.com/watch?v=bvn_HYpix6s&t=4191s
Around at 1:07:00, we are adding react native imports. we are referring https://reactnativeelements.com/docs.
I have added react-native-safe-area-context npm package.
and did an import as
import { SafeAreaProvider } from 'react-native-safe-area-context';
however doing so, I am getting an error as
Invariant Violation: Tried to register two views with the same name
RNCSafeAreaProvider at
node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in
registerError at
node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in
console.error at
node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in
error at
node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in
reportException at
node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19
in handleException at
node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in
handleError at
node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in
ErrorUtils.setGlobalHandler$argument_0 at
node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at
node_modules\regenerator-runtime\runtime.js:294:29 in invoke at
node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch at
node_modules\regenerator-runtime\runtime.js:155:27 in invoke at
node_modules\regenerator-runtime\runtime.js:165:18 in
PromiseImpl.resolve.then$argument_0 at
node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13
in tryCallOne at
node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0 at
node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in
_callTimer at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in
_callImmediatesPass
As per suggestion of few forums I have reinstalled the package but same error.
below is the code snippet I wanted to run.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import HomeScreen from './screens/HomeScreen';
import {store} from './store'
import { SafeAreaProvider } from 'react-native-safe-area-context';
export default function App() {
return (
<Provider store={store}>
<SafeAreaProvider >
<HomeScreen/>
</SafeAreaProvider >
</Provider>
);
}
below is the screenshot of mobile emulator.
Regards,
Ashish

Answer 1

it seems react-native-safe-area-context is duplicated.
if you installed #react-native-community/masked-view, it will also install react-native-safe-area-context as a dependency.
If the 2 version is different, you would get such a issue.
Please uninstall react-native-safe-area-context.
Then it will work fine.

Answer 2

As said here, Add the following line on the scripts part, on your package.json:
"postinstall":"rm -rf node_modules/expo/node_modules/react-native-safe-area-context"
If, you're not using expo:
"postinstall":"rm -rf node_modules/react-native-safe-area-context"