TypeScript с React Native: создание пользовательских компонентов

Question

Я создал пользовательский компонент, унаследовав компонент React следующим образом:

import React, { Component as ReactComponent, ReactElement } from "react";
import { Button as ReactButton, View } from "react-native";

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

class MyComponent extends ReactComponent<IMyComponentProps> {
  getProps() { //dummy function to check if subClass can access this function
    return this.props;
  }

  renderChildren() { //adding custom props to child MyComponents
    return React.Children.map(this.props.children, (child: ReactElement<any>) => {
      const isMyComponent: boolean =
        child && //sometimes child is undefined
        child.type &&
        typeof child.type !== "string" &&
        React.Component.prototype.isPrototypeOf(child.type.prototype) &&
        child.type.prototype instanceof MyComponent;

      if (isMyComponent) {
        return React.cloneElement(child, { isChild: true }); //newProps will get merged with the existing props
      } else {
        return child;
      }
    });
  }

  render() {
    return this.renderChildren();
  }
}

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

Я получаю следующую ошибку в методе рендеринга класса Button:

Свойство 'render' в типе 'Button' нельзя назначить одному и тому же свойству в базовом типе 'MyComponent'. Тип '() => Элемент' нельзя назначить типу () => ReactElement [] '. Тип «Элемент» нельзя назначить типу «ReactElement []». Свойство «include» отсутствует в типе «Element».

Как я могу это исправить? Спасибо