Use styled-components + ReactNative's FlatList in TypeScript

To use styled-components + FlatList, we have to write like this:

interface User {
  id: number
  name: string
}

const StyledFlatList = styled(FlatList as new () => FlatList<User>)`
  background-color: #f7f7f7;
`

[edited]
Finally, I added my workaround. I hope someone solve the issue.

https://github.com/styled-components/styled-components/issues/1803#issuecomment-497323287
[/edited]

This is because styled.FlatList does not support by typing definition of styled-components.

see: https://github.com/styled-components/styled-components/issues/1294

Ref: https://github.com/styled-components/styled-components/issues/1803#issuecomment-407332173

Comments

[Shota Senga]

Thank you so much! This solution works on @emotion/native with this type definition as well!!

[Kay Gosho]

Thanks for the information!

[Nguyễn Trọng Vĩnh]

Thank you very much. I'm just stuck on this.

[Filipe Ribeiro]

Thank you bro, you help me a lot!

[Kay Gosho]

Thanks for your comment!

[Joao Victor Farias]

Thank you! It helped me so much!

[Kay Gosho]

Thanks for your comment!

[Douglas Tesch]

Thank you my friend!

[Michel dos Santos Kuguio]

thanks!

[Kay Gosho]

Thanks for your comment!

[Marcelo Amorim]

Nice! Still working...

[Gabriel Felipe]

Thank you so much! I was already getting angry for not being able to put the types correctly 😅

[Kay Gosho]

Thank you for your feedback :)