SO community,
I can't figure out the correct type definition for an RN FlatList styled with Styled Components in Typescript
So I have type IProduct
like that
interface IProduct { id: string; name: string;}
and I define the types for the FlatList
like that
<FlatList data={products} renderItem={({ item }: { item: IProduct }) => (<SomeComponent item={item} /> )} keyExtractor={(item: IProduct) => item.id}/>
everything works fine. Typescript does not complain but as soon as I want to style the FlatList
like that
const StyledFlatList = styled.FlatList` background-color: 'white';`;<StyledFlatList data={products} renderItem={({ item }: { item: IProduct }) => (<SomeComponent item={item} /> )} keyExtractor={(item: IProduct) => item.id}/>
I get lots of Typescript errors
No overload matches this call. Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '({ item }: { item: IProduct; }) => JSX.Element' is not assignable to type 'ListRenderItem<unknown>'. Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>): ReactElement<StyledComponentPropsWithAs<typeof FlatList, DefaultTheme, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error. Type '(item: IProduct) => string' is not assignable to type '(item: unknown, index: number) => string'.ts(2769)index.d.ts(4218, 5): The expected type comes from property 'keyExtractor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<FlatListProps<unknown> & RefAttributes<FlatList<unknown>>, "ref" | "data" | "style" | "ItemSeparatorComponent" | ... 141 more ... | "key"> & Partial<...>, "ref" | ... 144 more ... | "key"> & { ...; } & { ...; } & { ...; }'index.d.ts(4218, 5): The expected type comes from property 'keyExtractor' which is declared here on type 'IntrinsicAttributes & Pick<Pick<FlatListProps<unknown> & RefAttributes<FlatList<unknown>>, "ref" | "data" | "style" | "ItemSeparatorComponent" | ... 141 more ... | "key"> & Partial<...>, "ref" | ... 144 more ... | "key"> & { ...; } & { ...; } & { ...; }'
Can someone tell me how to fix that error?