title: react navigation in react native, with conditional stack, and authentication
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { Container, Content, Form, Item, Input, Label, Button,Text, Icon} from 'native-base'
  import AsyncStorage from '@react-native-community/async-storage';
  import authStore from '../store/authStore';
  export default class Login extends Component {
      constructor(props){
          super(props);
          this.state={
              email:'',
              password:''
          }
      }
      handleLogin = async () =&gt;{
          let requestObject = {
              email: this.state.email,
              password: this.state.password
          }
          authStore.userLogin(requestObject, response =&gt; {
              this.storeUserData(response.data.data);
              this.props.navigation.navigate('Home');
          })
      }
      storeUserData = async (value) =&gt; {
          try {
            const jsonValue = JSON.stringify(value)
            await AsyncStorage.setItem('@userData', jsonValue)
          } catch (e) {
            console.log(e);
          }
      }
      render() {
          return (
              &lt;Container&gt;
                  &lt;Content contentContainerStyle={{flex: 1, justifyContent:'center'}}&gt;
                  &lt;Form style={{margin:10}}&gt;
                      &lt;Item rounded last style={{margin:10}}&gt;
                      &lt;Icon active type="FontAwesome" name='user' /&gt;
                      &lt;Input placeholder='User Name' 
                      onChangeText={(email)=&gt;this.setState({email})} 
                      value={this.state.email}/&gt;
                      &lt;/Item&gt;
                      &lt;Item rounded last style={{margin:10}}&gt;
                      &lt;Icon active type="FontAwesome" name='key' /&gt;
                      &lt;Input placeholder='Password'
                      secureTextEntry
                      onChangeText={(password)=&gt;this.setState({password})} 
                      value={this.state.password}/&gt;
                      &lt;/Item&gt;
                      &lt;Button rounded block style={{margin:10}} onPress={() =&gt; this.handleLogin()}&gt;
                      &lt;Text&gt;Sign-In&lt;/Text&gt;
                      &lt;/Button&gt;
                  &lt;/Form&gt;
                  &lt;/Content&gt;
              &lt;/Container&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>const AuthStack = createStackNavigator();
  AuthStackScreen = () =&gt;
        &lt;AuthStack.Navigator&gt;
          &lt;AuthStack.Screen name="Login" component={Login} /&gt;
        &lt;/AuthStack.Navigator&gt;
  HomeStackScreen = () =&gt;
    &lt;HomeStackDrawer.Navigator&gt;
      &lt;HomeStackDrawer.Screen name="Home" component={HomeScreen}/&gt;
      &lt;HomeStackDrawer.Screen name="Form" component={FormScreen}/&gt;
      &lt;HomeStackDrawer.Screen name="Logout" component={Logout}/&gt;
    &lt;/HomeStackDrawer.Navigator&gt;
  export default class App extends Component{
    constructor(props){
      super(props);
      this.state={
        isloggedIn:false
      }
      this.loginStatusCheck();
    }
    loginStatusCheck = async () =&gt;{
      const userToken = await AsyncStorage.getItem('@accessToken');
      if (userToken) {
        this.setState({isloggedIn:true})
      } else {
        this.setState({isloggedIn:false})
      }
    }
    render(){
      return(
        &lt;NavigationContainer&gt;
          {this.state.isloggedIn ? &lt;HomeStackScreen/&gt; : &lt;AuthStackScreen/&gt;}
        &lt;/NavigationContainer&gt;
      )
    }
  }
  </code></pre>
  
  <p>This is my App.js, I am checking if the user is logged in or not, then loading the Navigation stack accordingly. I know the problem, If I Logout, I want to navigate to the sign-in component, but <code>this.props.navigation.navigate('Login')</code> gives error. because I am not returning the <code>Login</code> route. How to solve this issue? Also, when I <code>Log in</code> same issue, as the <code>Login</code> is not present in the stack.
  Thank you in advance</p>
  
  <p>Included the login component</p>