The action 'NAVIGATE' with payload {"name":"Game","params":{"roomId":"..."}} was not handled by any navigator

Issue

I am creating a game in react-native (typescript) using firebase, but I encounter this error while adding a "Game" screen:

I have this code for my App.tsx :

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Login from './app/screens/Authentication/Login';
import Register from './app/screens/Authentication/Register';
import Home from './app/screens/Home/Home';
import Game from './app/screens/Game/Game';
import { FIREBASE_AUTH } from './FirebaseConfig';

const Stack = createNativeStackNavigator();

export default function App() {
  ...

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />
        ) : (
          <>
            <Stack.Screen
              name='Login'
              component={Login}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name='Register'
              component={Register}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name='Game'
              component={Game}
              options={{ headerShown: false }}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

And here is the part of my types.tsx file :

import { StackNavigationProp } from '@react-navigation/stack';

// Navigation
type RootStackParamList = {
    Home: undefined;
    Login: undefined;
    Register: undefined;
    Game: { roomId: string | null };
}

export type HomeNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
export interface HomeProps {
    navigation: HomeNavigationProp;
}
export type RegisterNavigationProp = StackNavigationProp<RootStackParamList, 'Register'>;
export interface RegisterProps {
    navigation: RegisterNavigationProp;
}
export type LoginNavigationProp = StackNavigationProp<RootStackParamList, 'Login'>;
export interface LoginProps {
    navigation: LoginNavigationProp;
}
export type GameNavigationProp = StackNavigationProp<RootStackParamList, 'Game'>;
export interface GameProps {
    navigation: GameNavigationProp;
    route: {
        params: {
            roomId: string | null;
        }
    }
}

I don't understand why this one raises an error while the 3 previous ones did not...

Full error :

Sorry for the long post, I can show more code if necessary but i have to admit i am truely clueless this time...
Thanks!

Solution

I had to move this part :

<Stack.Screen
    name='Game'
    component={Game}
    options={{ headerShown: false }}
/>

just next to Home instead of next to Login and Register screens.
It is because, the way it was, the user had to be undefined for the Game screen to be defined. (condition user ? in App.tsx)

Thanks to @DinhNguyen

Answered By - Freddy