react native text go off view when set flexDirection to row

Question

Text component inside View with flexDirection set to row Text go off View.

I tried set flexWrap to wrap but it's still no working.

const tags = [
  { name: "condition", value: "99%" },
  { name: "cashback", value: "10%" },
  { name: "discount", value: "10%" }
];

<View style={{ flexDirection: "row" }}>
  {tags.map((tag, i) => (
    <View
      key={i}
      style={{
        backgroundColor: "#FFECEC",
        padding: 3,
        borderRadius: 3,
        marginRight: 3,
        flexWrap: "wrap"
      }}
    >
      <Text
        style={{
          fontSize: 12,
          color: Theme.Primary,
        }}
      >
        {`${tag.name.toUpperCase()} ${tag.value}`}
      </Text>
    </View>
  ))}
</View>

I want the last element to go to the second line but it just go off the screen.

text go off view

Estève Estève · Accepted Answer · 2019-07-25T09:43:55

Have you try to set the flexWrap: "wrap" on the parent view like : style={{ flexDirection: "row", flexWrap: "wrap" }} ?

Otherwise this is a good article on this subject : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

react native text go off view when set flexDirection to row

1 Answers