I don't find the way to type a FlatList in react native
export interface Category { id: string; title: string; bg: string;}export const CATEGORIES: Category[] = [ { id: "c1", title: "Italian", bg: "#f5428d" }];const Item = ({ data }: { data: Category }) => (<View style={styles.item}><Text style={styles.title}>{data.title}</Text></View>);const CategoriesScreen = ({ navigation }: CategoriesScreenProps) => { const renderItem = ({ data, }: { data: Category; }) => <Item data={data} />; return (<FlatList data={CATEGORIES} keyExtractor={(item) => item.id} renderItem={renderItem} numColumns={2}></FlatList> );};
I've got this error in renderItem props:
No overload matches this call. Overload 1 of 2, '(props:FlatListProps | Readonly<FlatListProps>):FlatList', gave the following error.Type '({ data, }: { data: Category; }) => JSX.Element' is not assignable to type 'ListRenderItem'.Types of parameters '__0' and 'info' are incompatible.Property 'data' is missing in type 'ListRenderItemInfo' but required in type '{ data: Category;}'. Overload 2 of 2, '(props: FlatListProps, context:any): FlatList', gave the following error.Type '({ data, }: { data: Category; }) => JSX.Element' is not assignable to type 'ListRenderItem
What's wrong, please?