React Native FlatList, Componentes Estilizados y Typescript

Tengo una batalla histórica en curso con styled-components, FlatList y TypeScript... Hasta ahora he podido hacerlo funcionar con lo siguiente:

const StyledList = styled(FlatList as new () => FlatList<ItemType>)<CustomProps>(props => ({
  .......
}));

Esto funcionó bien hasta que hice una actualización reciente del proyecto y esto rompió este enfoque. Ahora tengo las siguientes versiones de dependencias:

"typescript": "~4.3.5"

"styled-components": "^5.3.3"

"react-native": "0.64.3"

Los errores son así:

Property 'data' does not exist on type 'IntrinsicAttributes & { ref?: Ref<FlatList< ItemType >> | undefined; key?: Key | null | undefined; } & { theme?: DefaultTheme | undefined; } & { ...; } & { ...; }'.

¿Puede alguien ofrecer alguna perspectiva sobre esto, por favor? ¿Qué podría haber cambiado en las versiones recientes de styled-components o react-native para que la solución original dejara de funcionar?

Respuesta #1

import { FlatList, FlatListProps } from 'react-native';
    
const List = styled(FlatList as new (props: FlatListProps<ItemType>) => FlatList<ItemType>)``;

Funciona para mí.

Respuesta #2

Ha pasado un tiempo, pero encontré una manera de hacerlo funcionar con propiedades personalizadas, así como mantener el comportamiento original.

type FlatListContainerProps<T> = FlatListProps<T> & {
  $noBorder?: boolean;
};

const ExtendedFlatList = <T,>({ $noBorder, ...props }: FlatListContainerProps<T>) => {
  return <FlatList {...props} />;
};

export const FlatListContainer = styled(ExtendedFlatList)<FlatListContainerProps<any>>`
  border-radius: 20px;
  border-width: ${({ $noBorder }: FlatListContainerProps<any>) => ($noBorder ? 0 : "1px")};
  border-color: #f2f2f2;
  background-color: "green";
` as unknown as typeof ExtendedFlatList;

Espero que esto sea útil.