React Native Elements cannot be used as a JSX component - Typescript

user_13938037 0
Viewed 78

'Text' cannot be used as a JSX component.

Im using the Text elements as example but it happens for all react native elements.

Code example:


  return (
    <>
      <TechnicianDetailCard technicianData={technicianData} />
      <TouchableOpacity
        onPress={() => {
          saveContact();
        }}
      >
        <Text>Add To contacts</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => {
          copyPhoneNumber();
        }}
      >
        <Text>Copy Phone Number</Text>
      </TouchableOpacity>
    </>
  );

Is there any solution to this?

react-native typescript
2 Answers

First, check if all the files that contain some JSX are named with a .tsx extension. Second, check the compilerOptions of your tsconfig.json in the root of your project. It should contain something similar to the following according to the react-native documentation.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Both steps are documented here and here.

If the above does not apply to you, then try to update your @types/react-native. If you are using npm, then this works as follows.

npm install --save @types/react-native

If you are using yarn, then this works as follows.

yarn add @types/react-native
user_149692810

The problem was that the project was taking the @react-native-types from the another node_modules project

user_139380370
Related