Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

React-Native Navigation global typing for nested stacks

$
0
0

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.Stopshould 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 {}  }}

Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>