React-native: TS2786: View cannot be used as a JSX component

Issue

I'm new to the react and react-native world. My configuration files are as follows:

package.json

{
  "name": "TEST",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "eslint . **/*.ts *.tsx"
  },
  "dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@expo/webpack-config": "^19.0.0",
    "@tsconfig/react-native": "^3.0.2",
    "@types/jest": "^29.5.7",
    "@types/react": "^18.2.34",
    "@types/react-dom": "^18.2.14",
    "@types/react-native": "^0.72.5",
    "@types/react-test-renderer": "^18.0.5",
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.52.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-native": "^4.1.0",
    "prettier": "^3.0.3",
    "react-native-web": "~0.19.6",
    "typescript": "^5.2.2"
  },
  "resolutions": {
    "@types/react": "17.0.14",
    "@types/react-dom": "17.0.14"
  },
  "private": true,
  "license": "MIT"
}

tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "sourceMap": true,
    "outDir": "dist",
    "target": "es2020",
    "module": "esnext",
    "lib": ["es2021", "dom"],
    "jsx": "react-native",
    "esModuleInterop": true,
    "paths": {
      "@/*": [
        "src/*"
      ],
      "react": [ "./node_modules/@types/react" ]
    },
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "types": ["react-native"],
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ],
}

I copied the following piece of code in react-native into my App.tsx file to verify that everything is working correctly:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

and I have the following errors:

• TS2607: JSX element class does not support attributes because it does not have a  props  property.
• TS2786:  Text  cannot be used as a JSX component.
• TS2786:  View  cannot be used as a JSX component.

I have already tried most of the solutions I found around the web, on stackoverflow and on reddit, but none of them solved my problem.

In particular I tried to:

• Added "resolutions": { "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0" }, to my package.json and launched yarn install (after deleting node_modules and yarn.lock)
• I tried to put the same version (18.2.X) to @types/react, @types/react-dom, react, react-dom)
• Added "jsx": "react-native" and "paths": { "react": [ "./node_modules/@types/react" ] } to my tsconfig.json
• Wrap the component in App with a React fragment (<React.Fragment> </React.Fragment>) or a empty tap (<> </>)
• I ran yarn add @types/react@latest @types/react-dom@latest --dev and yarn add react@latest react-dom@latest (after deleting node_modules and yarn.lock)

I don't know what else I tried, but unfortunately I still didn't find a solution. All of this is quite discouraging for those approaching a new technology for the first time.

Solution

I finally found the bug! The problem is in the tsconfig.json because only the files inside src/ are included in the "include":[] property but App.tsx must be in the root of the project so it wasn't considered!

Answered By - Elidor00