ERROR: "The action 'NAVIGATE' with payload {"name":"Auth"} was not handled by any navigator. Do you have a screen named 'Auth'? If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator."
My goal is to convert React-Native stack navigator from version 4-5. I've been running into some challenges and any help would be deeply appreciated.
Nav flow: To authenticate user (with firebase) and go to a component that contains an already functional bottom-tab-navigator. Loading screen -> login -> sign up -> in the app (as a component).
This navigator is in the app.jsx file, here is the code. Note: I commented out the v4 stack-navigators, which work fine. Again, I want to convert this to the latest version 5.
import React from 'react'
// import { createAppContainer, createSwitchNavigator } from 'react-navigation'; //(v4 only)
// import { createStackNavigator } from 'react-navigation-stack'; //(v4 only)
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// screens imports
import LoadingScreen from './screens/LoadingScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import CategorySignin from './screens/CategorySignin';
import FeedScreen from './screens/FeedScreen';
// tab navigator
import { AppTabs } from './AppTabs';
const Stack = createStackNavigator()
export default class App extends React.Component {
render(){
return(
// trying to do...
<NavigationContainer>
<Stack.Navigator
initialRouteName="Loading"
navigationOptions={{header: () => null}}
>
<Stack.Screen
name="Loading"
component={LoadingScreen}
/>
<Stack.Screen
name="Login"
component={LoginScreen}
/>
<Stack.Screen
name="Register"
component={RegisterScreen}
/>
<Stack.Screen
name="Sparked"
component={AppTabs}
/>
</Stack.Navigator>
</NavigationContainer>
);
}; }
// old stack nav for auth, directs to single component (AppTabs) once logged in v4
//navigation once logged in
// const LoginedStack = createStackNavigator({
// // fix here
// Sparked: AppTabs,
// },
// {
// navigationOptions: {
// header: null,
// },
// }
// );
// // //auth navigation
// const AuthStack = createStackNavigator({
// Login: LoginScreen,
// Register: RegisterScreen,
// });
// //create navigation
// export default createAppContainer(
// createSwitchNavigator(
// {
// Loading: LoadingScreen,
// Auth: AuthStack,
// App: LoginedStack,
// },
// {
// initialRouteName: "Loading",
// navigationOptions: {
// header: null,
// },
// defaultNavigationOptions: {
// title: 'App'
// }
// }
// )
// );