DEV Community 👩‍💻👨‍💻

Kay Gosho
Kay Gosho

Posted on

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;
`
Enter fullscreen mode Exit fullscreen mode

[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

Top comments (13)

Collapse
 
shotasenga profile image
Shota Senga

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

Collapse
 
acro5piano profile image
Kay Gosho Author

Thanks for the information!

Collapse
 
ribeirofilipe profile image
Filipe Ribeiro

Thank you bro, you help me a lot!

Collapse
 
acro5piano profile image
Kay Gosho Author

Thanks for your comment!

Collapse
 
ntvinhit profile image
Nguyễn Trọng Vĩnh

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

Collapse
 
dtesch9 profile image
Douglas Tesch

Thank you my friend!

Collapse
 
jvictorfarias profile image
Joao Victor Farias

Thank you! It helped me so much!

Collapse
 
acro5piano profile image
Kay Gosho Author

Thanks for your comment!

Collapse
 
gabrielfcs profile image
Gabriel Felipe

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

Collapse
 
acro5piano profile image
Kay Gosho Author

Thank you for your feedback :)

Collapse
 
misaku profile image
Michel dos Santos Kuguio

thanks!

Collapse
 
acro5piano profile image
Kay Gosho Author

Thanks for your comment!

Collapse
 
marceloamorim profile image
Marcelo Amorim

Nice! Still working...

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠