Menu
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?
909
An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph.
You can set a block-level element to display like an inline element by setting the display property to inline. You can also cause inline elements to behave like block-level elements using the display property.
Just set the correct flexDirection. Default is column.
<View style={{flexDirection: 'row'}}> <Text> Start here, </Text> <Text> finish here </Text> </View> Text components are inline when wrapping them with another Text element, like:
<Text> <Text>We</Text><Text>Are</Text><Text>Inline</Text> </Text> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With