`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

Solution 1:

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

Solution 2:

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

Solution 3:

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";

Solution 4:

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;

Solution 5:

firstly: install

npm install react-navigation-stack

secondly: import react-navigation-stack

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