Monthly Archives: October 2019

Styled Components FlatList ReactNative CSS problem

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`
width: auto;
height: 200;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
`;
export const Content = styled.View`
flex: 1;
padding: 15px;
`;
export const Title = styled.Text`
color: #333;
font-size: 16px;
font-weight: bold;
margin: 10px 0;
`;
export const Info = styled.Text`
color: #ccc;
font-size: 12px;
margin: 6px 0 6px 15px;
`;
export const Button = styled(DefaultButton)`
margin-top: 10px;
`;
The FlatList:
return (
<Background>
<Container>
<MeetupList
data={subscriptions}
keyExtractor={item=>String(item.id)}
renderItem={({item}) => (
<Meetup
data={item.meetup}
onHandle={() =>handleCancel(item.id)}
buttonText="Cancelar inscrição"
/>
)}
/>
</Container>
</Background>
);
The fix is set the Content flex-shrink to auto in the Content styled component.
export const Content = styled.View`
flex: 1 auto;
padding: 15px;
`;