Rendering equal width buttons in React Native

Question

I want to render 7 buttons in a row with equal width to fill up all the available space horizontally.

render() {
    return (
        <FlatList
            data={this.state.days}
            renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
            keyExtractor={item => item.getDate().toString()}
            horizontal={true}
            style={styles.list}
        />
    );
}

const styles = StyleSheet.create({
    list: {
        display: 'flex'
    },
    button: {
        flex: 1
    }
});

They are inside a flatlist, wrapped in a view because I cannot style buttons directly. In regular flexbox in an HTML page this approach works.

This what I get in React Native:

Maybe there are some flatlist behaviour I'm not familiar with?

Answer 1

I got the same issue, I have added View component cover for each Button like the code below:

<View style={{flexDirection:"row"}}>
    <View  style={{flex:1}}>
        <Button title="Add"  />
    </View>
    <View  style={{flex:1}}>
        <Button title="Clear"  />
    </View>
    //....
</View>

Answer 2

First of all when you are styling in react native everything is already in flex so you don't have to do display : flex

If you want to render 7 buttons with the same width in a row make sure that all of them have the same parent. Then use flex:1 in each one of them.

What is happening when you do flex:1 when you put a number in front of flex in your styles in this particular situation it divides your parent into those many parts and give it to the child.

So all your button will have 1/7th of the width. If you put flex:2 in one of the styles then that button will have 2/7th of the width and the rest will have 1/7th.

Please feel free to ask for more clarity on the above said.