React Native, React-Navigation

Question

Can you help me on this problem:

Failed to compile /home/coding/Документы/React-native/instagram/node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js Module not found: Can't resolve 'react-native-screens' in '/home/coding/Документы/React-native/instagram/node_modules/@react-navigation/stack/lib/module/views/Stack'

This is source code:

import { StatusBar } from "expo-status-bar";
import React from "react";

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import LandingScreen from "./components/auth/Landing";

const Stack = createStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Landing">
        <Stack.Screen
          name="Landing"
          component={LandingScreen}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

Based official docs of react-navigation you should install other related packages with the below command:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

If you are using expo install these:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view