Issue

At the time you are calling navigation.navigate('Home') there is no screen called in Home in Navigation because of that ternary that checks whether there is a user or not and render conditionally your screens. That's why React Naviagation is not happy.

Solution

React Navigation's documention tell us that we shouldn't "manually navigate when conditionally rendering screens​". Means you should find a way to call setUser(user) in Login where setUser is the state setter from Navigation component.

To do we cas use a context and for that that change Navigation as follow (I added comments where I changed things):

import React, { createContext, useEffect, useState } from "react";
import { ActivityIndicator, View } from "react-native";
import ConfirmEmailScreen from "../screens/ConfirmEmailScreen";
import ForgotPassword from "../screens/ForgotPassword";
import HomeScreen from "../screens/HomeScreen";
import LoginScreen from "../screens/LoginScreen";
import NewPasswordScreen from "../screens/NewPasswordScreen";
import RegisterScreen from "../screens/RegisterScreen";

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import { Auth, Hub } from "aws-amplify";
const Stack = createNativeStackNavigator();

// Line I added
export const AuthContext = createContext(null);

const Navigation = () => {
  const [user, setUser] = useState(undefined);

  //Checking if user is already logged in or not!
  const checkUser = async () => {
    try {
      const authUser = await Auth.currentAuthenticatedUser({ bypassCache: true });
      setUser(authUser);
    } catch (e) {
      setUser(null);
    }
  };

  useEffect(() => {
    checkUser();
  }, []);

  useEffect(() => {
    const listener = (data) => {
      if (data.payload.event === "signIn" || data.payload.event === "signOut") {
        checkUser();
      }
    };
    Hub.listen("auth", listener);
    return () => Hub.remove("auth", listener);
  }, []);

  if (user === undefined) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator />
      </View>
    );
  }

  return (
     // Wrapper I added
    <AuthContext.Provider value={{ user, setUser }}>
      <NavigationContainer>
        <Stack.Navigator>
          {/*{If user is logged in navigate him to Homescreen else go throght the Screens based on the user selection */}
          {user ? (
            <Stack.Screen name="Home" component={HomeScreen} />
          ) : (
            <>
              <Stack.Screen name="Login" component={LoginScreen} />
              <Stack.Screen name="Register" component={RegisterScreen} />
              <Stack.Screen name="ConfirmEmail" component={ConfirmEmailScreen} />
              <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
              <Stack.Screen name="NewPassword" component={NewPasswordScreen} />
            </>
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

export default Navigation;

Consume AuthContext from Navigation in Login so you are able to call setUser after login, like below (I added comments where I changed thing):

import { useNavigation } from "@react-navigation/native";
import React, { useContext, useState } from "react";
import {
  Alert,
  Image,
  Keyboard,
  KeyboardAvoidingView,
  ScrollView,
  StyleSheet,
  TouchableWithoutFeedback,
  useWindowDimensions,
  View,
} from "react-native";
import Logo from "../../../assets/images/logo-main.png";
import CustomButton from "../../components/CustomButton/CustomButton";
import CustomInput from "../../components/CustomInput/CustomInput";

import { Auth } from "aws-amplify";
import { useForm } from "react-hook-form";

// Line I added
import {AuthContext} from "./Navigation" // ⚠️ use the correct path

const LoginScreen = () => {
  // Line I added
  const { setUser } = useContext(AuthContext); 

  const [loading, setLoading] = useState(false);
  const { height } = useWindowDimensions();
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const navigation = useNavigation();

  const onLoginPressed = async (data) => {
    if (loading) {
      return;
    }
    setLoading(true);
    try {
      const user = await Auth.signIn(data.username, data.password);
      // Line I added
      setUser(user);
    } catch (e) {
      Alert.alert("Opps", e.message);
    }
    setLoading(false);
  };

  const onForgotPasswordPressed = () => {
    navigation.navigate("ForgotPassword");
  };

  const onRegisterPressed = () => {
    navigation.navigate("Register");
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
        showsVerticalScrollIndicator={false}
      >
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <View style={styles.root}>
            <Image
              source={Logo}
              style={[styles.logo, { height: height * 0.2 }]}
              resizeMode={"contain"}
            />

            <CustomInput
              icon="user"
              name="username"
              placeholder="Username"
              control={control}
              rules={{ required: "Username is required" }}
            />
            <CustomInput
              icon="lock"
              name="password"
              placeholder="Password"
              control={control}
              rules={{ required: "Password is required" }}
              secureTextEntry={true}
            />

            <CustomButton
              text={loading ? "Loading..." : "Login Account"}
              onPress={handleSubmit(onLoginPressed)}
            />
            <CustomButton
              text="Forgot Password?"
              onPress={onForgotPasswordPressed}
              type="TERTIARY"
            />
            <CustomButton
              text="Don't have an account? Create one"
              onPress={onRegisterPressed}
              type="TERTIARY"
            />
          </View>
        </TouchableWithoutFeedback>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  root: {
    alignItems: "center",
    padding: 20,
  },

  logo: {
    width: 200,
    maxWidth: 300,
    maxHeight: 300,
  },
});