react-native-vector-icons: 'XXX' cannot be used as a JSX component. Its instance type 'Icon' is not a valid JSX element.

Review the documentation: https://github.com/oblador/react-native-vector-icons
Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

windows11

Description

When I upgraded to react18，my icon component reported an error.Such as:

 'MaterialCommunityIcons' cannot be used as a JSX component.
  Its instance type 'Icon' is not a valid JSX element.

this is my code:

import React ,{ useEffect, useState } from "react";
import { Platform, View } from "react-native";
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

const App = () => {
  const [device, setDevice] = useState<string>('')
  useEffect(() => {
    if (Platform.OS === 'ios') {
      setDevice('ios')
    } else {
      setDevice('android')
    }
  }, [])

 return (
    <View>
       <MaterialCommunityIcons name="calendar" onPress={showDatepicker} size={20} />
    </View>
 )
}

export default App

this is my pakage.json

"dependencies":{
     "expo": "^45.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "^0.69.1",
     "react-native-vector-icons": "^9.2.0",
 },
"devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "@types/react-native": "^0.69.2",
    "typescript": "~4.3.5"
  },
"resolutions": {
    "@types/react": "~18.0.14"
  }

How to solve this problem?

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 8
Comments: 16

Most upvoted comments

The Issue is with Latest Version of @types/react:18.x.x This may have been introduced to your project via some other packages’ peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:

"paths": {
   "react": [ "./node_modules/@types/react" ]
 }

+51

gaithoben on Jan 12, 2023

For me, the solution was to update in the package.json:


  "resolutions": {
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.2"
  }

redbluenat on Aug 3, 2023

The Issue is with Latest Version of @types/react:18.x.x This may have been introduced to your project via some other packages’ peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:
"paths": {
   "react": [ "./node_modules/@types/react" ]
 }

Thanks, It works @gaithoben

Sergemuhundu on Feb 24, 2023

I’m running into the same problem.

You can see this issue: https://github.com/oblador/react-native-vector-icons/issues/1405

ildaneta on Jul 25, 2022