Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`
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
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
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.