CODEWITHSUNDEEP
react-nativereact-native-text
Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Inline elements implementation

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?

Upvotes: 50

Views: 45736

Answers (2)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

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

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

Upvotes: 43

purii
purii

Reputation: 6414

Just set the correct flexDirection. Default is column.

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

Upvotes: 98

Related Questions