I got this error but no idea where is the problem "Cant find the variable SafeAreaProvider"? - react-native

Question

Got this error when try running npm run android.
Component Exception
Can't find variable SafeAreaProvider in files App.js and navigation/index.js.
I dont even have SafeAreaProvider included or used in the files. It looks strange to me, any ideas ?
App.js
import React from 'react';
import Providers from './navigation';
const App = () => {
return (
<Providers/>);
}
export default App;
navigation/index.js
import React from 'react';
import { AuthProvider } from './AuthProvider';
import Routes from './Routes';
const Providers = () => {
return (
<AuthProvider>
<Routes />
</AuthProvider>
);
}
export default Providers;

Answer 1

Apart from installing npm install #react-navigation/native, you will also need to install its dependencies, which you can do by running npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view.

Answer 2

If we are supposed to implement the navigation in the react-native application we must have to install all the libraries described in the npm documentation.
So be sure that you have installed all the peer-dependencies and followed the documentation properly.
for the stack navigation implementation, we must have to install the following libraries as per the documentation.
#react-navigation/native
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
#react-native-community/masked-view
#react-navigation/stack
for more information check out the official documentation to crash the issue.
https://reactnavigation.org/docs/getting-started