Question 278321 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    your code is fine but it is on jsx(JavaScript XML) you need to code in tsx(TypeScript XML)

    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(): JSX.Element {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

    Make sure that your file extension is ".tsx"

    Refer to this for more details What is the difference between .js, .tsx and .jsx in React?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search