I am new to react native and I am trying to create an app with stack navigation. This is what I have on my App.js
import React from "react";
import { View, Text } from "react-native";
// Import React Navigation
import { createStackNavigator, createAppContainer } from 'react-navigation'
// Import the screens
import Main from './components/Main';
import Chat from './components/Chat';
// Create the navigator
const navigator = createStackNavigator({
Main: { screen: Main },
Chat: { screen: Chat },
});
const App = createAppContainer(navigator)
export default navigator
This is also the error I am getting
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
This error is located at:
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at registerRootComponent.js:17)
in RootErrorBoundary (at registerRootComponent.js:16)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)
- node_modules/@react-navigation/core/src/navigators/createNavigator.js:19:8 in getDerivedStateFromProps
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7663:46 in applyDerivedStateFromProps
- ... 20 more stack frames from framework internals
I am obviously doing something wrong, please assist
On the official documentation of React Navigation
That means, now you have to explicitly use the Container, which you have done in your code.
But you're still using (exporting)
navigator
not theApp
.So, change your last line as
export default App