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

Question

I am getting this error after running my App:

error: bundling failed: Error: Unable to resolve module react-native-safe-area-context from node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: react-native-safe-area-context could not be found within the project.

But the same thing I had done for my old demo. It worked perfectly fine.

I don't know what I am doing wrong here. Please check my code:

For installing:

1. React Native Navigation & Gesture Handler:

npm install --save react-navigation

npm install --save react-native-gesture-handler

2. React Native Stack:

npm install --save react-navigation-stack

App.js

import { createAppContainer } from "react-navigation"; import { createStackNavigator } from "react-navigation-stack"; import FirstOptionsPage from "./FirstOptionsPage";  const MainNavigator = createStackNavigator(   {     FirstOptions: FirstOptionsPage   },   {     defaultNavigationOptions: {       headerStyle: {         // backgroundColor: '#28F1A6',         elevation: 0,         shadowOpacity: 0       },       headerTintColor: "#ca375e",       headerTitleStyle: {         fontWeight: "bold",         color: "#161616"       }     }   } );  const App = createAppContainer(MainNavigator); // For setting Navigation Stack export default App; 

And FirstOptionsPage.js:

import React from "react"; import {   SafeAreaView,   StyleSheet,   View,   Text,   ScrollView,   Switch } from "react-native";  export default class FirstOptionsPage extends React.Component {   static navigationOptions = {     title: "Preferences"   };    constructor(props) {     super(props);     this.state = {       switch1Value: false     };   }    toggleSwitch1 = value => {     this.setState({ switch1Value: value });     console.log("Switch 1 is: " + value);   };    render() {     const { navigate } = this.props.navigation;     return (       <SafeAreaView style={styles.mainContainerStyle}>         <View style={styles.subContainerStyle}>           <Text style={styles.subtitleTextStyle}>Someone likes my post</Text>           <View style={styles.switchStyle}>             <Switch               onValueChange={this.toggleSwitch1}               value={this.state.switch1Value}               thumbColor={MAGENTA_COLOR_CODE}               trackColor={{                 false: GREY_COLOR_CODE,                 true: DARK_GREY_COLOR_CODE               }}             />           </View>         </View>       </SafeAreaView>     );   } } 

I am new to React-Native. How can I fix this?

Answer 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