How to display row of buttons

Question

I am trying to style buttons so they appear in a row. With the code below the buttons appear in a column. How can I achieve the styling shown in the picture below? I would like to use Flex

renderRadioButton = () => {
    return (
        <View
            style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                padding: 0,
                margin: 0,
                listStyle: 'none',
                display: 'flex',
            }}
        >
            <View
                style={{
                    flexDirection: 'row',
                    flexWrap: 'wrap',
                }}
            >
                <Text
                    style={{
                        color: Colors.black,
                        borderWidth: 1,
                        borderColor: 'black',
                        borderStyle: 'solid',
                        backgroundColor: Colors.green,
                        width: 50,
                        height: 50,
                        fontSize: 6,
                        textAlign: 'center',
                        padding: 10,
                        margin: 10,
                        marginBottom: 50,
    
                    }}
                >
                    TEST
                </Text>
            </View>
        </View>
    )
}

Does this answer your question? [Flex box rendering like a column when it should be a row](https://stackoverflow.com/questions/56353389/flex-box-rendering-like-a-column-when-it-should-be-a-row) — SherylHohman, Jul 29 '20 at 00:35

score 0 · Answer 1 · answered Jul 28 '20 at 22:59

0

You could try:

display: inline,

answered Jul 28 '20 at 22:59

Daniele Ricci

15,422
1
27
55

score 0 · Answer 2 · answered Jul 29 '20 at 00:47

Do you want something like this?:

<View
    style={{
      flexDirection: "row",
      padding: 0,
      margin: 0,
      justifyContent: "center",
      alignItems: "center"
    }}
  >
    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10              
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10,             
          
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10,
          
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10,
         
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10
        }}
      >
        TEST
      </Text>
    </View>
  </View>

Code on sandbox

How to display row of buttons

2 Answers2