Nativescript: Vertically center label on android by default

[dbenninger]

Tell us about the problem

The text of a label is vertically centered by default on iOS, but not on Android. It would be nice if the label on Android behaves the same by default. I think adding setGravity(CENTER_VERTICAL) to the android implementation would solve this.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 2.5.2
• Cross-platform modules: 2.5.1
• Runtime(s): 2.5.0

Please tell us how to recreate the issue in as much detail as possible.

1. tns create "LabelTest" --ng
2. Open items.component.html
3. Remove the
4. Add <Label style="height: 100%" text="This should be in the middle of the screen"></Label>
5. tns run ios
6. The text is in the middle of the screen
7. tns run android
8. The text is top-aligned

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[NickIliev]

@dbenninger there are some differences how iOS and Android work with layouts with no predefined sizes which is causing this different output for your code. In your case your Label is wrapped in the default StackLayout with no dimensions and this is one of the reason not to be able to position your label at the vertical center. Another thing is the percentage value of your label set to 100%.

What I can suggest is to use different layouts for cases when you need to control both horizonal and vertical aligment.
e.g.

<GridLayout rows="*" columns="*" style.backgroundColor="gray" >
    <Label row="0" text="vertically centered" style.verticalAlignment="center" style.textAlignment="center" textWrap="true"></Label>
</GridLayout>

With the above snippet, we are creating a GridLayout which will take all the available space for rows and columns (using *) and for that space will position your label vertically aligned to the center.

[dbenninger]

Thanks for your quick reply.

My example above was of course very simplified. The label in my real app is in a RadListView header and uses ng-translate instead of a static text. While your workaround works on Android in a RadListView header, it does not on iOS. The text on iOS is only visible when I use static text instead of the translate pipe.

If there is a chance that you adjust the label implementation on android, I can create you an example app with an RadListView header. If not, I will file an issue for the RadListView...

[FreelancerAnkit]

Thank you Nick Iliev...!
Your solution worked for marking Label center.
You are awesome !
Hope you would like to see how to get data from mysql server using nativescript :+1:
https://goo.gl/6gVW3Q
Have a Great Day !

[SylannBin]

I am starting to use nativescript and this problem has already struck me too many times.
Comming from the web, my solution is to use a flexbox layout like so:

<FlexboxLayout justifyContent="center" alignItems="center" height="xxx">
  <Label>Some text</label>
</FlexboxLayout>

Is there any problem with this solution?

--
I've read about the "setGravity" solution, but I can't find a way to implement it with vuejs, without typescript

[vakrilov]

Continuing, the discussion sparked by @Logikgate PR.
It seems that changing the behavior will be a breaking change and so we cannot merge it right away.
There are couple of other options that come to my mind:

1. Extend the Label and override the initNativeView() by calling super and them setting the gravity. You can them use the custom label.
2. You can do the above in the loaded event. Here is an example. If using angular this can be implemented as a directive so that the code is not bloated.
3. (Requires a PR) Maybe we can implement a text-vertical-align property for the label so that you can control the vertical positioning of the text. I'm not completely sure this is the right approach. As @SylannBin mentioned - many folks will just prefer to position the label itself at the center of its container than to have a special property to control the alignment of the content.

[farfromrefug]

If anyone is interested and if this PR does not make it through. Which is understandable, you can use my nativeScript-htmllabel plug-in. It is a replacement for the default label with many options. One of the being verticalTextAlignment.

[Logikgate]

@vakrilov It makes complete sense that you can't merge the PR now. I do wonder though if it'd be possible to merge it into a 7.0 release as a breaking change? I would imagine the majority of users would prefer iOS and Android labels to behave the same by default.

If it was released in 7.0 then we could also add the text-vertical-align prop to allow users to revert back to the old way of iOS center and Android top during their migration.

What do you think?