When I*m trying to use an icon from ‘@expo/vector-icons’ I get this error whenever I try to insert it as a child element in a View (or any components accepting a child)
cannot be used as a JSX component.
Its instance type 'Component<IconProps<"search" | "repeat" | "link" | "at" | "key" | "push" | "map" | "filter" | "body" | "code" | "menu" | "time" | "ellipse" | "image" | "stop" | "text" | "alert" | "checkbox" | "radio" | ... 3661 more ... | "md-woman-sharp">, {}, any>' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("C:/Users/user/Projects/rnproject/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'
What does this mean and why doesn’t it work? I can’t even copy paste the example in the docs without getting the same error.
Hey @magink, without seeing your code it’s hard to help you. Ideally seeing your full implementation but even a specific link to the example you mention from the docs would be a start.
If you click on the button to view the example on Snack, you should be able to open the snack in Expo Go. If I try it it works for me.
Also, if I create a new Expo app, run expo install @expo/vector-icons and then copy the contents of App.js from the above snack and paste it in the App.js from the newly created app, overwriting the contents that were created by expo init, then I can run that app in Expo Go and again it works.
Does the above work for you?
If the above works, but your real app does not, perhaps you can see some relevant difference that’s causing the problem in your app. If you still can’t find the problem, please post a small example app that shows the problem.
SOLUTION:
add the following to your package.json and run npm install or yarn:
“resolutions”: {
“@types/react”: “17.0.2”,
“@types/react-dom”: “17.0.2”
},