Diesen Fehler erhalten: Fehler: Bündelung fehlgeschlagen: Fehler: Das Modul "React-Native-Safe-Area-Context" kann nicht aufgelöst werden

Ich erhalte diesen Fehler, nachdem ich meine App ausgeführt habe:

fehler: Bündelung fehlgeschlagen: Fehler: Modul react-native-safe-area-context kann nicht aus node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js aufgelöst werden: React-Native-Safe-Area-Kontext konnte im Projekt nicht gefunden werden.

Aber das gleiche, was ich für meine alte Demo getan hatte. Es hat einwandfrei funktioniert.

Ich weiß nicht, was ich hier falsch mache. Bitte überprüfen Sie meinen Code:

Zur Installation :

1. Reagieren Sie auf Native Navigation & Gesture Handler:

npm install --save react-navigation

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

2. Native Stack reagieren:

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;

Und 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>
    );
  }
}

Ich bin neu bei React-Native. Wie kann ich das beheben?