Home / Questions / 258657
Accepted
fedorqui
Asked: 2020-04-27 01:28:40 +0800 CST 2020-04-27 01:28:40 +0800 CST

How can I put two Text blocks on the same line?

  • 772

Turns out I have a view with two text blocks:

<View>
   <Text>Esto es un texto </Text>
   <Text>y esto otro, con otro formato</Text>
</View>

I would like to see it like this:

Esto es un texto y esto otro, con otro formato

However, each block appears on a different line:

Esto es un texto 
y esto otro, con otro formato

Is there a way to join them on the same line? I tried putting both <Text>on the same line but it didn't work.

react-native

1 Answers

  1. Best Answer

    You must play with flexDirection, which determines the main axis of the style. Defaults columnto , which makes each element appear on a separate line.

    If you change it to row, it works!

    <View style={{flexDirection: 'row'}}>
   <Text>Esto es un texto </Text>
   <Text>y esto otro, con otro formato</Text>
</View>

    Information extracted from Inline elements implementation

    • 2