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