Obteniendo este error: error: agrupación fallida: Error: no se puede resolver el módulo `react-native-safe-area-context`

Recibo este error después de ejecutar mi aplicación:

error: error de agrupación: Error: no se puede resolver el módulo react-native-safe-area-contextdesde node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js: no se pudo encontrar el contexto react-native-safe-area-context dentro del proyecto.

Pero lo mismo que hice para mi antigua demostración. Funcionó perfectamente bien.

No sé qué estoy haciendo mal aquí. Por favor revise mi código:

Para instalar:

1. React Native Navigation & Gesture Handler:

npm install --save react-navigation

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

2. Reaccionar pila nativa:

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;

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

Soy nuevo en React-Native. Por favor, ayúdame a arreglar esto.

Creo que el problema está en SafeAreaView, para la nueva versión nativa de reacción, a la que ha migrado react-native-community/react-native-safe-area-view. si quieres usarlo SafeAreaView, primero debes instalarlo.

El nuevo uso es así:

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

para la instalación que se pueden utilizar los siguientes comandos:
yarn add react-native-safe-area-view react-native-safe-area-context.

Si no utiliza el enlace automático, también debe vincularlo. para detalles al respecto, vea este enlace

Es un poco divertido, quería agregar navegación, así que agregué

npm install --save react-navigation

para que esto funcione bien tuve que agregar:

expo install react-native-gesto-handler react-native-reanimated

Entonces tengo

No se puede resolver "react-native-safe-area-context" Entonces agregué:

expo install react-navigation-stack

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

entonces tengo

paquete fallido: Error: no se puede resolver el módulo @react-native-community/masked-view

Así que busqué la vista enmascarada (que actualmente no es compatible con la exposición, de acuerdo con su documento git). Luego descubrí que uso gato:

expo install @ react-native-community / masked-view que podría funcionar o no :)

Por lo tanto, a partir de ahora uso los siguientes comandos al comienzo de todos mis proyectos de reacción nativa, para poder usar la navegación correctamente:

npm install --save react-navigation

expo install react-native-gesto-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

Después de ejecutar estos comandos:

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

Me provocó un error sobre la vista enmascarada, así que también tuve que ejecutar npm i @react-native-community/masked-viewy luego mi código ahora se puede ejecutar con éxito en el dispositivo físico Android.

Gracias a Lenoarod y Gautam Shrivastav por señalar la dirección correcta.

Creo que echas de menos la dependencia del enlace con tu proyecto, así que puedes probar lo siguiente:

Con React Native 0.6 o superior:

En iOS, asegúrese de tener Cocoapods instalado y ejecutado:

cd ios
pod install
cd ..

Con React native 0.59 y menor prueba:

react-native link react-native-safe-area-context

copiar todo y pegar en la terminal

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

trabaja para mi

Ejecute lo siguiente:

expo install react-native-safe-area-context

expo seleccionará la versión correcta y luego la instalará.

use el comando npm i react-navigation-stack para resolver este error

Iniciar el Metro Bundler directamente desde el directorio del proyecto funciona para mí. ¿Alguien puede decirme si también les funciona?

# Limpiar caché rm -rf $ TMPDIR / react- ; rm -rf $ TMPDIR / haste- ; rm -rf $ TMPDIR / metro- ; vigilante watch-del-all

* # Iniciar Metro Bundler directamente reaccionar-inicio nativo

* # Ahora se ejecuta react-native run-androido react-native run-iosen otra pestaña