I have a container that has a scrollview
component nested inside that is also a container. Inside the scrollview container, I am looping through data and then trying to make the children be 2 items per row and also fill in any remaining empty space automatically, however, it will only fill up half the parent container.
I would like the 6 boxes shown in the image to evenly distribute the height and fill in the remaining space in the container.
// React Native Element
return (
<SafeAreaView style={[{ flex: 1 }]}>
<ScrollView
contentContainerStyle={surveyScreenStyles().cardsContainer}
>
<View
style={[surveyScreenStyles().cardsContainer]}
>
{surveyData?.surveys?.map((surveyDetails, i) => (
<Card
key={`suvey-card-${i}`}
mode='elevated'
style={[surveyScreenStyles().cards]}
>
<Card.Title
title={surveyDetails.name}
titleVariant='titleLarge'
subtitle={surveyDetails.summary}
subtitleNumberOfLines={2}
/>
</Card>
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
// css file
{
cardsContainer: {
backgroundColor: "#FFFFFF",
justifyContent: 'space-evenly',
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
padding: 5,
gap: 10
},
cards: {
backgroundColor: "#FFFFFF",
borderRadius: 10,
flexBasis: '45%',
justifyContent: 'center',
padding: 10,
}
}
2
Answers
It looks like the flexWrap might be what is messing this up. I think because of the scroll view that doesn’t work quite how it should.
Here is a solution that doesn’t look as clean as yours but has the desired result:
If you use a flatlist, you can use the
numColumns
prop and thecolumnWrapperStyle
prop to get 2 columns with your desired spacing styles. Then to get the items to take up the remaining height you can use theonLayout
prop to get the height and then divide by 3, since there are 2 items per row:demo