How to set multiple line on Textview/Label with Nativesctipt Vue

How to set multiple line on Textview/Label with Nativesctipt Vue 1

Implementing multiline text in the label of your Native script Vue application is not so straightforward as you have thought. The newline character in your text won’t be rendered into the newline directly if you are the binding text for that particular element. But there’s a small workaround to fix this issue.

Method 1: Use Formatted String

data(){
return{
textToDisplay:"Player One\n200 Points";
}
}

<Label
textWrap="true"
textAlignment="center"
width="80%"
fontSize="25"
fontWeight="bold"
marginTop="20"
>
<FormattedString>
<Span :text="textToDisplay"/>
</FormattedString>
</Label>

Method 2: Use Back tilt operator

<Label :text="`${textToDisplay}`" textWrap="true"/>

 

Which method would you use in your project? Please let us know in the comment section below. Thank You.

Leave a Reply

Your email address will not be published.