Search code examples
react-nativetypesreact-navigation

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

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: enter image description here

With the following error:

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

How can I solve this?

Solution

  • 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} />