Search code examples
reactjstypescriptreact-nativereact-props

How to inherit react SectionList prop type in typescript?

I am creating a wrapper around SectionList, which should take all props that SectionList takes, plus my custom props. How can I configure typescript for that?

Here's my attempt:

import React from 'react';
import { SafeAreaView, SectionList } from 'react-native';

interface EnhancedSectionListProps {
  ...SectionListProps;   // this obviously won't compile, but shows what I'm trying to achieve
  enhancedProp: string;
}

export const EnhancedSectionList = (props: EnhancedSectionListProps) => {
  return (
    <SafeAreaView>
      <SectionList {...props} />
      // use my `enhancedProp` here
    </SafeAreaView>
  );
};

PS: We are not using the prop-types library.

Solution

  • To accomplish the task, you will need to extend the interface. For example:

    interface EnhancedSectionListProps extends SectionListProps {
  enhancedProp: string;
}