search

nativescript-community / ui-material-components

Monorepo that contains all of the NativeScript Material Design plugins.
https://nativescript-community.github.io/ui-material-components/
Apache License 2.0
216 stars 80 forks source link

[BottomNavigationBar] Icons not resizing on iOS #398

Open danouche93 opened 2 years ago

danouche93 commented 2 years ago

Which platform(s) does your issue occur on?

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

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

I upgraded my project from NativeScript 6 to 8 and I had the bottom navigation component and I saw that I have to use this plugin in order for it to work. I have a home page where I group all the pages that I need for bottom navigation but the issue is that the icons of the bottom navigation are really small. I use the icons from app_resources folder and I have 3 different size but it seems that it only take the smallest one on iOS. The icons are in the folder app_resources/iOS and it is like icon.png, icon@2x.png, icon@3x.png ... The issue doesn't occur in Android

Screen Shot 2022-08-01 at 10 41 33

Is there any code involved?

<GridLayout rows="*,auto">
            <GridLayout row="0">
                <StackLayout [visibility]="selectedTab == 0 ? 'visible' : 'collapse'">
                    <ns-dashboard></ns-dashboard>
                </StackLayout>
                <StackLayout [visibility]="selectedTab == 1 ? 'visible' : 'collapse'">
                    <ns-calendar></ns-calendar>
                </StackLayout>
                <StackLayout [visibility]="selectedTab == 2 ? 'visible' : 'collapse'">
                    <ns-leaderboard></ns-leaderboard>
                </StackLayout>
                <StackLayout [visibility]="selectedTab == 3 ? 'visible' : 'collapse'">
                    <ns-supervision *ngIf="checkPerm('Supervision')"></ns-supervision>
                </StackLayout>
            </GridLayout>
            <BottomNavigationBar row="1" activeColor="#ECE0C5" inactiveColor="#525252" backgroundColor="#F4F4F4"
                (tabSelected)="onSelectedIndexChanged($event)" selectedTabIndex="{{selectedTab}}" titleVisibility="Never">
                <BottomNavigationTab icon="res://dashboard">
                </BottomNavigationTab>
                <BottomNavigationTab icon="res://calendar">
                </BottomNavigationTab>
                <BottomNavigationTab icon="res://leaderboard">
                </BottomNavigationTab>
                <BottomNavigationTab *ngIf="checkPerm('Supervision')" icon="res://supervision">
                </BottomNavigationTab>
            </BottomNavigationBar>
        </GridLayout>
farfromrefug commented 2 years ago

@danouche93 can you create a repro sample project? Thanks

fpaaske commented 1 year ago

@farfromrefug I'm using font icon, but you can see the same issue in this repo; the iOS icons are very small compared to the Android counterpart:

image image
kefahB commented 1 year ago

HI,

we should set the font here font = font.withFontSize(30) this solve the problem but the spacing between the icon and the title stay the same, it should be handled also.


            let font = this.style.fontInternal;
            font = font.withFontSize(30)
            is = ImageSource.fromFontIconCodeSync(fontIconCode, font, new Color('white'));