Creating custom components in React Native with TypeScript

Question

I decided to convert my ReactNative project to TypeScript. I'm new to TypeScript and am finding it hard to fix this problem with custom components and inheritance. This is my (scaled down) code

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

interface IMyComponentProps extends React.Props<IMyComponentProps> {
  colWidth?: number;
}

class MyComponent extends Component<IMyComponentProps> {
  getProps() {
    return this.props;
  }
}

class MyButton extends MyComponent {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

I'm getting a red underline on ...this.getProps() in the MyButton component. Also this.props.title and this.props.onPress are not being identified.

Can you please help me with the types I need to define for these two classes.

Thanks

Daniel Rosenwasser · Accepted Answer · 2018-04-29 07:13:52Z

First, you need to declare that a MyButton has more specific props, so MyComponent has to be parameterized:

class MyComponent<P extends IMyComponentProps> extends Component<P> {
  getProps() {
    return this.props
  }
}

Then extend MyComponent correctly and declare its props:

interface IMyButtonProps extends IMyComponentProps {
  colWidth?: number;
  title: string;
  onPress: () => void;
}


class MyButton extends MyComponent<IMyButtonProps> {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

Then, unless you're using refs, which are hard to reason about, don't extend React.Props. Just declare your interfaces as so:

interface IMyComponentProps {
  colWidth?: number;
}
interface IMyButtonProps extends IMyComponentProps {
  title: string;
  onPress: () => void;
}

Altogether now!

i

mport React, { Component } from "react";
import { Button, View } from "react-native";

interface IMyComponentProps {
  colWidth?: number;
}

class MyComponent<P extends IMyComponentProps> extends Component<P> {
  getProps() {
    return this.props
  }
}

interface IMyButtonProps extends IMyComponentProps {
  title: string;
  onPress: () => void;
}

class MyButton extends MyComponent<IMyButtonProps> {
  render() {
    return (
      <View {...this.getProps()}>
        <Button title={this.props.title} onPress={this.props.onPress} />
      </View>
    );
  }
}

Collectives™ on Stack Overflow

Creating custom components in React Native with TypeScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related