Invariant Violation: The navigation prop is missing for this navigator
Build error after upgrading to React Navigation 3
There are a lot of breaking changes with React Navigation 3. Here is some quick documentation from React Navigation about it.
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.
In order to upgrade, you want to upgrade your navigation code to look 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;
After that you can reference it in your root app container like this
import App './navigation/App'
<App />