How to use type AppStackScreenProps

[dwbelliston]

Hey, typescript generics are not something I grasp fully.. so looking for some help since i cant get this to work right.

In AppNavigators.tsx I have:

export type AppStackParamList = {
  AppHome: undefined
  Login: { username?: string; password?: string } | undefined
  ResetPassword: undefined
}


export type AppStackScreenProps<T extends keyof AppStackParamList> = StackScreenProps<
  AppStackParamList,
  T
>

const Stack = createNativeStackNavigator<AppStackParamList>()

Then, when I try to type my screen.. e.g. The LoginScreen, I do this:

export const LoginScreen: FC<StackScreenProps<AppStackScreenProps, "Login">> = observer(
// ...
)

I get a warning saying

Generic type 'AppStackScreenProps' requires 1 type argument

So what is it suppose to be <AppStackScreenProps<"Login">> or <AppStackScreenProps, "Login">

Either way, i dont see it working. But when I do:

export const LoginScreen: FC<StackScreenProps<AppStackParamList, "Login">> = observer(

Notice the AppStackParamList instead of AppStackScreenProps then it works

[dwbelliston]

It also seems that if i change AppStackScreenProps to use NativeStackScreenProps like this:

export type AppStackScreenProps<T extends keyof AppStackParamList> = NativeStackScreenProps<
  AppStackParamList,
  T
>

And then Remove the extra StackScreenProps in the function type like this it seems to work:

export const LoginScreen: FC<AppStackScreenProps<"Login">> = observer(function LoginScreen(_props) {

So im wondering if the generator is correct because it add the StackScreenProps like below:

export const AltLoginScreen: FC<StackScreenProps<AppStackScreenProps, "AltLogin">> = observer(function AltLoginScreen() {

But isnt that already provided by AppStackScreenProps?

[frankcalise]

Hey @dwbelliston - sorry we missed this question but the generator has since been updated! https://github.com/infinitered/ignite/blob/master/boilerplate/ignite/templates/screen/NAMEScreen.tsx.ejs#L23-L25