typescript - React-Native envolviendo una clase tipada en un componente funcional para el estilo

Estoy envolviendo componentes en componentes funcionales para realizar un estilo consistente. Esto funciona bastante bien la mayor parte del tiempo, pero si el componente envuelto tiene genéricos en sus propiedades, las cosas se ponen un poco complicadas. Específicamente, no puedo entender del todo el componente FlatList y cómo definir el 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)

Esto básicamente coincide con lo que react-native-paper recomienda aquí https://callstack.github.io/react-native-paper/theming.html#customizing-all-instances-of-a-component. Aunque esto se compila sin errores, se pierde la información de tipo si estoy usando este componente en mi código.

   <MyFlatList
      data={items}
      keyExtractor={item => item.id}
      renderItem={({ item }) => renderItem(item)}
    />

El item en este caso es de tipo unknown, mientras que en un FlatList simple el tipo se deriva correctamente. Supongo que el problema es ItemT extends {}, pero no he encontrado otra manera de permitir que el llamador defina el ItemT. ¿Alguna idea?

Respuesta #1

Llego un poco tarde a la fiesta, pero hoy tuve un problema similar. Durante la investigación me encontré con algo llamado "Generic forwardRef" que me ayudó a envolver y tipar el componente FlatList de react-native.

Puedes leer más sobre ello aquí

El tipo de tu artículo debería inferirse correctamente, si envuelves tu componente de esta manera:

interface MyFlatListProps<ItemT> extends FlatListProps<ItemT> {
    theme: Theme
}

function MyFlatList<ItemT>(props: MyFlatListProps<ItemT>) {
    const { theme } = props

    return <FlatList {...props} contentContainerStyle={{ backgroundColor: theme.colors.background }} />
}

exportar por defecto conTema(MiListaPlana)