Nativescript: TabView icons (title) using icon fonts on iOS are not vertically centered

[sudhanshu-15]

Please, provide the details below:

Did you verify this is a real problem by searching [Stack Overflow]

Yes, I had previously created an issue where icon fonts were not working on iOS TabView titles.
https://github.com/NativeScript/NativeScript/issues/4302
It got resolved with 3.2.0 but here is a minute issue with it.

Tell us about the problem

The TabView icons using icon fonts on iOS are not vertically centered, on Android it is vertically centered and looks good, but on iOS it is aligned to the top.

Which platform(s) does your issue occur on?

iOS

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

• CLI: 3.2.0
• Cross-platform modules: 3.2.0
• Runtime(s):

"tns-ios": {
      "version": "3.2.0"
    },
    "tns-android": {
      "version": "3.2.0"
    }

• Plugin(s): Not using a plugin but making use of Material Icons (icon font)

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

Create a tab view with title using Material Icons (Icon font) and you will be able to see the title icons are not vertically centered.
On iOS

On Android

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<TabView class="tabview-look" style="font-size: 23;" selectedTabTextColor="#990000" loaded="mainContentLoaded" id="tabView1">
        <TabView.items>
            <TabViewItem title="&#xE7F4;" >
              <TabViewItem.view>
                <notifications:notifi />
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xE22B;" >
              <TabViewItem.view>
                <requests:request />
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xE616;" >
              <TabViewItem.view>
                <label text="Check calendar" horizontalAlignment="center" class="size16b" extwrap="true"/>
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xE0BF;" >
              <TabViewItem.view>
                <label text="Ask Questions" horizontalAlignment="center" class="size16b" extwrap="true"/>
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xE0E0;" >
              <TabViewItem.view>
                <label text="Recent updates go here" horizontalAlignment="center" class="size16b" textwrap="true"/>
              </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
</TabView>

.tabview-look {
    background-color: #fff;
    font-family: MaterialIcons, Material Icons;
}



md5-5f689876a95e274aae6ba487a9539149



.size16b {
    font-size: 13.5;
    margin-left: 13px;
    margin-top: 3.75px;
    margin-bottom: .25px;
    color: #212121;
    font-weight : bold;
    font-family: 'Open Sans', sans-serif;
}

---

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

[NickIliev]

@sudhanshu-15 thank you for reporting this issue!
I can confirm that indeed with some icon fonts the titles are not centered vertically on iOS (works fine on Android).

Steps to reproduce:

• use this demo application

Result: when using some icon fonts (in the app MaterialIcons or Nasalizaiton) the tab title are not centered vertically on iOS

[dChin84]

Is there any way to work around this issue until there is fix

[ventsislav-georgiev]

I have found a workaround for now. Use the loaded event on the TabView and iterate over all childs setting the proper vertical alignment.

onTabViewLoaded: ({ object: tabView }) => {
    tabView.eachChild((child) => {
        child._iosViewController.tabBarItem.titlePositionAdjustment = {
            horizontal: 0,
            vertical: -8
        };
    });
},

The issue comes from the hardcoded vertical alignment in the TabView module sources: https://github.com/NativeScript/NativeScript/blob/014e7a8e0ffaeefd5e0c29f0bfa64459f7547681/tns-core-modules/ui/tab-view/tab-view.ios.ts#L115

[razorsyntax]

This solution doesn't appear to work. When accessing child, _iosViewController is undefined.

[manijak]

This is not only issue with TabView. I am seeing same effect on Labels and Buttons as well. TNS 4.x

[ventsislav-georgiev]

@razorsyntax In new versions the _iosViewController property is __controller:

tabView.eachChild((child) => {
    child.__controller.tabBarItem.titlePositionAdjustment = {
        horizontal: 0,
        vertical: -8
    };
});

[relez]

This piece of code is not working for me... I get these errors in console:

Argument of type '(child: ViewBase) => void' is not assignable to parameter of type '(child: ViewBase) => boolean'.
Type 'void' is not assignable to type 'boolean'.

Property '__controller' does not exist on type 'ViewBase'.

I am using Nativescript 4.2 and Angular 6.

Any suggestion?

[ventsislav-georgiev]

@relez you cannot use this code with type validation, one way to use it is to cast tabView to any: (<any>tabView).eachChild(...

[NatanijelVasic]

@ventsislav-georgiev

I changed the line in tns-core-modules/ui/tab-view/tab-view.ios.ts to .setTitlePositionAdjustment({ horizontal: 0, vertical: -0 }); and it works, but is this an acceptable way of doing it? Also, just out of interest, do you know why there might have been a hardcoded value of -20 in the first place ?

Best wishes,
Nat 😸

[sifex]

NS-Vue Implementation (not sure if this is the most direct root, but working):

// Javascript version
onTabViewLoaded: (tabView) => {
    tabView.object.__vue_element_ref__.childNodes.forEach((child) => {
        child._nativeView.__controller.tabBarItem.titlePositionAdjustment = {
            horizontal: 0,
            vertical: -10
        };
    })
},

[mcalc001]

Hi, Ive I changed the line in tns-core-modules/ui/tab-view/tab-view.ios.ts to .setTitlePositionAdjustment({ horizontal: 0, vertical: -15 }) which works well for the app. Is it possible to update this property in the .ts file while working in Nativescript angular ? Thanks.