#How can I create the right type for react-native navigation?

11 messages · Page 1 of 1 (latest)

mystic summit
#

How can I type the react-native navigation? I have a stack with nested stack, the typing for the stack is pretty simple but when I try to type the nested I am not able to find a solution.

export enum NestedNavigatorScreens {
  Start = 'NestedNavigatorScreens_Start',
  Stop = 'NestedNavigatorScreens_Stop',
}

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?
  };
}
export const Stack = createStackNavigator<RootScreensProps>();

For Example NestedNavigatorScreens.Start should get params 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 in and not to need to define them on every useNavigation<CustomType>().

import { RootScreensProps } from '@core/presentation/navigation/screens';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootScreensProps {}
  }
}
rancid vale
#

Hi @mystic summit, I’m Alexander Lill (not a bot!), a researcher at the University of Zurich. I’m trying to help people receive answers faster on Discord. If you are ok with me trying to help you, please read on, otherwise click the ⛔ symbol, and I will delete this message and apologize for the inconvenience.

Based on your question, I suggest the following links. Please react with an emoji to the links that were helpful for you.

DM me if you have any questions. More info: #1063200184315674706

cunning flower
#

Your code should look something like this: ```ts
import { NavigatorScreenParams } from "@react-navigation/native";

export type NestedNavigatorScreensProps = {
Start: undefined;
Stop: undefined;
}

export type RootScreensProps = {
AppUpdateRequiredScreen: undefined;
SignInScreen: undefined;
NestedNavigator: NavigatorScreenParams<NestedNavigatorScreensProps> | undefined;
};

export const Stack = createStackNavigator<RootScreensProps>();```

rancid vale
#

Thank you for your response @cunning flower !

I’d like to invite everyone in this conversation to fill in a short follow-up survey on your experience with and the value of the suggestions (max. 10 mins). Your responses will be treated confidentially.

We would highly appreciate your feedback to help our research project. For your efforts, you can decide to be entered in a raffle for an Amazon gift card of USD 100 value (voluntary).

To participate in the survey, please answer the questions in the following link:
https://uzhwwf.qualtrics.com/jfe/form/SV_1zWdrjjRfwFGXwa?ST=SO&CO=TS&CI=4266225

cunning flower
#

<@&608770230818308165>

keen tangle