S2786: 'View' cannot be used as a JSX component.

[ksielyov]

Environment

Node version: v14.17.5
npm version: v7.21.1
Local ESLint version: v8.14.0 (Currently used)
Global ESLint version: Not found
Operating System: darwin 21.1.0

What parser are you using?

@typescript-eslint/parser

What did you do?

Configuration

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/ban-ts-comment": "off",
        "prettier/prettier": "error"
    },
    "globals": {
        "__DEV__": true
    }
}

import React from 'react';
// @ts-ignore
import DoubleBounce from 'react-native-loader';
import {View} from 'react-native';

const DoubleBounceLoader: React.FC = () => (
  <View>
    <DoubleBounce size={16} color="#3A3A3A" />
  </View>
);

export default DoubleBounceLoader;

What did you expect to happen?

Working eslint configuration

What actually happened?

TS2786: 'View' cannot be used as a JSX component.   Its instance type 'View' is not a valid JSX element.     The types returned by 'render()' are incompatible between these types.       Type 'import("/Users/mikhailkiselyov/WebstormProjects/publife/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.         Type '{}' is not assignable to type 'ReactNode'.

Participation

• I am willing to submit a pull request for this issue.

Additional comments

No response

[aladdin-add]

seems the error was from ts, not eslint?

[mdjermanovic]

TS2786: 'View' cannot be used as a JSX component.

This error is coming from TypeScript, not ESLint.

Maybe these recent discussions could be helpful:

DefinitelyTyped/DefinitelyTyped#59839

https://stackoverflow.com/questions/71831601/ts2786-component-cannot-be-used-as-a-jsx-component

[TalhaBlueEast]

I'm facing the same issue about this error. I add the below code to my package.json file.

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2",
  "graphql": "^16.5.0"
},

Then, Run yarn install on a terminal.

It works for me.

[mcjambi]

i have the same issue, not really an error, but make me confuse!

[fahad0samara]

I have the same problem

[NilsBaumgartner1994]

Same

[DianSSIE]

I had to just make sure the version numbers for:
"@types/react" x.x.x
and
"@types/react-native" y.y.y

match with:
"react": x.x.x
and
"react-native" y.y.y

[ZackKuhn]

1. Paste in package.json file:
   "resolutions": { "@types/react": "17.0.14", "@types/react-dom": "17.0.14" },
2. Run yarn install on terminal.

[DJ-Icebear]

For me the issue was I was importing types explicitly when not needed:
I removed two lines from the package.json:

 "@types/react": "~18.0.0",
 "@types/react-native": "~0.69.1",

[Rafael-Santos-DV]

I added the following dependencies and it solved the problem:

"@types/react-dom": "17.0.14",
"@types/react": "~18.0.0",
"@types/react-native": "~0.69.1",

[juancsaenz]

I had to just make sure the version numbers for: "@types/react" x.x.x and "@types/react-native" y.y.y

match with: "react": x.x.x and "react-native" y.y.y

It solved my problem, thank you.

[GtechHardik]

for me there was wrong version of type script
so
npm install --save-dev @types/react @types/react-dom @types/react-native

solved the issue

[BrianIto]

To add more to this specific topic, I was having this problem with every React Native Built-In Component (like View, ScrollView, TouchableOpacity, etc.);

• Updating to matching types versions didn't worked;
• Removing the explicit @types for react, react-native, react-dom also didn't worked;

for me what solved was @GtechHardik below suggestion:

for me there was wrong version of type script so npm install --save-dev @types/react @types/react-dom @types/react-native

solved the issue

#15802 (comment)

[kosbog]

for me there was wrong version of type script so npm install --save-dev @types/react @types/react-dom @types/react-native

solved the issue

Perfect solution! Thanks!