Typescript: How to suppress "No overload matches this call"?

Question

So I have a React Native application that uses Native Base as UI lib and Typescript.

Now there is an Accordion which - as soon its expanded - renders a second (nested) Accordion. The problem is that TypeScript complains:

A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

Which is perfectly fine. But when I add this listKey to my Accordion, TypeScript complains about No overload matches this call.

How can I suppress this warning? Because Native Base doesn't provide listKey as prop for their Accordion.

Here is the code:

imports ...

type Props = {};

const Test: React.FC<Props> = ({}) => {

  const renderNestedAccordion = () => {
    return (
      <View>
        <ComponentWithAccordion></ComponentWithAccordion>
      </View>
    );
  };

  const dataArray = [{content: renderNestedAccordion()}];

  return (
    <Accordion
      listKey={'acc'} // error
      dataArray={dataArray}
    />
  );
};

export default Test;

Answer 1

Quick fix:

You can try //@ts-ignore which should suppress the warning.

For more

Less guilty solution:

If you look at NativeBase type definition for Accordion, you will see that there is no listKey. Under the hood, NativeBase Accordion uses a FlatList. We know from React Native type definition of FlatList extends VirtualizedListProps<ItemT> that has a listKey.

Look at the Accordion implementation we see that FlatList takes all props from Accordion which means all FlatList props should be supported. Therefore Accordion should extend FlatList props. You can add listKey to the Accordion type definition or send a Github issue.

Disclaimer: I have never used Native Base. The above conclusion is made by looking at the code.