Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`

Solution 1:

I think the problem is in the SafeAreaView, for the new react-native version, it has migrated to react-native-community/react-native-safe-area-view. if you want to use SafeAreaView, you should install it first.

the new use is like this:

import SafeAreaView from 'react-native-safe-area-view';

export default function MyAwesomeApp() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>
          Look, I'm safe! Not under a status bar or notch or home indicator or
          anything! Very cool
        </Text>
      </View>
    </SafeAreaView>
  );
}

for installing it you can use the following commands:
yarn add react-native-safe-area-view react-native-safe-area-context.

if you do not use auto-link, you have to also link it. for details about it, see this link

Solution 2:

It is a little funny, I wanted to add navigation so I added

npm install --save react-navigation

for this to work fine I had to add:

expo install react-native-gesture-handler react-native-reanimated

Then I got

Unable to resolve "react-native-safe-area-context" So I added:

expo install react-navigation-stack

expo install react-native-safe-area-view react-native-safe-area-context

then I got

bundling failed: Error: Unable to resolve module @react-native-community/masked-view

So I searched for the masked-view (which currently is not supported by the expo, according to its git document). Then I found out that I can use:

expo install @react-native-community/masked-view which could work or not :)

Therefore, from now on I use following commands at the start of all of my react-native projects, to be able to use navigation properly:

npm install --save react-navigation

expo install react-native-gesture-handler react-native-reanimated react-navigation-stack

expo install react-native-safe-area-view react-native-safe-area-context

expo install @react-native-community/masked-view

Solution 3:

After running these commands:

npm i react-native-safe-area-view react-native-safe-area-context &&
react-native link react-native-safe-area-context

It prompted me an error about masked-view, so I also had to run npm i @react-native-community/masked-view and then my code can now be successfully run on Android physical device.

Thanks to Lenoarod and Gautam Shrivastav for pointing out the right direction.

Solution 4:

installing following two,

npm install --save @react-native-community/masked-view
npm install react-native-safe-area-context

it is work for me