'How to avoid a whole Text component move to the next line in flexWrap: 'wrap'

Let's take an example. I have two Text components as below:

<View style={{flexWrap: 'wrap'}}>
   <Text>12345</Text>
   <Text>67890</Text>
</View>

My expected result is : (The second text component will be splitted out and moved to the next line)

12345678
90

The actual result is : (The whole second text component will be move to the next line when the line do not have enough width for putting the whole text component.)

12345
67890

For this purpose, how can i change the code? Thanks a lot !!

react-native

Solution 1:^[1]

React native supports nested Text Componentss, basically meaning you can reference different strings in order to get the result in which you've desired. Im not tooo sure why you are doing this though :P Some sample code is below. Note that using flexWrap is not required.

<View style = {{width: 50, backgroundColor: '#e0e0e0'}}>
      <Text>1234578
          <Text>9123456</Text>
      </Text>
</View>

With the output of below...

Hope this helps!

EDIT #1: Another possible solution?

<View style = {{width: 50, backgroundColor: '#e0e0e0'}}>
      <Text>
           {123456789}
           {412346789}
      </Text>
</View>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How to avoid a whole Text component move to the next line in flexWrap: 'wrap'

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]