Row Styling React Native

Question

Hey I'm new to React Native and currently I'm trying render custom radio buttons from API and make it into a 2x2 grid. The buttons rendered successfully but they didn't render to 2x2 grid, I'm using the push method for making rows and columns and it seems the buttons did not pass to the rows and columns properly. Is there anything I did wrong?

{
    this.props.activities && this.props.activities.map((val, idx) => {
        let { id, activity, status } = val;
        let buttons = [];

        if (idx < (this.props.activities.length - 1))
            buttons.push(
                <RadioButton
                    key={id}
                    value={activity}
                    element={<Image source={img.findActivityButton(id, false)} style={{marginHorizontal: normalize(10), marginVertical: normalize(10)}} />}
                    selectedElement={<Image source={img.findActivityButton(id, true)} style={{marginHorizontal: normalize(10), marginVertical: normalize(10)}} />}
                    onPress={() => this.changeSelection(id)}
                    selected={this.state.selectedButton === id}
                />
            );                              

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

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

            if (i === 2 || idx === buttons.length - 1) {  //max buttons per row
                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>
        );
    })
}

---

UPDATE

It actually does pass to the rows and columns, it's only the styling problem and I confused how to style it. I'm sure that in this part that needs to be styled, is there anyway to style it?

columns.push( 
<View key = { idx} style = {{flex: 1, flexDirection: 'row'}}> 
  {
    rows
  } 
  </View>
);

here is the result of my code