CODEWITHSUNDEEP
reactjstypescriptreact-nativereact-props
Kartik
Kartik

Reputation: 7917

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.

Upvotes: 1

Views: 406

Answers (1)

Nafiz Ahmed
Nafiz Ahmed

Reputation: 567

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

interface EnhancedSectionListProps extends SectionListProps {
  enhancedProp: string;
}

Upvotes: 1

Related Questions