CODEWITHSUNDEEP
javascriptcssreact-nativeflexbox
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

Stop text from displaying inline

My text is displaying inline and I don't want it to.

Why does this code cause it to display inline?

<Card style={{

  marginBottom: 10,
  flex: 1,
  flexDirection: 'row',
  backgroundColor: 'green'
}}>
  <CardItem style={{


    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'red',

    alignItems: 'center'
  }}>
    <Text style={{
      color: '#FFFFFF',
      marginBottom: 15,
      width: '100%',
      backgroundColor: 'green',
      flexDirection: 'row',
    }}>
      {this.selectedProduct.name}
    </Text>
    <Text style={{
      color: '#FFFFFF',
      marginBottom: 15,
      backgroundColor: 'blue',
      width: '100%'
    }}>
      {this.selectedProduct.description}
    </Text>
    <Text style={{
      backgroundColor: 'yellow',
      color: '#FFFFFF',
      marginBottom: 15,
      width: '100%'
    }}>
      price: {this.selectedProduct.price ? this.selectedProduct.price + ' of your local currency' : 'not entered'}
    </Text>
  </CardItem>
</Card>

Upvotes: 1

Views: 49

Answers (2)

Johannes
Johannes

Reputation: 67738

You mean "in ONE line"? That due to using flex in there - it treats all child elements as flex items (also plain text) and distributes them accordingly across one line. You can change flexDirection to 'column' to place the texts above each other.

Upvotes: 2

P.S.
P.S.

Reputation: 16384

Because you are using flexDirection: 'row', if you want to display it in column, just use flexDirection: 'column', like this:

<Card style={{

  marginBottom: 10,
  flex: 1,
  flexDirection: 'column',
  backgroundColor: 'green'
}}>

Upvotes: 1

Related Questions