I'm trying to make 2 columns that contain buttons, I tried with flex direction 'row' but this happened

it supposed to be look like this

is there any other way to do it?

var rows = [], columns = [];
var i = 0;

buttons.forEach((e, idx) => {
    rows.push(e);
    i++;

    if (i === 2 || idx === buttons.length - 1) {
        i = 0;
        columns.push(
            <View key={ idx } style = {{ flex: 1, flexDirection: 'row' }}>
                { rows }
            </View>
        );
        rows = [];
        i = 0;
    }
});

return (
    <View style = {{ flex: 1, margin: normalize(20) }} >
        { columns }
    </View>
);

I'm trying to make 2 columns that contain buttons, I tried with flex direction 'row' but this happened

it supposed to be look like this

is there any other way to do it?

var rows = [], columns = [];
var i = 0;

buttons.forEach((e, idx) => {
    rows.push(e);
    i++;

    if (i === 2 || idx === buttons.length - 1) {
        i = 0;
        columns.push(
            <View key={ idx } style = {{ flex: 1, flexDirection: 'row' }}>
                { rows }
            </View>
        );
        rows = [];
        i = 0;
    }
});

return (
    <View style = {{ flex: 1, margin: normalize(20) }} >
        { columns }
    </View>
);

• javascript
• reactjs
• react-native
• flexbox

• I can be easily achieve using FlatGrid. – Arnold Brown Commented Jul 6, 2022 at 9:06

4 Answers 4

You can use a FlatList for this.

Here's how to get a 2x2 grid showing, you will need to adapt it to acodate your buttons.

<FlatList
  data={[1, 2, 3, 4]}
  numColumns={2}
  renderItem={() => (
    <View style={{ 
      flex: 1,
      height: 150,
      borderWidth: 1,
      margin: 20
    }}/>
  )}
/>

This will output black boxes but should be enough to get you going.

You can style it like below:

<View>
  <View style={{flexDirection:'row'}}>
   <Button1View/> // Break
   <Button2View/> // Meeting
  </View>
  <View style={{flexDirection:'row'}}>
   <Button3View/> // on the way
   <Button4View/> // office
  </View>
</View>

you can add styles in views and buttons accordingly but this will arrange the buttons like you want

You can use **GRID** ponent 
<Grid
    renderItem={() => (
        <View style={{ 
          flex: 1,
          height: xx,
          borderWidth: 1,
          margin: xx
        }}/>
      )}
    data={[arrayData]}
    itemsPerRow={2}
/>
Please check this documentation.

react-native-grid-ponent

I used to solve that issue by using flexDirection and given height and width to the contents

in the question above can be solved like this

<View>
    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>

    <View
     style = {{
         flexDirection: 'row',
         justifyContent: 'space-between'
     }}
    >
        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />

        <ButtonView
            style = {{
                height: (Dimensions.get('screen').width - 60) / 2,
                width: (Dimensions.get('screen').width - 60) / 2
            }}
        />
    </View>
<View>