How to display multiple NativeScript variables as sentence


#1

I am having an issue displaying multiple NativesScript variables as sentence.

I have 5 variables:

string1 = 'Hello';
string2 = 'John'; 
string3 = 'how are you? how are you? how are you?'; 
string4 = 'Button'; 
string5 = 'Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test';  

I am trying to achieve:

Hello John how are you? how are you? how are you? Button Test Test Test 
Test Test Test Test Test Test Test Test Test Test Test Test Test

string2 and string4 should be clickable. I tried FormattedString with Span but span cannot have any events so it is not clickable. I have also tried GridLayout , but it separate in columns or by rows(where every variable starts in the new line). I also tried StackLayout with horizontal orientation but it didn’t wrap properly and didn’t go to another line.

Any help would be appreciated.


#2

Did you try with WrapLayout as well? It’s like a horizontal StackLayout, but wraps to new lines when needed.


#3

Thanks fro reply, I have tried this way, but it bring every label in new line.

<WrapLayout >
      <Label text="Hello"  ></Label>
      <Label text="John"></Label>
      <Label text="how are you? how are you? how are you?"></Label>
      <Label text="Button"></Label>
      <Label text="Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test"></Label>
</WrapLayout>

#4

Are you sure you don’t have some css doing that? I just tried it and it’s all layed out next to each other…


#5

Thanks for prompt reply.I just tried only the code i copied and it partially works. But i was using that in GridLayout

<GridLayout columns="auto,*,auto"  >
<Label col="0" text="Testing "></Label>
<WrapLayout col="1">
  <Label text="Hello"  ></Label>
  <Label text="John"></Label>
  <Label text="how are you? how are you? how are you?"></Label>
  <Label text="Button Button Button"></Label>
  <Label text="Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test"></Label>
</WrapLayout>
<Label col="2" text="Test2"></Label>
</GridLayout>

Result:

HelloJohn
how are you? how are you? how are you?
Button Button Button
Test Test Test Test Test Test Test Test 
Test Test Test Test Test Test Test Test

Do you know how to make ‘how are you? how are you? how are you?’ go to line one and ‘Test’ start in the same line as ‘Button’ ?


#6

Perhaps try a nested GridLayout:

<GridLayout columns="*,*">
      <Label col="0" text="Button Button Button"></Label>
      <Label col="1" text="Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test"></Label>
  </GridLayout>

#7

@jen.looper thank you for reply, but it doesn’t work. It displays like this:

Button Button Button Test Test Test Test Test Test
--------------------------->Test Test Test Test Test Test
--------------------------->Test Test Test Test

the problem seems to be that two long variables cannot start in the same line. Do you have any other suggestions? as I trying everything for the past two days with no results. Thanks


#8

How about wrapping the lines in an array which is accessible through bindingContext?

const stringArray = [
  "Hello",
  "John",
  "how are you? how are you? how are you?",
  "Button",
  "Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test"
];
<Label text="{{ stringArray }}" />

The label should then print out:

Hello John how are you? how are you? how are you? Button Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test


#9

Originally posted here

Using FlexboxLayout will do the trick

<FlexboxLayout flexWrap="wrap" alignContent="flex-start" >
    <Label text="Hello" ></Label>
    <Label text="how are you? how are you? how are you?" ></Label>
    <Label text="Button" t></Label>
    <Label text="Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test" ></Label>
</FlexboxLayout>

#10

@NickIliev thanks for reply. I tried your code and it works until I fix the width or use inside GridLayout. Do you know what the issue could be?

I want to use it in this context :

<GridLayout columns="auto,*,auto"  >
<Label col="0" text="Testing "></Label>
<FlexboxLayout col="1" flexWrap="wrap" alignContent="flex-start" >
    <Label text="Hello" ></Label>
    <Label text="how are you? how are you? how are you?" ></Label>
    <Label text="Button" t></Label>
    <Label text="Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test" ></Label>
</FlexboxLayout>
<Label col="2" text="Test2"></Label>
</GridLayout>

#11

@NordlingArt thanks for reply, but I mentioned in original question, that I want to add separate events to some of the variables, so your approach won’t work.