How to make cards in FlatList the same height - css

Question

I am trying to make cards in a FlatList the same height, although they each contain different amounts of content.
I have tried wrapping the FlatList in a container using the flex flex-row items-stretch, but I am unable to get this to work.
How can I achieve this?
// Card within FlatList
<View className="mr-4">
<View className="flex-1">
<View className="relative inline-block w-[260px]">
<View className="relative flex h-[144px] w-full items-center justify-center overflow-hidden rounded-xl">
<Image
className="object-cover h-full w-full"
alt={title}
source={{
uri: image,
}}
/>
<View className="">
<View className="pt-2 pb-2 mx-1">
<Text className="text-lg font-semibold text-gray-900">
{title}
</Text>
</View>
<View className="pb-2">
<Text className="text-gray-500">{description}</Text>
</View>
<View className="">
<Button title="Submit" />
</View>
</View>
</View>
</View>
</View>

Answer 1

I would try something along the lines of this:
<View className="mr-4">
<View className="flex-1">
<View className="relative inline-block w-[260px]">
<View style={{height: 144, alignItems: 'stretch', justifyContent: 'center'}} className="relative flex w-full items-center overflow-hidden rounded-xl">
<Image
className="object-cover h-full w-full"
alt={title}
source={{
uri: image,
}}
/>
<View className="">
<View className="pt-2 pb-2 mx-1">
<Text className="text-lg font-semibold text-gray-900">
{title}
</Text>
</View>
<View className="pb-2">
<Text className="text-gray-500">{description}</Text>
</View>
<View className="">
<Button title="Submit" />
</View>
</View>
</View>
</View>
</View>
Instead of using 'className' you should use style.
<View style={{height: 144, alignItems: 'stretch', justifyContent: 'center'}} className="relative flex w-full items-center overflow-hidden rounded-xl">
This should make the card 144px height, also you can stretch the items so they are the same height for all the items in the FlatList, and this should center the card in view container.