Inline elements implementation

Question

I want to create Text components and to display them in a row , like span elements in html. If i'm doing it this way:

<View>   <Text> Start here, </Text> <Text> finish here </Text> </View> 

line is broken between them and it looks like:

Start here,
finish here

How can i prevent line breaking and display them on the same line?

Answer 1

Just set the correct flexDirection. Default is column.

<View style={{flexDirection: 'row'}}>  <Text> Start here, </Text> <Text> finish here </Text> </View> 

Answer 2

Text components are inline when wrapping them with another Text element, like:

<Text>    <Text>We</Text><Text>Are</Text><Text>Inline</Text> </Text>