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…
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
I had to move this part :
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
You should add
RootStackParamList
type: