Navigation.navigate not going anywhere

Question

I was following the react navigation guide on Authentication Flows (https://reactnavigation.org/docs/en/auth-flow.html) with a slight variation. I nested a tab navigator inside the LoginScreen. I'm not sure why because I'm really new to React Native but everything inside the login function seems to work except for the part where it's supposed to move to the main navigator.

This is my basic authentication flow:

Basically what I want to do is go from GREEN to RED, but nothing happens on

navigation.navigate('App');

Here are my navigator files:

AuthNavigator

import{
  createSwitchNavigator
} from 'react-navigation';

//Import necessary Components and Navigators
import AuthLoading from '../components/AuthLoadingComponent';
import DrawerNavigator from './DrawerNavigator';
import AuthComponent from '../components/AuthComponent';


export default createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    App: DrawerNavigator,
    Auth: AuthComponent
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

AuthComponent(Contains Social Login Buttons and LoginNavigator)

export default class AuthComponent extends Component{

  constructor(props){
    super(props);
  }

  facebookLogin(){

  }

  googleLogin(){

  }

  render() {
    return(
      <View style={styles.container}>

        <View style={styles.socialContainer}>
          <SocialIcon
            title='Conectar con Facebook'
            button
            type='facebook'
          />
          <Divider/>
          <SocialIcon
            title='Conectar con Google'
            button
            type='google-plus-official'
          />
        </View>

        <Divider style={styles.divider}/>

        {/*Navegador de Tab con Login y Register*/}
        <LoginNavigator/>

      </View>
    );
  }
}

LoginNavigator

export default createMaterialTopTabNavigator(
  {
    Login: {
      screen: LoginComponent,
      navigationOptions: {
        tabBarLabel: 'Iniciar sesión',
        tabBarIcon: ({tintColor}) => (
          <Icon
              name='lock-open'
              color={tintColor}
          />
        )
      }
    },
    Register: {
      screen: RegisterComponent,
      navigationOptions: {
        tabBarLabel: 'Crear cuenta',
        tabBarIcon: ({tintColor}) => (
          <Icon
              name='person-add'
              color={tintColor}
          />
        )
      }
    }
  },
  {
    tabBarPosition: 'top',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions:{
      showIcon: true,

    }
  }
);

LoginComponent

export default class LoginComponent extends Component{

  constructor(props){
    super(props);

    this.state = {
      email: ' ',
      password: ' '
    };
  }

  emailLogin(email, password){
    FirebaseService.firebaseApp.auth().signInWithEmailAndPassword(email, password)
    .then((user) => {
      //AsyncStorage.setItem('userToken', pUser);

      Alert.alert(
        '¡Éxito!',
        'Inicio de sesión exitoso',
        [
          {text: 'OK', onPress: () => console.log('OK Pressed')},
        ]
      );

      this.props.navigation.navigate('App');
    })
    .catch((error) => {
      Alert.alert(
        '¡Ooops, algo salió mal!',
        'Revisa el correo electrónico y/o contraseña.',
        [
          {text: 'OK', onPress: () => console.log(error)},
        ]
      );
    });
  }

  render() {
    return(
      <View style={styles.container}>

        <FormLabel labelStyle={styles.label}>Correo electrónico</FormLabel>
        <FormInput 
          placeholder='ejemplo@nomnom.com'
          onChangeText={(value) => this.setState({email: value})}
        />

        <FormLabel labelStyle={styles.label}>Contraseña</FormLabel>
        <FormInput
          placeholder='contraseña'
          secureTextEntry={true}
          onChangeText={(value) => this.setState({password: value})}
        />

        <Button
          title='Iniciar sesión' 
          icon={{name: 'check'}}
          backgroundColor= 'green'
          buttonStyle={styles.button}
          onPress={this.emailLogin.bind(this, this.state.email, this.state.password)}
        />
      </View>
    );
  }
}

I'm using

"react-native": "0.56.0",
"react-navigation": "^2.17.0"

Thank you very much in advance.

Answer 1

Just a small correction to the previous answer. The passing would be:

<LoginNavigator screenProps={{switchNavigator: this.props.navigation}}/>

And the call for the navigate function would be:

this.props.screenProps.switchNavigator.navigate('App');

Answer 2

When you try to navigate inside your Login Navigator, you have two defined options (screens): Login, and Register, so navigation.navigate won't 'see' App because it's not defined in the current navigator. What you can do in this case is "exit" or 'goBack' to the previous navigator.

Have a look at this: https://github.com/react-navigation/react-navigation/issues/697

Also, you could send the previous navigator as a ScreenProp:

<Login Navigator ScreenProps={{switchNavigator:this.props.navigation}}/>

And inside your Login component, instead of running

this.props.navigation.navigate('App')

you could run:

this.props.screenProps.navigate('App')