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

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;
}

.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;
}

<bountysource-plugin>

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

[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

[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
		};
	})
},