I am wrapping components into functional components in order to perform consistent styling. This works pretty good most of the time, but if the wrapped component has generics in their properties things get a little messy. Specifically I cant wrap my head around the FlatList
component and how to define the ItemT
.
type Props<ItemT> = React.ComponentProps<typeof FlatList> & {
theme: Theme
}
const MyFlatList = <ItemT extends {}>(props: Props<ItemT>) => {
const { theme } = props
return <FlatList {...props} contentContainerStyle={{ backgroundColor: theme.colors.background }} />
}
export default withTheme(MyFlatList)
This basically matches what react-native-paper
recommends here https://callstack.github.io/react-native-paper/theming.html#customizing-all-instances-of-a-component.
While this compiles without errors the type information is lost, if I am using this component in my code.
<MyFlatList
data={items}
keyExtractor={item => item.id}
renderItem={({ item }) => renderItem(item)}
/>
The item
in this case is of type unknown
whereas in plain FlatList
the type is properly derived. I guess the problem is ItemT extends {}
, but I haven't found any other way to let the caller define the ItemT
. Any thought?