title: React Native React Navigation screen does not redirect after login with AsyncStorage
body: <p>So I built a login system with React Native, React Navigation and AsyncStorage. If the user clicks on a button he gets logged in and the value of the AsyncStorage Key &quot;@loginuser&quot; gets refreshed. Now I expected
  that the screen automatically gets refreshed, but I have to close the App and start it again - This is not optimal.</p>
  <p>(I also saw <a href="https://stackoverflow.com/questions/49509167/react-native-react-navigation-redirection-after-login-with-redux">React-Native/React navigation redirection after login with redux</a> post, but it is very old)</p>
  <p>App.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { Text, View, StyleSheet, Button, TouchableOpacity, TextInput } from 'react-native';
  import DefaultStackNavigation from './components/Navigation/Navigation';
  
  
  const App = () =&gt; {
    return(
      &lt;View&gt;
        &lt;DefaultStackNavigation /&gt;
      &lt;/View&gt;
    )
  }
  
  export default App;
  </code></pre>
  <p>Navigation.js</p>
  <pre class="lang-js prettyprint-override"><code>import React, {useEffect, useState} from 'react';
  //React Native
  import { Text, View, StyleSheet} from 'react-native';
  //Screens
  import HomeScreen from '../HomeScreen/HomeScreen'
  import AddScreen from &quot;../AddScreen/AddScreen&quot;;
  import NotificationScreen from &quot;../NotificationScreen/NotificationScreen&quot;;
  import MenuScreen from &quot;../MenuScreen/MenuScreen&quot;;
  import SearchScreen from &quot;../SearchScreen/SearchScreen&quot;;
  import PostJobScreen from &quot;../PostJobScreen/PostJobScreen&quot;;
  import JobOfferScreen from &quot;../JobOfferScreen/JobOfferScreen&quot;;
  import ProfileScreen from &quot;../ProfileScreen/ProfileScreen&quot;;
  import NoneLoggedinScreen from &quot;../NoneLoggedinScreen/NoneLoggedinScreen&quot;
  import SignupModal from &quot;../NoneLoggedinScreen/SignupModal&quot;
  //React Navigation
  import { createStackNavigator } from &quot;@react-navigation/stack&quot;;
  import { NavigationContainer } from '@react-navigation/native';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  //Third Party
  import AsyncStorage from '@react-native-async-storage/async-storage';
  
  
  
  
  const Tab = createBottomTabNavigator();
  
  //Tab bar
  const HomeTabs = () =&gt; {
    return (
      &lt;Tab.Navigator tabBarOptions={{style:{height: 50}}, {showIcon: true}, {showLabel: false}} &gt;
        &lt;Tab.Screen name=&quot;Home&quot; component={HomeScreen}/&gt;
        &lt;Tab.Screen name=&quot;SearchScreen&quot; component={SearchJobStack}/&gt;
        &lt;Tab.Screen name=&quot;AddScreen&quot; component={AddScreen}/&gt;
        &lt;Tab.Screen name=&quot;NotificationScreen&quot; component={NotificationScreen} /&gt;}}/&gt;
        &lt;Tab.Screen name=&quot;MenuScreen&quot; component={MenuScreen}/&gt;}}/&gt;
      &lt;/Tab.Navigator&gt;
    );
  }
  
  const Stack = createStackNavigator();
  const STORAGE_KEY = '@loginStatus'
  
  const DefaultStackNavigation = () =&gt; {
  
    const [loginStatus, setLoginStatus] = useState()
    const readData = async () =&gt; {
      try {
        const isLoggedIn = JSON.parse(await AsyncStorage.getItem(STORAGE_KEY))
        console.log(isLoggedIn)
        if (isLoggedIn !== null) {
          setLoginStatus(isLoggedIn)
        }
      } catch (e) {
        alert('Failed to fetch the data from storage')
      }
    }
  
    readData()
  
    return loginStatus ? (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator screenOptions={{headerShown: false}} independent={false}&gt;
          &lt;Stack.Screen name=&quot;HomeTabs&quot; component={HomeTabs} /&gt;
          &lt;Stack.Screen name=&quot;PostJobScreen&quot; component={PostJobScreen} /&gt;
          &lt;Stack.Screen name=&quot;ProfileScreen&quot; component={ProfileScreen}/&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    ) : (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator screenOptions={{headerShown: false}} independent={false}&gt;
          &lt;Stack.Screen name=&quot;NoneLoggedinScreen&quot; component={NoneLoggedinScreen} /&gt;
          &lt;Stack.Screen name=&quot;SignupModal&quot; component={SignupModal} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  };
  
  
  export default DefaultStackNavigation;
  </code></pre>
  <p>NoneLoggedinScreen.js</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { Text, View, Button} from 'react-native';
  import AsyncStorage from '@react-native-async-storage/async-storage';
  
  const STORAGE_KEY = '@loginStatus'
  
  const SignupModal = () =&gt; {
  
    const [loginStatus, setLoginStatus] = useState(false)
    const saveData = async (parmLoginStatus) =&gt; {
      try {
        await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(parmLoginStatus))
        alert('Data successfully saved -&gt; Logged In')
        console.log(loginStatus)
      } catch (e) {
        alert('Failed to save the data to the storage')
      }
    }
  
    const onSubmitLogin = () =&gt; {
      setLoginStatus(true)
      saveData(true)
    }
  
  
    return(
      &lt;View&gt;
        &lt;Text&gt;Login Page. Press the button to log in and stay logged in&lt;/Text&gt;
        &lt;Button title=&quot;Log in&quot; onPress={() =&gt; onSubmitLogin()}/&gt;
      &lt;/View&gt;
    );
  };
  
  const styles = StyleSheet.create({
    App: {
      flex: 1,
      backgroundColor: &quot;white&quot;
    },
  });
  
  export default SignupModal;
  </code></pre>
  <p>Now I was expecting the page to reload and I can use the app. Unfortunately it doesn't. The data is saved and the login status is set to <code>true</code>, but I have to restart the app to use it. The perfidious thing is, if I write the AsyncStorage login logic from the <code>NoneLoggedinScreen.js</code> file into the App.js file, the app works fine -&gt; However, this is not an alternative for me, because the general structure of the app is, I think, built relatively sensibly.
  Also when the user tries to be redirected manually (by button) with navigation.navigate(&quot;HomeTabs&quot;) after logging in doesn't work, and I get an error that Home doesn't exist, which is also not understandable, because the navigation has actually been set to Logged in now. Has anyone ever had this problem?</p>
  <p>This are my dependencies by the way</p>
  <pre><code>&quot;dependencies&quot;: {&lt;br&gt;
    &quot;@react-native-async-storage/async-storage&quot;: &quot;^1.15.1&quot;,&lt;br&gt;
    &quot;@react-native-community/masked-view&quot;: &quot;^0.1.10&quot;,&lt;br&gt;
    &quot;@react-navigation/bottom-tabs&quot;: &quot;^5.11.7&quot;,&lt;br&gt;
    &quot;@react-navigation/native&quot;: &quot;^5.9.2&quot;,&lt;br&gt;
    &quot;@react-navigation/stack&quot;: &quot;^5.14.2&quot;,&lt;br&gt;
    &quot;react&quot;: &quot;16.13.1&quot;,&lt;br&gt;
    &quot;react-native&quot;: &quot;0.63.4&quot;,&lt;br&gt;
    &quot;react-native-gesture-handler&quot;: &quot;^1.10.1&quot;,&lt;br&gt;
    &quot;react-native-reanimated&quot;: &quot;^1.13.2&quot;,&lt;br&gt;
    &quot;react-native-safe-area-context&quot;: &quot;^3.1.9&quot;,&lt;br&gt;
    &quot;react-native-screens&quot;: &quot;^2.17.1&quot;,&lt;br&gt;
  }
  </code></pre>