'Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined - React Navigation on React Native

Question

I am trying to create my stack navigator using React Navigation on a React Native app.

I have my HomeTab component, which is just this code:

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';

const Stack = createNativeStackNavigator();

export const HomeTab = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={<HomeScreen />} />
  </Stack.Navigator>
);

However the component prop is highlighted as red:

With the following error:

 'Element' is not assignable to type 'ScreenComponentType<ParamListBase, "Home"> | undefined

How can I solve this?

Answer 1

The solution is really simple.

React Navigation is not expecting an Element (JSX Expression), but rather a React Component.

To solve this, remove the < /> in the component:

<Stack.Screen name="Home" component={HomeScreen} />

Answer 2

In My case , I used createNativeStackNavigator to create nested route

<MonthlyStack.Navigator screenOptions={{ headerShown: false }} initialRouteName={NavigationKeys.MonthlyOne}>
        <MonthlyStack.Screen name={NavigationKeys.MonthlyOne} component={MonthlyScreen} />
</MonthlyStack.Navigator>

To solve the issue, pass navigation type def to const MonthlyStack = createNativeStackNavigator<NavigateRoot>();

"NavigateRoot" is there route parameter definition eg

export type NavigateRoot = {
  Login: {
    nextRoute?: NavigationKey | undefined;
    institutionId?: string | undefined;
    header?: string | undefined;
    subHeader?: string | undefined;
  };
Home: undefined
}