Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Converting StackNavigator from v4 to v5 React Native error for auth

$
0
0

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."

error message in IOS simulator

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

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>