I'm new to Typescript and am trying to implement it in my React Native Expo, but I'm getting the following error:
[ts] JSX element type 'View' is not a constructor function for JSX elements. Property 'render' is missing in type 'View'.
[ts] JSX element class does not support attributes because it does not have a'props' property.
and
[ts] JSX element type 'Text' is not a constructor function for JSX elements. Property 'render' is missing in type 'Text'.
[ts] JSX element class does not support attributes because it does not have a'props' property.
I have a very simple code:
import React from 'react'import { View, Text, StyleSheet,} from 'react-native'const Main = () => { return (<View style={styles.container}><Text>Main Screen</Text></View> )}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }})export default Main
package.json
"dependencies": {"react": "16.9.0","react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz", },"devDependencies": {"@babel/core": "^7.0.0","@types/jest": "^25.2.1","@types/react": "^16.9.32","@types/react-native": "^0.62.1","@types/react-test-renderer": "^16.9.2","babel-preset-expo": "^8.1.0","typescript": "^3.8.3" },
For tsconfig.js
, I've tried the following two:
{"compilerOptions": {"allowSyntheticDefaultImports": true,"jsx": "react-native","lib": ["dom", "esnext"],"moduleResolution": "node","noEmit": true,"skipLibCheck": true },"exclude": ["node_modules","babel.config.js","metro.config.js","jest.config.js" ]}
or
{"compilerOptions": {"allowJs": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"isolatedModules": true,"jsx": "react","lib": ["es6"],"moduleResolution": "node","noEmit": true,"strict": true,"target": "esnext" },"exclude": ["node_modules","babel.config.js","metro.config.js","jest.config.js" ]}
I've tried rm -rf node_modules && rm yarn.lock && yarn
and rebooting VSC as well.