There is a type issue using react navigation, when use Stack.Navigation or Stack.Group from createNativeStackNavigator
The issue saids that the types dont match with JSX.element at the end of the messages is more specific: Type '{}' is not assignable to type 'ReactNode'
Whole message:
'Stack.Navigator' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: NativeStackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: NativeStackNavigationOptions | ... 1 mo...' is not a valid JSX element. Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<NativeStackNavigationEventMap, "transitionStart">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | unde...' is not assignable to type 'Element | ElementClass | null'. Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<{ transitionStart: EventListenerCallback<NativeStackNavigationEventMap, "transitionStart">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | unde...' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/mrcmesen/Novum/ice-app/plant-maintenance/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2786)The way to reprocede is just install these versions and run the project.
"react": "17.0.1","react-dom": "17.0.1","react-native": "0.64.3","@react-navigation/bottom-tabs": "^6.3.1","@react-navigation/native": "^6.0.10","@react-navigation/native-stack": "^6.6.1","typescript": "^4.6.3"Image may be NSFW.
Clik here to view.
My application still works and I don't have any error in console. I don't know why I have a red line under Stack.Navigator. But when I hover on it, it says that 'Stack.Navigator' cannot be used as a JSX component.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
I also got the same error when using MaterialCommunityIcons
Update at 12-04-22 For React-Navigation
This is a issue related to the version of @types/react you need to add this minimun resolition to your project to solve it:
"dependencies": {"@types/react": "^17.0.41"}