[help]How to use TypeScript to define the type of a routing stack array？

[wanxue0804]

Current behavior

I want to extract stackRoutes into an array, now my code is as follows，
When I try to use props in the Profile page, the Profile component in stackRoutes displays an error message.

Type '({ route, navigation }: IProps) => Element | null' is not assignable to type 'ScreenComponentType | undefined'.
    Type '({ route, navigation }: IProps) => Element | null' is not assignable to type 'FunctionComponent<{}>'.
      Types of parameters ''__0 and 'props' are incompatible .
         Type '{}' is missing the following properties from type 'IProps': route, navigation

If I don’t use props, no error will be reported.

Due to business requirements, stackRoutes must be extracted into an array, and the attribute reminder of routeConfig is required when adding an item

When the current writing method adds stackRoutes, all attributes are prompted, but the component will report an error here, and the parameter prompt is also wrong when the navigation.navigate(routeName) of the page

I want to know how can I modify the type definition of stackRoutes so as not to report an error, please help me, it is urgent

// types.ts
import { StackNavigationProp, StackNavigationState, ParamListBase } from ‘@react-navigation/stack’;
import { RouteProp, StackNavigationOptions, StackNavvigationEventMap } from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

export type INavigationType<T extends keyof RootStackParamList> = 
  StackNavigationProp<RootStackParamList, T>;
  
export type IRouteType<T extends keyof RootStackParamList> =
  RouteProp<RootStackParamList, T>;
  
export type IStackRouteType = 
  RouteConfig<
    RootStackParamList,
    keyof RootStackParamList ,
    StackNavigationState<ParamListBase>,
    StackNavigationOptions,
    StackNavvigationEventMap
  >

// index.tsx
import { createStackNavigator } from '@react-navigation/stack';
import { IStackRouteType } from './types;'


const StackNavigator = createStackNavigator<RootStackParamList>();

const stackRoutes: IStackRouteType= [
  {
    name: 'Home',
    component: HomeScreen,
    options: {
      headerShown: false
    }
  },
  {
    name: 'Profile',
    component: ProfileScreen,  // <----- error
    options: {
      headerShown: false
    },
    listeners: () => {
       return ({
         state: (e) => {
            console.log('state changed', e.data);
         }, 
       })
    }
  },
   {
    name: 'Settings',
    component: Settings,
    options: {
      headerShown: false
    }
  },
];

export default function App() {
  return (
    <NavigationContainer>
      <StackNavigator.Navigator>
        {stackRoutes.map((route, index) => (
          <StackNavigator.Screen
            key={route.name}
            {...route}
          />
        ))}
      </StackNavigator.Navigator>
    </NavigationContainer>
  );
}

// Profile page
import { INavigationType, IRouteType } from '../types';

interface IProps {
  route: IRouteType<'Profile'>;
  navigation: INavigationType<'Profile'>;
}
function Profile ({
route,
navigation
}: IProps ) {
  const { userId } = route.params;

  return (
    <Text>this is Profile page</Text>
  )
}

Expected behavior

When I add items to stackRoutes, there will be prompts for attributes such as name and component, and the attributes in options can be prompted, and the page can also use route, navigation and other parameters normally.

Reproduction

https://snack.expo.dev/wPNH-AqjY

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.6
@react-navigation/stack	6.3.16
@react-navigation/native-stack	6.9.12

[github-actions[bot]]

Hey @wanxue0804! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro.

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a repro.

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.6, latest: 6.1.7)
• @react-navigation/stack (found: 6.3.16, latest: 6.3.17)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.6, latest: 6.1.7)
• @react-navigation/stack (found: 6.3.16, latest: 6.3.17)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?