How to add buttons grid style in React Native?

Question

I recently placed my hands on react-native and am trying to add buttons dynamically to a view. I would like to have a structure like:

( in bootstrap I would add a class with col-md-4 )

[A] [A] [A] [A]

[A] [A] [A] [A] 

[A] [A] [A] [A] 

I already can add the the buttons but they always appear in a new line.

ie

[A]
[A]
[A]

the added style and function that I have so far:

const styles = StyleSheet.create({
    container: {
        marginTop: 65,
        flex: 1,
    },
})

render(){
    return (
        <View style={styles.container}>
            {this.renderButtons()}
        </View>
    )
}
renderButtons(){
    var list = myArray.map((item, index) => {
        return (
            <View key={index}>
                <TouchableHighlight
                    style={styles.button}>
                </TouchableHighlight>
            </View>
        )
    })
    return list;
}

I know I should add a certain style to the View under renderButtons but I don't know where to start. Yet.

Answer 1

The correct way to do this is to use flexWrap: "wrap" in your styles.