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

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>
  }

CodePudding user response：

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

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