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?

score 96 · Accepted Answer · answered Jan 10 '16 at 12:02

96

Just set the correct flexDirection. Default is column.

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

answered Jan 10 '16 at 12:02

purii

1

In my case, this did not work until each Text element was wrapped in it's own view inside of the outer (flexbox) view. – Paul Jan 28 '19 at 16:06
2

This does not handle wrapping of text. You will need to handle this with @cherniv 's answer – Jenel Ejercito Myers Sep 17 '19 at 15:53
Yeah this doesn't answer the question, this creates a column / row like structure, not a flowing inline style – Tosh Dec 28 '20 at 10:57
For anyone using react native base, and also work. – Jolly Good Dec 01 '22 at 12:34

score 37 · Answer 2 · answered Feb 06 '16 at 16:46

37

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

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

answered Feb 06 '16 at 16:46

Ivan Chernykh

7

Note : U won't be able to padding/margin the child text using this solution. – cjmling Sep 19 '16 at 11:22
Can't add border either... – Caio Mar Apr 20 '22 at 20:12

2 Answers2