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;

Leave a Reply Cancel reply