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

React-Native wrapping a typed class into functional component for styling

$
0
0

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?


Viewing all articles
Browse latest Browse all 6208

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>