I am creating an app with react native and using AWS amplify authentication. I want to create an authentication flow. I am following the docs to implement sign in, sign up, and sign out. These all are working fine. But the problem is I don’t know how to navigate based on the authentication state. Currently, when a log in is succesful, I want to navigate to the home screen, but I get the error that ‘The action ‘NAVIGATE’ was not handled by any navigator.’ But if i reload the app, then the app opens on the home screen. So I know that the user has been signed in correctly and the problem is something with navigation. I am using amplify V6.

This is the App.js

import "react-native-get-random-values";
import { useEffect, useState } from "react";
import { Amplify } from "aws-amplify";
import awsconfig from "./aws-exports";
import { getCurrentUser } from "aws-amplify/auth";
import { StatusBar } from "expo-status-bar";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import theme from "./theme";
import LandingScreen from "./screens/Auth/LandingScreen";
import LoginScreen from "./screens/Auth/LoginScreen";
import CreateAccountScreen from "./screens/Auth/CreateAccountScreen";
import HomeScreen from "./screens/HomeScreen";

Amplify.configure(awsconfig);

const Stack = createNativeStackNavigator();

export default function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(null);
    useEffect(() => {
        async function checkUser() {
            try {
                const user = await getCurrentUser();
                if (user) {
                    setIsAuthenticated(true);
                } else {
                    setIsAuthenticated(false);
                }
            } catch (err) {
                console.log(err);
                setIsAuthenticated(false);
            }
        }
        checkUser();
    }, []);


    return (
        <NavigationContainer>
            <StatusBar style="dark" />
            <Stack.Navigator
                screenOptions={{
                    headerShown: false,
                }}>
                {isAuthenticated ? (
                    <Stack.Screen name="HomeScreen" component={HomeScreen} />
                ) : (
                    <>
                        <Stack.Screen
                            name="LandingScreen"
                            component={LandingScreen}
                        />
                    </>
                )}
                <Stack.Screen name="LoginScreen" component={LoginScreen} />
                <Stack.Screen
                    name="CreateAccountScreen"
                    component={CreateAccountScreen}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

This is the login screen:

import React, { useState } from "react";
import { View, Text, TextInput, Button, StyleSheet, Alert } from "react-native";
import { signIn } from "@aws-amplify/auth";
import { useNavigation } from "@react-navigation/native";
import theme from "../../theme";

export default function LoginScreen() {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const navigation = useNavigation();

    const handleSignIn = async () => {
        try {
            const { isSignedIn, nextStep } = await signIn({
                username,
                password,
            });
            if (isSignedIn) {
                Alert.alert("Sign in successful!");
                navigation.navigate("HomeScreen");
            } else {
                Alert.alert("Sign in not completed:", nextStep);
            }
        } catch (error) {
            Alert.alert("Error signing in:", error.message);
        }
    };

    return (
        <View>
            <TextInput
                placeholder="Username"
                value={username}
                onChangeText={setUsername}
            />
            <TextInput
                placeholder="Password"
                secureTextEntry
                value={password}
                onChangeText={setPassword}
            />
            <Button title="Sign In" onPress={handleSignIn} />
        </View>
    );
}

These are the relevant dependency versions:
“aws-amplify”: “^6.3.3”,
“@aws-amplify/react-native”: “^1.1.1”,
“@aws-amplify/auth”: “^6.3.3”

I want to find a way to navigate the user to the correct page based on whether they are signed in or not. I have not used AWS before so I am not sure what to do.