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

Question

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

Answer 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

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