How can I insert a new line between <text> components in react?

Issue

So I'm trying to format my invoice where my Amount Due and Amount Value is showed on one row, below that row I want to display Amount Paid and the Balance Amount. However, right now all of them are on the same row, I've tried using {"\n"} and
but they both do not work. Here is my code;

<View style={styles.section4}>
  <View style={{ flexDirection: "column", justifyContent: "space-between" }}>
    <Text style={{ fontWeight: "bold" }}>Amount Due</Text>
    <Text style={{ fontWeight: "bold" }}>{formatPrice(amountDue)}</Text>
    <Text style={{ fontWeight: "bold", color: "#677589" }}>Amount Paid</Text>
    /* <Text style={{ fontWeight: "bold" }}>{formatPrice(amountPaid)}</Text> */
    <Text style={{ fontWeight: "bold", color: "#677589" }}>Balance Amount</Text>
    <Text style={{ fontWeight: "bold" }}>{formatPrice(balanceAmount)}</Text>
  </View>
</View>

Solution

There are two ways for you:

1. Create 2 columns:

<View style={styles.section4}>
  <View style={{ flexDirection: "column", justifyContent: "space-between" }}>
    <View>
      <Text style={{ fontWeight: "bold" }}>Amount Due</Text>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Amount Paid</Text>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Balance Amount</Text>
    </View>
    <View>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountDue)}</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountPaid)}</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(balanceAmount)}</Text>
    </View>
  </View>
</View>

2. Create 3 rows:

<View style={styles.section4}>
  <View style={{ flexDirection: "column", justifyContent: "space-between" }}>
    <View style={{ flexDirection: "row" }}>
      <Text style={{ fontWeight: "bold" }}>Amount Due</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountDue)}</Text>
    </View>
    <View style={{ flexDirection: "row" }}>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Amount Paid</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountPaid)}</Text>
    </View>
    <View style={{ flexDirection: "row" }}>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Balance Amount</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(balanceAmount)}</Text>
    </View>
  </View>
</View>

Answered By - DinhNguyen