React Native Unable to resolve module - react-native

Question

error: Error: Unable to resolve module react-native-safe-area-context from C:\USER\App\NavigationApp\NavigationApp\node_modules\#react-navigation\stack\src\views\Stack\StackView.tsx: react-native-safe-area-context could not be found within the project.
I didn't wrote anything and just wanted to learn React Navigation. I installed #react-navigation/native and thought now I could start. But instead of JSX I get this error:
What to do?
My code:
import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
const App = () => {
return (
<View>
<Text>Hello</Text>
</View>
);
};
const styles = StyleSheet.create({
});
export default App;

Answer 1

react-navigation package needs couple of other packages to work and react-native-safe-area-context is part of them, you only need to install it
$ npm i --save react-native-safe-area-context
Read more here (https://reactnavigation.org/docs/getting-started/)
Happy coding

Answer 2

Did you installed dependencies of react navigation? react-native-safe-area-context is one of the dependency. There are other dependencies that you should install for things to start work. To do so run this command if you are using expo managed workflow.
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context #react-native-community/masked-view
or if you are using bare work flow(react native CLI) run this
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
Also you should read the offical installation doc