make child 25% of width of parent flatlist react native - css

Question

I have a flatlist containing between 1 - 4 children.
I want to give each child a width of 25% of the width of the container in this case the flatlist.
I have tried the following, but this results in the children having a width of 0.
How do i fix this.
<FlatList horizontal={true} style={welcome_style.favs_list} data={this.state.favorites} renderItem={(data: ListRenderItemInfo<GymSummary>) => {
return this.render_fav_gym(data.item);
}}></FlatList>
private render_fav_gym(data: GymSummary): JSX.Element {
return (
<TouchableOpacity style={{ width: "25%", aspectRatio: 1, padding: 10, backgroundColor: "blue", borderRadius: 14, marginHorizontal: 5 }}></TouchableOpacity>
);
}
const welcome_style = StyleSheet.create({
favs_list: {
width: "100%",
flex: 0,
backgroundColor: "red"
}
});

Answer 1

If the list has 1-4 items, and you always want all the items on screen, I would not recommend a FlatList. FlatLists are optimized for scrolling through long lists of items.
A simple View and the gap style should work for you. Here's one way you could do it. I added some Text inside the buttons, and you will probably have to change the styles to get the look you want.
<View style={welcome_style.favs_list}>
{this.state.favorites.map((_, index) => (
<TouchableOpacity style={welcome_style.button}>
<Text>{index + 1}</Text>
</TouchableOpacity>
)}
</View>
const welcome_style = StyleSheet.create({
favs_list: {
width: "100%",
backgroundColor: "red",
flexDirection: 'row',
gap: 5, // puts this much space between children
height: 48, // however tall you want the buttons to be here, plus padding
},
button: {
width: '25%',
aspectRatio: 1,
padding: 10,
backgroundColor: "blue",
borderRadius: 14,
justifyContent: 'center',
alignItems: 'center',
},
});