I have an article component to which I pass a ListHeaderComponent which is a props of FlatListProps like this:

<Article
    article={article}
    ListHeaderComponent={<HomeBackgroundImage />}
/>

In Article.tsx I have set the following type:

type Props = {
    article: ArticleType;
} & Omit<FlatListProps, 'data' | 'renderItem' | 'showsVerticalScrollIndicator'>;

However, I get the following error:

Generic type 'FlatListProps<ItemT>' requires 1 type argument(s).

But I am not quite sure what am I supposed to pass as an argument.

type Props = {
    article: ArticleType;
} & Omit<FlatListProps<any>, 'data' | 'renderItem' | 'showsVerticalScrollIndicator'>;

This removes the error, however, I start getting the error the item explicitly has any type in the FlatList:

const Article: FunctionComponent<Props> = ({ article, ...rest }) => {
    return (
        <FlatList
            data={article.sections}
            renderItem={({ item: section, index }) => {
                const firstCard = section.items.find((item) => {
                    return item.contentType !== 'heading' && item.contentType !== 'body';
                });
                const indexOfFirstCard = section.items.indexOf(firstCard!);
                const sectionType = firstCard?.contentType;

                return (
                    <Section isFirst={index === 0} sectionType={sectionType}>
                        {section.items.map((item, idx) => (
                            <Item key={idx} item={item} itemIndex={idx} indexOfFirstCard={indexOfFirstCard} />
                        ))}
                    </Section>
                );
            }}
            showsVerticalScrollIndicator={false}
            {...rest}
        />
    );
};

CodePudding user response：

From looking at the react-native code for FlatList, it seems the ItemT in FlatListProps<ItemT> is the type of the element in the data array. So, in your case it would be the type of an article.sections element, which can be written as ArticleType['sections'][number].