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