**ui-material-bottomnavigationbar text overflow**

[wardourdigital]

I have been using the default NativeScript bottom navigation. It uses 5 tab buttons. Text fits perfectly.

I have moved to the @nativescript-community/ui-material-bottomnavigationbar as I now have need to add badge icons that the NS the bottom nav which is not supported.

The issue is that text is cut off and I cannot see a way to change the text size or change the padding.

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
	  xmlns:mdc="@nativescript-community/ui-material-bottomnavigationbar"
	  loaded="pageLoaded"
	  class="page">
	<GridLayout rows="*, auto">
		<StackLayout row="0">
			<Label text="content"></Label>
		</StackLayout>
		<mdc:BottomNavigationBar
		  activeColor="green"
		  inactiveColor="red"
		  backgroundColor="black"
		  tabSelected="tabSelected"
		  row="1"
		  loaded="onbottomNavigationBarLoaded"
		>
		  <mdc:BottomNavigationTab title="Article" icon="res://ic_home" />
		  <mdc:BottomNavigationTab title="Magazine" icon="res://ic_view_list" />
		  <mdc:BottomNavigationTab title="Media" icon="res://ic_menu" />
		  <mdc:BottomNavigationTab title="Bookmarks" icon="res://ic_menu" />
		  <mdc:BottomNavigationTab title="More" icon="res://ic_menu" />
		</mdc:BottomNavigationBar>
	</GridLayout>
</Page>

Please see the attached image:

Left side: @nativescript-community/ui-material-bottomnavigationbar Right side: @nativescript-community/ui-material-bottom-navigation-bar

Which platform(s) does your issue occur on?

• iOS/Android/emulator

Version: @nativescript-community/ui-material-bottomnavigationbar: 6.1.2

I would really appreciate knowing how to stop the overflow of text. It is feeling like I will need to create a custom view from scratch :/

[LookinGit]

Hi @wardourdigital I have similar issue on iOS. Did you found any solutions for this?

As temporary solution, i change a font size of item titles:

onbottomNavigationBarLoaded(args: EventData): void {
  if (!isIOS) return

  const font = new Font('Arial', 12, 'normal', '400')
  ;(args.object as any).ios.itemTitleFont = font.getUIFont('serif')
},