NativeStackNavigator React Native - Authentication

Question

I made a login screen for my app, and a homepage. My goal is to store if the users is logged in, and if he is, to not send him through the login page, but directly to the mainpage. I found a way online, using this method shown in the code. But even though the function works (it logs "logged in" or "not logged in" correctly. It still always sends me directly to the homepage... What am I doing wrong?

import React from "react";
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from "../screens/HomeScreen";
import Login from "../screens/Login";
import * as SecureStore from 'expo-secure-store';

const AuthStack = () => {
  const AuthStack = createNativeStackNavigator();

  async function isLoggedIn(key) {
    let result = await SecureStore.getItemAsync(key);
    if (result !== null) {
      alert("🔐 Here's your value 🔐 \n" + result);
      console.log("logged in");
      return true;
    }
    else {
      alert('No values stored under that key.');
      console.log("not logged in");
      return false;
    }
  }

  return (
    <AuthStack.Navigator>
        {
          isLoggedIn("access_token") ? (
              <>
                <AuthStack.Screen name = "HomeScreen" component={HomeScreen}/>
              </>
            ) : (
              <>
                <AuthStack.Screen
                    name = "Login"
                    component={Login}
                    options={{
                      title: 'Log In',
                      headerStyle: {
                        backgroundColor: '#212521'
                      },
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        fontWeight: 'bold',
                      },
                    }}
                />

              </>
            )
        }
    </AuthStack.Navigator>
  );
};

export default AuthStack;

Answer 1

Your function is async, thus on the first render it won't have the information loaded in order to decide whether or not it should render the HomeScreen or the LoginScreen. You need to fetch the data, return nothing until the data is loaded, and then trigger a state change which will cause a rerender.

This could be implemented as follows.

const [isSignedIn, setSignedIn] = useState()

React.useEffect(() => {
   const loggedIn = async () => { 
     const t = await SecureStore.getItemAsync(key)
     setSignedIn(t !== null ? true : false)
   }
   loggedIn()
}, [])

// maybe show a loading indicator
if (isSignedIn === undefined) {
   return null
}

  return (
    <AuthStack.Navigator>
        {
          isSignedIn? (
              <>
                <AuthStack.Screen name = "HomeScreen" component={HomeScreen}/>
              </>
            ) : (
              <>
                <AuthStack.Screen
                    name = "Login"
                    component={Login}
                    options={{
                      title: 'Log In',
                      headerStyle: {
                        backgroundColor: '#212521'
                      },
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        fontWeight: 'bold',
                      },
                    }}
                />

              </>
            )
        }
    </AuthStack.Navigator>
  );