title: Getting this error: error: bundling failed: Error: Unable to resolve module `react-native-safe-area-context`
body: <p>I am getting this error after running my App:</p>
  <blockquote>
  <p>error: bundling failed: Error: Unable to resolve module <code>react-native-safe-area-context</code> from <code>node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js</code>: react-native-safe-area-context could not be found within the project.</p>
  </blockquote>
  <p>But the same thing I had done for my old demo. It worked perfectly fine.</p>
  <p>I don't know what I am doing wrong here. Please check my code:</p>
  <p><strong>For installing:</strong></p>
  <ol>
  <li>React Native Navigation &amp; Gesture Handler:</li>
  </ol>
  <p><code>npm install --save react-navigation</code></p>
  <p><code>npm install --save react-native-gesture-handler</code></p>
  <ol start="2">
  <li>React Native Stack:</li>
  </ol>
  <p><code>npm install --save react-navigation-stack</code></p>
  <p><strong>App.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { createAppContainer } from &quot;react-navigation&quot;;
  import { createStackNavigator } from &quot;react-navigation-stack&quot;;
  import FirstOptionsPage from &quot;./FirstOptionsPage&quot;;
  
  const MainNavigator = createStackNavigator(
    {
      FirstOptions: FirstOptionsPage
    },
    {
      defaultNavigationOptions: {
        headerStyle: {
          // backgroundColor: '#28F1A6',
          elevation: 0,
          shadowOpacity: 0
        },
        headerTintColor: &quot;#ca375e&quot;,
        headerTitleStyle: {
          fontWeight: &quot;bold&quot;,
          color: &quot;#161616&quot;
        }
      }
    }
  );
  
  const App = createAppContainer(MainNavigator); // For setting Navigation Stack
  export default App;
  </code></pre>
  <p>And <strong>FirstOptionsPage.js:</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    ScrollView,
    Switch
  } from &quot;react-native&quot;;
  
  export default class FirstOptionsPage extends React.Component {
    static navigationOptions = {
      title: &quot;Preferences&quot;
    };
  
    constructor(props) {
      super(props);
      this.state = {
        switch1Value: false
      };
    }
  
    toggleSwitch1 = value =&gt; {
      this.setState({ switch1Value: value });
      console.log(&quot;Switch 1 is: &quot; + value);
    };
  
    render() {
      const { navigate } = this.props.navigation;
      return (
        &lt;SafeAreaView style={styles.mainContainerStyle}&gt;
          &lt;View style={styles.subContainerStyle}&gt;
            &lt;Text style={styles.subtitleTextStyle}&gt;Someone likes my post&lt;/Text&gt;
            &lt;View style={styles.switchStyle}&gt;
              &lt;Switch
                onValueChange={this.toggleSwitch1}
                value={this.state.switch1Value}
                thumbColor={MAGENTA_COLOR_CODE}
                trackColor={{
                  false: GREY_COLOR_CODE,
                  true: DARK_GREY_COLOR_CODE
                }}
              /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
      );
    }
  }
  </code></pre>
  <p>I am new to React-Native. How can I fix this?</p>