‘View’ cannot be used as a JSX component.

We met ton of issues, when trying to upgrade react of KickGoing App.
Today I will share solution to one of them.

You may see this error when attempting to migrate your project to higher version of react-native.

This is caused by difference of version of @types/react.

Maybe you are using many react or react-native libraries.
@types/react could be installed by the libraries even if you removed it from package.json.
Each library would use different version of @types/react.
So lint confuses which type to use.

Jump to definition of View and super types.

View — ViewBase — ViewComponent — React.Component

When you jump to React.Component, you can see @types/react-native/node_modules/@types/react/index.d.ts.

Go to top of index.d.ts, there will be this line.

// Type definitions for React 17.0
// Project: http://facebook.github.io/react/

It’s mean that this is type to version 17 of React.

Open another {your project dir}/node_modules/@types/react/index.d.ts
and go to top line.

You may see different version of React like this.

// Type definitions for React 18.0

To solve this problem, add new property ‘resolutions’ into package.json.

"resolutions": {
  "@types/react": "17.0.2",
},

And yarn install again.

You can’t see the error anymore.

If your IDE still complains to you, also add @types/react-native into resolutions.

References

S2786: 'View' cannot be used as a JSX component. · Issue #15802 · eslint/eslint

Yarn