make child 25% of width of parent flatlist react native

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',
    },
});