Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

TSLINT Error: Property 'Component' does not exist on type 'typeof React'

$
0
0

I downloaded the [react-native-redux-typescript-boilerplate]: https://reactnativeseed.com/ . The project runs smoothly in an android emulator. However, there are loads of tslint errors especially in the JSX syntax (i.e., .tsx files). One major one is https://reactnativeseed.com/

I use webstrom as my code editor, and I crossed checked the version of typescript being used by webstrom and the project. There are the same.

These are the versions:1. Typescript - 2.6.22. react-native - 0.59.63. react - 16.2.04. react-redux - 5.0.65. @types/react - "^16.8.14"6. @types/react-native - "^0.47.7"

Is there anything else I need to check for?

I have also installed ["tslint-fix": "^0.1.3"]: https://www.npmjs.com/package/tslint-fix

ex: index.tsx

import * as React from "react";import { Item, Input, Icon, Form, Toast } from "native-base";import { Field, reduxForm } from "redux-form";import Login from "../../stories/screens/Login";const required = value => (value ? undefined : "Required");const maxLength = max => value => (value && value.length > max ? `Must be ${max} characters or less` : undefined);const maxLength15 = maxLength(15);const minLength = min => value => (value && value.length < min ? `Must be ${min} characters or more` : undefined);const minLength8 = minLength(8);const email = value =>    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? "Invalid email address" : undefined;const alphaNumeric = value => (value && /[^a-zA-Z0-9 ]/i.test(value) ? "Only alphanumeric characters" : undefined);export interface Props {    navigation: any;    valid: boolean;}export interface State {}class LoginForm extends React.Component<Props, State> {    textInput: any;    renderInput({ input, meta: { touched, error } }) {        return (<Item error={error && touched}><Icon active name={input.name === "email" ? "person" : "unlock"} /><Input                    ref={c => (this.textInput = c)}                    placeholder={input.name === "email" ? "Email" : "Password"}                    secureTextEntry={input.name === "password" ? true : false}                    {...input}                /></Item>        );    }    login() {        if (this.props.valid) {            this.props.navigation.navigate("Drawer");        } else {            Toast.show({                text: "Enter Valid Username & password!",                duration: 2000,                position: "top",                textStyle: { textAlign: "center" },            });        }    }    render() {        const form = (<Form><Field name="email" component={this.renderInput} validate={[email, required]} /><Field                    name="password"                    component={this.renderInput}                    validate={[alphaNumeric, minLength8, maxLength15, required]}                /></Form>        );        return <Login loginForm={form} onLogin={() => this.login()} />;    }}const LoginContainer = reduxForm({    form: "login",})(LoginForm);export default LoginContainer;

in the above file in the render() a lot of errors are shown.some of it are:1. Property 'Component' does not exist on type 'typeof React'.2. JSX element type 'Item' is not a constructor function for JSX elements. Property 'render' is missing in type 'Item'.and many more similar one.


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>