Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React native typescript how to type FlatList

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles