title: How to switch between screens using react navigation?
body: <p>I have created 3 components. 1) Login screen 2)VenueList screen 3) Menu Screen
  I have created another component called as AuthLoading this component navigates user from Login screen to VenueList screen. AuthLoading is bridge component which connects pre login and post login components.</p>
  <p>Login screen has a button which onclick will fire loginAction.js and user is navigated to web browser where he enters email/password.  After receiving the accessToken user must be navigated to VenueList screen but switchNavigator is not working. How can I implement it ?</p>
  <p>Login.js:</p>
  <pre><code>import React, { Component } from 'react';
  import { Button, StyleSheet, View } from 'react-native';
  import { connect } from 'react-redux';
  import { loginUser } from '../actions/loginAction';
  
  class Login extends Component {
  
    _signInAsync = async () =&gt; {
      await AsyncStorage.setItem('accessToken', this.props.accessToken);
      this.props.navigation.navigate('App');
    }
  
    render() {
  
      console.log(this.props.accessToken);
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;Button
          onPress={this.props.loginUser}
          title=&quot;Click to Login&quot;
          &gt;&lt;/Button&gt;
        &lt;/View&gt;
      );
    }
  
  }
  </code></pre>
  <p>loginAction.js:</p>
  <pre><code>import { LOGIN_USER } from './types';
  import Auth0 from 'react-native-auth0';
  
  var credentials = require('./auth0-credentials');
  const auth0 = new Auth0(credentials);
  
  export const loginUser = () =&gt; dispatch =&gt; {
  
      auth0.webAuth
      .authorize({
        scope: 'openid profile',
        audience: 'https://' + credentials.domain + '/userinfo'
      })
      .then(credentials =&gt; 
  
          dispatch({
              type: LOGIN_USER,
              payload: credentials.accessToken
          })
      )
      .catch(error =&gt; console.log(error));
      
  };
  </code></pre>
  <p>authLoading.js:</p>
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, View, ActivityIndicator, AsyncStorage, StatusBar } from 'react-native';
  
  export default class AuthLoading extends Component {
    
    constructor() {
      super();
      this._bootstrapAsync();
    }
  
    _bootstrapAsync = async () =&gt; {
      const accessToken = await AsyncStorage.getItem('accessToken');
  
      // This will switch to the App screen or Auth screen and this loading
      // screen will be unmounted and thrown away.
      this.props.navigation.navigate(accessToken ? 'App' : 'Auth');
    };
  
    render() {
      
      return (
          &lt;View style={styles.container}&gt;
              &lt;ActivityIndicator /&gt;
              &lt;StatusBar barStyle=&quot;default&quot; /&gt;
          &lt;/View&gt;
      );
    }
  
  }
  </code></pre>
  <p>app.js:</p>
  <pre><code>const AppStack = createStackNavigator({ Venues: VenueList, Menu: ItemsMenu });
  const AuthStack = createStackNavigator({ Login: Login });
  
  const AppStackNavigator = createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  );
  </code></pre>
  <p>Screenshot:</p>
  <p><a href="https://i.stack.imgur.com/mgV5B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mgV5B.jpg" alt="enter image description here" /></a></p>
  <p>In above screenshot after receiving accessToken user is navigated back again to login screen but instead of that I want to navigate user to VenueList screen.</p>