{"id":358,"date":"2019-10-22T15:45:38","date_gmt":"2019-10-22T15:45:38","guid":{"rendered":"https:\/\/sidroniolima.com.br\/blog\/?p=358"},"modified":"2019-10-22T15:48:10","modified_gmt":"2019-10-22T15:48:10","slug":"styled-components-flatlist-reactnative-css-problem","status":"publish","type":"post","link":"https:\/\/sidroniolima.com.br\/blog\/2019\/10\/22\/styled-components-flatlist-reactnative-css-problem\/","title":{"rendered":"Styled Components FlatList ReactNative CSS problem"},"content":{"rendered":"\n
Tweet<\/a><\/div>\n

Something happens when a FlatList decorated with Styled Components update your data: the CSS of the Content disappears.<\/p>\n

Bellow the original code and then the fix.<\/p>\n

\n
The CSS:<\/div>\n
<\/div>\n
import styled from 'styled-components\/native';<\/code><\/div>\n
import DefaultButton from '~\/components\/Button';<\/code><\/div>\n
\n
export const Container = styled.View`<\/code><\/div>\n
flex: 1;<\/code><\/div>\n
background: #fff;<\/code><\/div>\n
border-radius: 4px;<\/code><\/div>\n
margin-bottom: 10px;<\/code><\/div>\n
`;<\/code><\/div>\n
export const Image = styled.Image`<\/code><\/div>\n
width: auto;<\/code><\/div>\n
height: 200;<\/code><\/div>\n
border-top-left-radius: 4px;<\/code><\/div>\n
border-top-right-radius: 4px;<\/code><\/div>\n
`;<\/code><\/div>\n
export const Content = styled.View`<\/code><\/div>\n
flex: 1;<\/code><\/div>\n
padding: 15px;<\/code><\/div>\n
`;<\/code><\/div>\n
export const Title = styled.Text`<\/code><\/div>\n
color: #333;<\/code><\/div>\n
font-size: 16px;<\/code><\/div>\n
font-weight: bold;<\/code><\/div>\n
margin: 10px 0;<\/code><\/div>\n
`;<\/code><\/div>\n
export const Info = styled.Text`<\/code><\/div>\n
color: #ccc;<\/code><\/div>\n
font-size: 12px;<\/code><\/div>\n
margin: 6px 0 6px 15px;<\/code><\/div>\n
`;<\/code><\/div>\n
export const Button = styled(DefaultButton)`<\/code><\/div>\n
margin-top: 10px;<\/code><\/div>\n
`;<\/code><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
The FlatList:<\/div>\n
<\/div>\n
\n
\n
return (<\/code><\/div>\n
<Background><\/code><\/div>\n
<Container><\/code><\/div>\n
<MeetupList<\/code><\/div>\n
data={subscriptions}<\/code><\/div>\n
keyExtractor={item=>String(item.id)}<\/code><\/div>\n
renderItem={({item}) => (<\/code><\/div>\n
<Meetup<\/code><\/div>\n
data={item.meetup}<\/code><\/div>\n
onHandle={() =>handleCancel(item.id)}<\/code><\/div>\n
buttonText=\"Cancelar inscri\u00e7\u00e3o\"<\/code><\/div>\n
\/><\/code><\/div>\n
)}<\/code><\/div>\n
\/><\/code><\/div>\n
<\/Container><\/code><\/div>\n
<\/Background><\/code><\/div>\n
);<\/code><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
The fix is set the Content flex-shrink to auto in the Content styled component.<\/div>\n
<\/div>\n
\n
export const Content = styled.View`<\/code><\/div>\n
flex: 1 auto<\/span>;<\/code><\/div>\n
padding: 15px;<\/code><\/div>\n
`;<\/code><\/div>\n<\/div>\n
<\/div>\n\n
Tweet<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

Something happens when a FlatList decorated with Styled Components update your data: the CSS of the Content disappears. Bellow the original code and then the fix. The CSS: import styled from ‘styled-components\/native’; import DefaultButton from ‘~\/components\/Button’; export const Container = styled.View` flex: 1; background: #fff; border-radius: 4px; margin-bottom: 10px; `; export const Image = styled.Image` […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[53,52,69],"tags":[88,87,89],"class_list":["post-358","post","type-post","status-publish","format-standard","hentry","category-front-end","category-javascript","category-react-native","tag-flatlist","tag-reactnative","tag-styledcomponents"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":3,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/358\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/358\/revisions\/361"}],"wp:attachment":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/categories?post=358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}