Invariant Violation: The navigation prop is missing for this navigator

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 />

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>

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

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.

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

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;

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

Simple i did

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

Instead of

export default AppNavigator;

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

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!