React Native FlatList, Styled Components and Typescript

user_10662497 0
Viewed 438

I have a historic ongoing battle with styled-components , FlatList and typescript ... Up until now I've been able to make it work with the following :

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

This worked fine until I did a recent project upgrade and it's broken this approach. I now have the following dependency versions:

"typescript": "~4.3.5"

"styled-components": "^5.3.3"

"react-native": "0.64.3"

The errors are like this :

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

Can anyone offer any insight into this please? What might have changed in recent versions of styled-components or react-native to prevent the original workaround from working?

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

It works for me.

user_125072960
Related