NativeScript Core: I'm trying to change the size of the TabViewItem icon, and can't get figure it out

0
votes

I'm adding in icons to each of my tabs in my NativeScript project, and I reference the png images properly, but my images are a bit oversized. I'm trying to add styling and can't figure out how to reference things properly. I'm using iconSource to reference my icon.

I've tried changing the font size to the TabView, I tried resizing the image, I've also tried adding padding, but nothing is working. 

    <TabViewItem title="Routes" ios:iconSource="res://tabIcons/subway" android:iconSource="res://home">
        <Frame defaultPage="home/home-items-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Map" ios:iconSource="res://tabIcons/map" android:iconSource="res://browse">
        <Frame defaultPage="browse/browse-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Favorites" ios:iconSource="res://tabIcons/heart" android:iconSource="res://search">
        <Frame defaultPage="search/search-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Settings" ios:iconSource="res://tabIcons/cog" android:iconSource="res://settings">
        <Frame defaultPage="settings/settings-page"></Frame>
    </TabViewItem>
</TabView>

I'd preferably like to add some padding around the iconSource image, and possibly format the title a bit.enter image description here

1
javascriptcssxmlsassnativescript

1 Answers

0
votes

Did you try treating it like how tag is treated? Use the attributions of tag like width="100" height="100" stretch="aspectFill", etc...

More on image component here https://docs.nativescript.org/ui/ns-ui-widgets/image

Edit: If it did not work, then try implementing a custom bottom navigation instead of tabview, which is more flexible and more UI unified across platforms, like this one https://play.nativescript.org/?template=play-tsc&id=R2y34S&v=11