Invariant Violation: The navigation prop is missing for this navigator

  • A+
Category:Languages

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.

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

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: