createStackNavigator is not a function

Question

I am building my first practice app and was trying to put together navigation between screens using the createAppNavigator.

However, as soon as I try to use createAppNavigator I get the following error .

.

Relevant code:

App.js

import React from 'react';
import { Home } from './app/views/Home.js';
import { Contact } from './app/views/Contact.js';
import { createStackNavigator } from 'react-navigation';

const MyRoutes = createStackNavigator({
    HomeRT: { screen: Home },
    ContactRT: { screen: Contact },
  },
  { 
    initialRouteName: 'HomeRT' 
  }
);

export default class App extends React.Component {
  render() {
    return (
      <MyRoutes />
    );
  }
}

I am really puzzled as to what I am doing wrong. One idea is that perhaps react-navigation is not installed correctly, but beyond using npm install --save react-navigation, I don't know what else I could need to do.

Answer 1

Thereact-navigation team recently extracted the tab and stack navigators to external repos. You need to do this instead:

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

You need to install it first, obviously:

npm i react-navigation-stack @react-native-community/masked-view

You will also need to wrap this navigator inside

createAppContainer()

Answer 2

I had the same issue then I ran this in the terminal

npm install --save @react-native-community/masked-view

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