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

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -