NativeScript: Unable to change font size for TabView bar items

I can’t see a way to change the font size of the labels on TabView bar items. I managed to achieve this on Android with:

    tabView._tabLayout.getTextViewForItemAt(0).setTextSize(10);
    tabView._tabLayout.getTextViewForItemAt(1).setTextSize(10);
    tabView._tabLayout.getTextViewForItemAt(2).setTextSize(10);

but the same approach on iOS (using the appearance proxy: UITabBarItem.appearance().setTitleAttr...) didn’t work, I can’t be sure what’s going on under the hood (are our changes being applied and then overwritten, or just not working outright), but the approaches on Stack Overflow articles that appear to work for regular iOS projects don’t seem to be working here, which is strange.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 20 (6 by maintainers)

Most upvoted comments

@valentinstoychev It’s been a while since this issue got any updates. Any chance this will make an upcoming milestone? Still a pretty basic requirement for tab-based apps.

toddanglin on Jul 8, 2016

Seems we could change the font size just fine like so (iOS):

TabView {
  font-size: 14;
}

larssn on Sep 17, 2018

I will love that SelectedColor can be applied to tab icon too 😃 Now icons don’t have the normal behavior you see on iOS. If they are black, they appear black, not grayed out like text, not affected by SelectedColor neither.

alexrainman on Jul 17, 2016

I faced the selected icon color not changing on iOS tabBar as well and I am using this workaround till it is supported.

var tabBarIcons: Array<string> = [1", "2", "3", "4"];
var tabBarIconsActive: Array<string> = [1", "2", "3", "4"];

export function pageLoaded(args: EventData) {
    var page: Page = <any>args.object;
    mainTabview = getViewById(page, "main-tabview");

       if (!(mainTabview.hasListeners(TabView.selectedIndexChangedEvent))) {
        mainTabview.on(TabView.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => {
          //Select new image
          mainTabview.items[data.newIndex].iconSource = tabBarIconsActive[data.newIndex];
          //Unselect old image
          mainTabview.items[data.oldIndex].iconSource = tabBarIcons[data.oldIndex];
       });
      }
    }

AntonioCuevaUrraco on Jan 18, 2016