CODEWITHSUNDEEP
reactjsreact-native
Giannhs Ker
Giannhs Ker

Reputation: 137

React-Native : How to remove new line between Text components

I want to display the text of 2 Text components in the same line, first line is "Quality : ..." and second is "Good","Moderate","Bad" where based on the text it is colored green yellow or red. My problem is, the answer is rendered in new line, instead of next to each other.

This is my code :

<Text style={{fontSize:10}}>Quality :</Text> 
  { quality == 1 ? <Text style={{fontSize:20, color: 'green'}}>Good</Text> : 
    quality == 2 ? <Text style={{fontSize:20, color: 'yellow'}}>Moderate</Text> :
    quality >= 3 ? <Text style={{fontSize:20, color: 'red'}}>Bad</Text> :
    <Text style={{fontSize:50}}>error getting quality</Text>
  }

Upvotes: 0

Views: 1122

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Try using this way [ close the </Text> tag at the end ]

<Text style={{fontSize:10}}>Quality :
  { ..... same as it is ..... }
</Text>  // add here

Upvotes: 1

Related Questions