Recently delving into the world of react native, I encountered an issue with aligning card images side by side using react-native-elements. My goal is to have two rows on phones and three rows on tablets. However, despite setting the flex-direction to row in my code, the cards are aligned without any space between them, appearing as a single column on my Iphone 12. Could someone please review my code and point out what is going wrong?
Specifically, the issue lies in the card-image element:
<View style={styles.secondPartOfDisplay}>
{categories.map((c,i) => {
return (
<View key={i} style={{width: 200, height: 150, flexDirection: 'row'}}>
<Card.Image >
<Image
style={{width:200,height:150}}
resizeMode="cover"
source={c.imageSource}
/>
</Card.Image>
</View>
)
})}
</View>
The styles being used are as follows:
secondPartOfDisplay: {
paddingTop: 30,
display:'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: "space-between"
},
Here is how it appears on phone:
https://i.sstatic.net/395cO.png
And this is how it looks on an iPad: