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


let's take example. have 2 text components below:

<view style={{flexwrap: 'wrap'}}>    <text>12345</text>    <text>67890</text> </view> 

my expected result : (the second text component splitted out , moved next line)

12345678 90 

the actual result : (the whole second text component move next line when line not have enough width putting whole text component.)

12345 67890 

for purpose, how can change code? lot !!

react native supports nested text componentss, meaning can reference different strings in order result in you've desired. im not tooo sure why doing though :p sample code below. note using flexwrap not required.

<view style = {{width: 50, backgroundcolor: '#e0e0e0'}}>       <text>1234578           <text>9123456</text>       </text> </view> 

with output of below...

enter image description here

hope helps!

edit #1: possible solution?

<view style = {{width: 50, backgroundcolor: '#e0e0e0'}}>       <text>            {123456789}            {412346789}       </text> </view> 

Comments

Popular posts from this blog

html - How to set bootstrap input responsive width? -

javascript - Highchart x and y axes data from json -

javascript - Get js console.log as python variable in QWebView pyqt -