How to fix this error with Props (ReactNative + Typescript)

2
votes

I'm developing my first app in react-native with TS and when I try to use my component with props, I got some error on my IDE but the application work with Expo....

The error is on "ButtonPreset"

import React from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import ButtonPreset from "./Components/reusable/ButtonPreset";

export interface ButtonPrefab {
  _pressAction(): void;
  pressAction(): void;
}

export default class App extends React.Component {
  _pressAction = () => {
    console.log("Hello");
  }

  title: string = "Se connecter";

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Splizi</Text>
        </View>
        <View style={styles.login}>
          <TextInput style={styles.input} placeholder="E-mail" />
          <TextInput style={styles.input} placeholder="Mot de passe" />
          <ButtonPreset pressAction={this._pressAction} title={this.title} />
        </View>
      </View>
    );
  }
}


import React from "react";
import { StyleSheet, Button } from "react-native";

type ButtonPresetProps = {
  pressAction: () => void;
  title: string
}

class ButtonPreset extends React.Component<ButtonPresetProps> {
  render() {
    return <Button onPress={this.props.pressAction} title={this.props.title} />;
  }
}

const styles = StyleSheet.create({
  // input: {
  //     marginLeft: 40,
  //     marginRight: 40,
  //     marginBottom: 20,
  //     height: 60,
  //     borderRadius: 50,
  //     borderWidth: 0.5,
  //     paddingRight: 20,
  //     paddingLeft: 20,
  //     fontSize: 18,
  //     borderColor: '#d6d6d6',
  //     backgroundColor: '#ffffff',
  // }
});

export default ButtonPreset;

I am getting the below error. Please help me to solve this.

Type '{ pressAction: () => void; title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'. Property 'pressAction' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

2
typescriptreact-native
Please also include the code for the ButtonPreset component. – Shaun Luttin
@ShaunLuttin Done, thanks – Dayniight

2 Answers

1
votes

Based on the error message, ButtonPreset needs an appropriate type for its props. 

type ButtonPresetProps = {
  pressAction: () => void;
  title: string;
};

class ButtonPreset extends React.Component<ButtonPresetProps> {
  // other code omitted
}
0
votes
export interface ButtonPrefab {
    _pressAction:() => void;
    pressAction:() => void;
}

export default class App extends React.Component<ButtonPrefab> {}

Try this.