undefined params in v7

[chiefchief]

according to the docs i've created simple navigation:

navigation.ts:

const RootStack = createNativeStackNavigator({
  screens: {
    FirstScreen: {
      screen: FirstScreen,
    },
    SecondScreen: {
      screen: SecondScreen,
    },
  },
});

export const Navigation = createStaticNavigation(RootStack);

export type RootStackParamList = StaticParamList<typeof RootStack>;

then i import RootStackParamList in
index.d.ts:

import {RootStackParamList} from './navigation.ts';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

and finally in my component i use the hook
FirstScreen.tsx:

...
import {useNavigation} from '@react-navigation/native';
...
...
const {navigate} = useNavigation();
...
const onPress = () => navigate('SecondScreen', {userName})
...

But i have an issue:

Argument of type '["SecondScreen", { username: string; }]' is not assignable to parameter of type 'ScreenParamsPair<RootParamList, keyof RootParamList>'.
  Type '["SecondScreen", { username: string; }]' is not assignable to type '[screen: "SecondScreen", params: undefined]'.
    Type at position 1 in source is not compatible with type at position 1 in target.
      Type '{ username: string; }' is not assignable to type 'undefined'.

then i tried to pass param list directly to the "createNativeStackNavigator"
navigation.ts

export type RootParamList = {
  FirstScreen: undefined;
  SecondScreen: {userName: string};
};
const RootStack = createNativeStackNavigator<RootParamList>({
  screens: {
    FirstScreen: {
      screen: FirstScreen,
    },
    SecondScreen: {
      screen: SecondScreen,
    },
  },
});
export const Navigation = createStaticNavigation(RootStack);

export type RootStackParamList = StaticParamList<typeof RootStack>;

But this also didn’t help. "StaticParamList" doesn’t infer params types. "RootStackParamList" is always

type RootStackParamList = {
    FirstScreen: undefined;
    SecondScreen: undefined;
}

nvm with <RootParamList> or without

The question is: how to type a static implementation with params?

P.S.: The way it works for me is by using…

export type RootStackParamList = RootParamList

instead of

export type RootStackParamList = StaticParamList<typeof RootStack>;

[satya164]

How are your screens components defined?

[chiefchief]

I tried different options none of them helps
1)

import React, {FC} from 'react';
import {View} from 'react-native';

export const SecondScreen: FC = () => {
  return <View />;
};

import {StaticScreenProps} from '@react-navigation/native';
import React, {FC} from 'react';
import {View} from 'react-native';

type Props = StaticScreenProps<{userName: string}>;

export const SecondScreen: FC<Props> = () => {
  return <View />;
};

import {StaticScreenProps} from '@react-navigation/native';
import React from 'react';
import {View} from 'react-native';

type Props = StaticScreenProps<{userName: string}>;

export const SecondScreen = (props: Props) => {
  return <View />;
};

import {StaticScreenProps} from '@react-navigation/native';
import React from 'react';
import {View} from 'react-native';

type Props = StaticScreenProps<{userName: string}>;

export function SecondScreen(props: Props) {
  return <View />;
}

[chiefchief]

resolved, if remove generic, then the types infers correctly

const RootStack = createNativeStackNavigator<RootParamList>({
  screens: {
    FirstScreen: {
      screen: FirstScreen,
    },
    SecondScreen: {
      screen: SecondScreen,
    },
  },
});