Label

<Label> is a UI component that displays read-only text.

<Label text="Hello NativeScript!" />

<Label text="Hello NativeScript!"></Label>

<label>Text Here</label>

<label text="TextHere" />

<label text="Hello NativeScript"></label>

<Label text="Hello NativeScript!"></Label>

Examples ​

Styling the label ​

If you need to style parts of the text, you can use a combination of a FormattedString and Span elements.

<Label textWrap="true">
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</Label>

Span linkTap event ​

Tap event for Span.

on('linkTap', (data: EventData) => {
  console.log('Span tapped')
})

Props ​

letterSpacing ​

letterSpacing: number

Gets or sets the letter spacing.

See MDN: CSS letter-spacing.

lineHeight ​

lineHeight: number

Gets or sets the line height.

See MDN: CSS line-height.

text ​

text: string

Gets or sets the text shown.

textAlignment ​

textAlignment: 'initial' | 'left' | 'center' | 'right' = 'left'

Gets or sets the text alignment style property.

Defaults to left.

textDecoration ​

textDecoration: TextDecorationType // "none" | "underline" | "line-through" | "underline line-through"

Gets or sets the text decoration style.

See TextDecorationType.

Defaults to none.

textTransform ​

textTransform: TextTransformType // "initial" | "none" | "capitalize" | "uppercase" | "lowercase"

Gets or sets the text transform.

See TextTransformType.

Defaults to initial.

textWrap ​

textWrap: boolean

Gets or sets whether the label should wrap longer text to new lines.

Default value is false.

whiteSpace ​

whiteSpace: WhiteSpaceType // "initial" | "normal" | "nowrap"

Gets or sets white-space handling.

See WhiteSpaceType and MDN: CSS white-space.

Defaults to initial.

...Inherited ​

For additional inherited properties, refer to the API Reference.

Native component ​

• Android: android.widget.TextView
• iOS: UILabel