react-nativereact-native-text

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?

Solution

  • Just set the correct flexDirection. Default is column.

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