[IOS] lineHeight breaks textAlignment on Button label when multiline

I expect the following code to render a button with text centered inside.
But on IOS, the text aligns left as soon as there is more than one line.

<Button textWrap="true" textAlign="center">
  <FormattedString>
    <Span text="Start of text" />
    <Span text=" " />
    <Span text="next part of text" />
  </FormattedString>
</Button>

see screenshot below:

1st case: content wraps inside the button and is aligned left

2nd case: content does not wrap and is aligned center as expected

EDIT:
The problem also happen in a simple button. Is it apple that does not support centered multiline label on buttons?

<Button text="a long text that wraps on a second line" textWrap="true" textAlign="center" />

@SylannBin the property is textAlignment - on my side it is working as expected (see this Playground demo)

@NickIliev

I really used a class in my case, so my bad for the wrong attribute name on this thread, but it didn't work with the css property "text-align: center" @NickIliev
I am trying your playground right now

EDIT 1:
I have reproduced most of my use case in the playground and don't have the problem here.
On the other hand, when I copy/paste your example in my app, the bug appears again.

So there must be something in my app, but I don't know what.

EDIT 2:
the bug disappears when I remove the following css property: line-height: 1.2

Example playground with the bug:
https://play.nativescript.org/?template=play-tsc&id=mnTd9h&v=2

The problem is caused by the following line:

NativeScript/nativescript-core/ui/text-base/text-base.ios.ts

Line 142 in 3199a39

    
           paragraphStyle.alignment = (<UITextField | UITextView | UILabel>this.nativeTextViewProtected).textAlignment;

Bug was addressed previously: (#4909)

Sadly this fix didn't took care of the UIButton which accesses textAlignment through its titleLabel object and not directly on itself.

I don't think I have enough background to handle the whole process run all the tests etc...
But the problem was solved by replacing this:

paragraphStyle.alignment = (<UITextField | UITextView | UILabel>this.nativeTextViewProtected).textAlignment;`

with this:

if (this.nativeTextViewProtected instanceof UIButton) {
    paragraphStyle.alignment = (<UIButton>this.nativeTextViewProtected).titleLabel.textAlignment;
} else {
    paragraphStyle.alignment = (<UITextField | UITextView | UILabel>this.nativeTextViewProtected).textAlignment;
}

@NickIliev

@NickIliev Would you mind taking into account all the information I have shared since you closed this issue.

Thank you in advance.

@SylannBin the fix you've suggested sounds legit - you could post a PR without creating tests - the CI will run the test apps before the PR is merged so you won't have to worry about it.

Fixed in #8181 (merged January 2020): iOS text alignment is applied to the Button's titleLabel, so multiline Button text stays centered, including with line-height. Closing as completed.

Navigation Menu

Repository navigation

[IOS] lineHeight breaks textAlignment on Button label when multiline #8151

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[IOS] lineHeight breaks textAlignment on Button label when multiline #8151

Description

Activity

NickIliev commented on Nov 29, 2019

sylann commented on Nov 29, 2019

sylann commented on Nov 29, 2019

sylann commented on Nov 29, 2019

sylann commented on Dec 3, 2019

NickIliev commented on Dec 4, 2019

NathanWalker commented on Oct 23, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions