`createStackNavigator()` has been moved to `react-navigation-stack`

I'm using react-navigation in my project, and this error pops up.

I googled this error message and found no result.

(I can't post images yet)

The error message reads:

`createStackNavigator()` has been moved to `react-navigation-stack`. See https://reactnavigation.org/docs/4.x/stack-navigator.html for more details.

The code worked on my friend's machine, somehow

As said by the error, in react-navigation version 4, all navigators have been moved to separate repos so you have to install them separately.

For the StackNavigator you have to install react-navigation-stack using:

npm i react-navigation-stack   //or yarn add react-navigation-stack

after that, go to the file where you define createStackNavigator and change:

import { createStackNavigator } from 'react-navigation'

to:

import { createStackNavigator } from 'react-navigation-stack'

This error may happen because your friend used react-navigation v. 3 but in your package.json it's using a react-navigation version >3. When you did npm install it downloaded the latest version of react-navigation (that updated last week to version 4 with those changes)

The same goes for the other navigators.

SOURCE: https://reactnavigation.org/docs/en/stack-navigator.html

>Install react-navigation-stack NPM package in version 4 and it will solve the issue.

For the StackNavigator you have to install react-navigation-stack using:

npm install react-navigation-stack --save

Check https://reactnavigation.org/docs/en/hello-react-navigation.html for more details

import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);

> Step 1: Install react-navigation-stack by npm i react-navigation-stack > > Step 2: Moved createStackNavigator to newly created package

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
-----

Additionally:

>createBottomTabNavigatoralso moved to react-navigation-tabs from react-navigation

import { createBottomTabNavigator} from "react-navigation-tabs";

1. npm install react-navigation-stack
2. npm install react-navigation
3. expo install react-native-gesture-handler react-native-reanimated
4. Use app container

Example

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const RootStack = createStackNavigator({ /* your routes here */ });
const AppContainer = createAppContainer(RootStack);

// Now AppContainer is the main component for React to render
export default AppContainer;

firstly: install

npm install react-navigation-stack

secondly: import react-navigation-stack

import { createStackNavigator } from 'react-navigation-stack';

you have to follow two steps:

1. yarn add react-navigation-stack OR npm install react-navigation-stack

2. import { createStackNavigator } from "react-navigation-stack";

Run npm install @react-navigation/stack or yarn add @react-navigation/stack in the command prompt and import it like import { createStackNavigator } from '@react-navigation/stack'. I hope this would work fine. For more info, read here.

Change (Mude)

import { createStackNavigator } from 'react-navigation';

To (Para)

import { createStackNavigator } from 'react-navigation-stack';

Now the dependency is change new react-native version 0.61

// old one
import {createStackNavigator} from 'react-navigation'; it's changed

// latest one 
first of all insatll the dependency 

npm install react-navigation-stack

import {createStackNavigator} from 'react-navigation-stack';  //this

export default createStackNavigator(
  {
   .....
  }

use single line command below to install dependencies

npx expo-cli install react-native-gesture-handler react-native-reanimated react-navigation-stack

and change import statement as below

import { createStackNavigator } from 'react-navigation-stack';

I fixed this same error using installing these.

1. npm install react-navigation
2. npm i react-navigation-stack
3. npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

and i fallow this

https://medium.com/better-programming/react-native-navigating-between-the-screens-and-code-structure-for-beginners-6b815ee8f79