Kay Gosho

Posted on May 30, 2019

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.

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

Top comments (13)

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

Thanks for the information!

Thank you bro, you help me a lot!

Thanks for your comment!

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

Thank you my friend!

Thank you! It helped me so much!

Thanks for your comment!

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

Thank you for your feedback :)

thanks!

Thanks for your comment!

Nice! Still working...