Invariant Violation: The navigation prop is missing for this navigator

I am receiving this message when I tried starting my react native app. Usually this kind of format works on other multi screen navigation yet somehow does not work in this case.

Here is the error:

Invariant Violation: The navigation prop is missing for this navigator. In 
react-navigation 3 you must set up your app container directly. More info: 
https://reactnavigation.org/docs/en/app-containers.html

Here is my app format:

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator(
  {
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  },
  {
    initialRouteName: 'Home'
  }

);

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

React Navigation 3.0 has a number of breaking changes including an explicit app container required for the root navigator.

> In the past, any navigator could act as the navigation container at the top-level of your app because they were all wrapped in “navigation containers”. The navigation container, now known as an app container, is a higher-order-component that maintains the navigation state of your app and handles interacting with the outside world to turn linking events into navigation actions and so on. > > In v2 and earlier, the containers in React Navigation are > automatically provided by the create*Navigator functions. As of v3, > you are required to use the container directly. In v3 we also renamed > createNavigationContainer to createAppContainer.

Also please note that if you are now using v4, navigators have been moved to a separate repo. You'll now need to install and import from 'react-navigation-stack'. For example import { createStackNavigator } from 'react-navigation-stack' The solution below is for v3.

import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
const MainNavigator = createStackNavigator({...});
const App = createAppContainer(MainNavigator);

A more comprehensive code example:

import {
      createStackNavigator,
      createAppContainer
    } from 'react-navigation';
import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator({
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  });

const App = createAppContainer(RootStack);
    
export default App;

@Tom Dickson something like this:

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';

const NavStack = createStackNavigator({
    ScreenOne: { 
        screen: ScreenOne,
    },
    ScreenTwo: { 
        screen: ScreenTwo,
    },
});

const App = createAppContainer(NavStack);

export default App;

Then reference it with

<App />

Create a new file ScreenContainer.js (you can choose the name). Then in the ScreenContainer file add:

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import MainScreen from './MainScreen'; 
import AboutScreen from './AboutScreen';

const NavigationStack = createStackNavigator({
    Main: { 
        screen: MainScreen,
    },
    About: { 
        screen: AboutScreen,
    },
});

const Container = createAppContainer(NavigationStack);

export default Container; 

Then at your App.js file:

import Container from './ScreenContainer';

class App extends Component {
  render() {
    return (
      <Container />
    );
  }
}

I wasted my 2.5 hours to got this solution after many google searches...Hope this will work.

just import this two:

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

and make a little change to your code like this:

create const above the class

const AppNavigator = createAppContainer(RootStack);

and finally call that const in the class instead of <RootStack/>

<AppNavigator />

Thankx!

Here's another way

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

import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator(
  {
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  },
  {
    initialRouteName: 'Home'
  }

);

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

export default createAppContainer(RootStack);

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

Simple i did

const App = createAppContainer(AppNavigator);
export default App;

Instead of

export default AppNavigator;

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './home';
import Details from './details';

const Root = createStackNavigator({

    home: { 

        screen: Home,
    },

    details: { 

        screen: Details,
    },

});

const container = createAppContainer(Root);
export default container;   

in your App.js file reference it with </container>

I had the code at the bottom

export default class App extends React.Component {
  render() {
    return (
      <View >
        <SimpleApp style={{ width: Dimensions.get("window").width }} />
      </View>
    );
  }
}

I simply replaced it with and it worked like a charm. Definitely, it's because updates in react-navigation library:

const App = createAppContainer(SimpleApp);
export default App;

Also, I included createAppContainer library into react-navigation at the top as well.

This one is to create a bottom navigator with two tabs:

import {createBottomTabNavigator, createAppContainer} from 'react-navigation';

export class Home extends Component{
   //...
}

export class Settings extends Component{
   //...
}     

const navig = createBottomTabNavigator({
  Home: Home,
  Settings: Settings
});

const App = createAppContainer(navig);

export default App;

I been struggling from past few days .Well might be you too been struggling to solve if and if you have deleted the react-navigation from package.json and installed using npm please check your backup project and see the navigation version and try to add the same and remove node-modules and do npm install. Hope its works.

Good Luck breaking your head with React-Native :-)