CODEWITHSUNDEEP
javascriptreactjstypescriptreact-native
Garry
Garry

Reputation: 33

React Native / Expo / Typescript: JSX element type 'Text' does not have any construct or call signatures.ts (2604)

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

Upvotes: 1

Views: 435

Answers (1)

kind user
kind user

Reputation: 41893

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

I wasn't even able to find the default export in react-native package, it's not listed in the react-native docs as well.

If the Text component would be exported from the react-native package with

export default Text;

you would be able then to import it as you actually did. However since it's exported with a named export

export { Text };

it can't be imported with default keyword since it's not a default export.

More information about react-native components: https://reactnative.dev/docs/text

Upvotes: 3

Related Questions