type 'typeof Icon' is not a valid JSX element type

[Farzin-Firoozi]

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

Environment

This issue happens in code. here's an screenshot:

Description

After upgrading RN to version 0.72.5 this issue happened. here's my package.json:

{
 ...  
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.5",
    "react-native-svg": "^13.14.0",
    "react-native-vector-icons": "^10.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.0",
    "@babel/preset-env": "^7.22.20",
    "@babel/runtime": "^7.23.1",
    "@react-native-community/eslint-config": "^3.2.0",
    "@react-native/metro-config": "^0.73.1",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.5",
    "@types/react-test-renderer": "^18.0.3",
    "babel-jest": "^29.7.0",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.50.0",
    "eslint-plugin-unused-imports": "^3.0.0",
    "jest": "^29.7.0",
    "metro-react-native-babel-preset": "^0.77.0",
    "prettier": "^3.0.3",
    "react-native-svg-transformer": "^1.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.2.2",
    "@types/react": "^18.2.28",
    "@types/react-native": "^0.72.3",
    "@types/react-native-vector-icons": "^6.4.15"
  },
...   
}

[JimTeva]

The only workaround I found was to do this: Replace this

import IonIcon from 'react-native-vector-icons/IonIcons';

With this

const IonIcon = require('react-native-vector-icons/IonIcons').default as React.ElementType;

[Farzin-Firoozi]

Any updates on this? @oblador

[johnf]

@Farzin-Firoozi @JimTeva Can you provide a reproducible sample repository? I can't duplicate this.

[hieuminh1810]

hi, Is this issue fixed?

[ShivamJoker]

I also have the same type error.

I fixed it with:

import _IonIcon from 'react-native-vector-icons/Ionicons';

const IonIcon = _IonIcon as React.ElementType;

[johnf]

@hieuminh1810 @ShivamJoker Can you provide a sample repo with this issue? I haven't been able to replicate it.

[ShivamJoker]

@johnf you can checkout my repo - https://github.com/ShivamJoker/SQL-Play/blob/d025925b29f119627a698bcd122e7ff9ba46e81b/src/component/ShortcutsBar.tsx#L4

I am not sure if tsconfig needs to be updated.

[TomNes94]

I experienced the same thing, it's gotta do something with @types/react.

[hieuminh1810]

I tried to remove node_module, yarn.lock. then update "@types/react": "18.2.39", "@types/react-native": "^0.72.7" and it work

[andreialecu]

This is a mismatch between various @types/react versions installed by various packages.

I'm using yarn 3 and I was able to fix it by running yarn dedupe

[johnf]

@andreialecu has nailed this, please reopen if that doesn't solve it

[techgerm]

In my case yarn already executes yarn dedupe automatically so that didn't solve the problem.

What solved the problem for me was forcing the resolution in my package.json like so:

"resolutions": {
    "@types/react": "18.2.45"
  }

[SMKH-PRO]

same for me and yarn dedupe doesnt help

[Farzin-Firoozi]

I tried to remove node_module, yarn.lock. then update "@types/react": "18.2.39", "@types/react-native": "^0.72.7" and it work

This works like a charm ✨❤️