I am trying to type the navigation global with every possibility. I want to add custom parameters for multiple nested stack screens etc. The type should recognize automatically on which screen I send which parameter are needed.
export enum NestedNavigatorScreens { Start = 'NestedNavigatorScreens_Start', Stop = 'NestedNavigatorScreens_Stop',}export enum NestedNavigatorScreens2 { Start = 'NestedNavigatorScreens_Start_2', Stop = 'NestedNavigatorScreens_Stop_2',}export type RootScreensProps = { [RootScreens.AppUpdateRequiredScreen]: undefined; [RootScreens.SignInScreen]: undefined; // Here I have my nested Navigator which should also get passed some params, but I am not able to find a solution for this how I can give the right type. [RootScreens.NestedNavigator]: { screen: NestedNavigatorScreens; params: // How can I define them for each type individual? }; [RootScreens.NestedNavigator2]: { screen: NestedNavigatorScreens; params: someParams };}export const Stack = createStackNavigator<RootScreensProps>();export const NestedNavigator = createStackNavigator<NestedStackScreenProps>();export const NestedNavigator2 = createStackNavigator<Nested2StackScreenProps>();return (<Stack.Navigator><Stack.Screen name={RootScreens.SignInUpScreen} component={SignInUp} /><Stack.Screen name={RootScreens.NestedNavigator} component={NestedNavigator} /><Stack.Screen name={RootScreens.NestedNavigator} component={NestedNavigator2} /></Stack.Navigator>)
For Example, NestedNavigatorScreens.Start
should get parameters with { currentStep: number, email: boolean }
and NestedNavigatorScreens.Stop
should get { currentStep: number, finished: boolean }
I also added a navigation.d.ts
to just define the types ones global. So we do not need to type it each time we use useNavigaton<customType>()
hook.
import { RootScreensProps } from '@core/presentation/navigation/screens';declare global { namespace ReactNavigation { interface RootParamList extends RootScreensProps {} }}