skip to Main Content

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

enter image description here

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 :
enter image description here

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

2

Answers


  1. Chosen as BEST ANSWER

    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


  2. You should add RootStackParamList type:

    const Stack = createNativeStackNavigator<RootStackParamList>();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search