Home > front end >  React Native / Expo / Typescript: JSX element type 'Text' does not have any construct or c
React Native / Expo / Typescript: JSX element type 'Text' does not have any construct or c

Time:11-12

Can anybody help me on my early journey using React Native and Expo?

JSX element type 'Text' does not have any construct or call signatures.ts(2604)

App.tsx

import { StyleSheet, Text, View } from 'react-native';
import FrontCard from './components/FrontCard';

const App = () => {
  return (
    <View style={styles.container}>
      <FrontCard />
    </View>
  );
}

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

export default App;

FrontCard.tsx

import React from 'react'
import Text, { View } from 'react-native'

const FrontCard: React.FC = () => {
  return (
    <View>
      <Text>test</Text>
    </View>
  )
}

export default FrontCard;

package.json

{
  "dependencies": {
    "expo": "^46.0.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.4",
    "react-native-web": "~0.18.7"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@types/react": "~18.0.0",
    "@types/react-native": "~0.69.1",
    "typescript": "^4.6.3"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "version": "1.0.0",
  "private": true,
  "name": "canumind"
}

I have tried a few different things mentioned in search results from: https://www.google.com/search?q=JSX element type does not have any construct or call signatures.ts (2604)&rlz=1C1PRFI_enGB834GB834&sxsrf=ALiCzsbu2XjELqIQ0dOLQwdnq3sAj_g7PA:1668253602337&source=lnt&tbs=qdr:y&sa=X&ved=2ahUKEwiF8fL6yKj7AhUJZMAKHRf0CqIQpwV6BAgBEBo&biw=1120&bih=972&dpr=1

CodePudding user response:

Text is not a default export, it's a named export.

import Text, { View } from 'react-native'; // wrong

import { Text, View } from 'react-native'; // correct

More info: https://reactnative.dev/docs/text

  • Related