React Native Elements ButtonGroup - Can't group buttons into columns

Question

I'm new with React Native, and am having an issue with styling UI elements. I am using using React-Native-Elements ButtonGroup and am having a very difficult time figuring out how to group the buttons into two columns.

I currently have them like this: Current Button Layout

I want to group them in columns like this:

Buttons Grouped as Desired

Here is the code:

import {Text, StyleSheet, View} from 'react-native'
import {ButtonGroup} from 'react-native-elements';

export default function Form(props) {

    const buttons = [ 'Apples', 'Bananas', 'Oranges', 'Pears', 'Peaches']

    return (
        <View style = {styles.container}>
        <Text style = {styles.text}>Which fruit would you like? </Text>
          <ButtonGroup
            containerStyle={styles.buttonContainer}
            buttonStyle ={styles.button}
            buttons = {buttons}
          />

        </View>

    )
}

const styles = StyleSheet.create({
    container: {
        marginTop: 200,
        alignItems: 'center',
        justifyContent: 'center',
      },
    buttonContainer: {
        flexWrap: 'wrap'
    }

})

As you can see, I currently have flexWrap set to 'wrap' in the button container, which did not have the desired effect. I've tried adding various css styles, but it seems that the component simply does not allow for that level of customization. Is there any way to overwrite this, or will I have to implement a similar button group manually?

Answer 1

In order to display flex commands, don't you need display: 'flex' in all your styles? Also, try using flexDirection: 'column' or direction: 'column' in your container style. Thus you tell the container to display all children in a column.