[BottomNavigationBar] Icons not resizing on iOS

[danouche93]

Which platform(s) does your issue occur on?

• iOS
• emulator and device

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

• CLI: 8.2.3
• Cross-platform modules: 8.2.5
  -Package.json

{
  "name": "TinaAppV2",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@nativescript-community/ui-material-bottomnavigationbar": "^7.0.25",
    "@nativescript-community/ui-pulltorefresh": "^2.5.1",
    "@nativescript/angular": "^13.0.0",
    "@nativescript/core": "~8.2.2",
    "@nativescript/datetimepicker": "^2.1.9",
    "@nativescript/firebase-core": "^2.2.1",
    "@nativescript/firebase-crashlytics": "^2.2.1",
    "@nativescript/firebase-database": "^2.2.1",
    "@nativescript/firebase-messaging": "^2.2.1",
    "@nativescript/firebase-messaging-core": "^2.2.1",
    "@nativescript/geolocation": "^8.0.2",
    "@nativescript/iqkeyboardmanager": "^2.0.0",
    "@nativescript/mlkit-barcode-scanning": "^1.0.5",
    "@nativescript/mlkit-core": "^1.0.5",
    "@nativescript/theme": "~3.0.2",
    "@nstudio/nativescript-checkbox": "^2.0.5",
    "@nstudio/nativescript-floatingactionbutton": "^3.0.4",
    "nativescript-forgm-sound": "^1.1.3",
    "nativescript-ui-chart": "^9.0.2",
    "nativescript-ui-sidedrawer": "^10.0.2",
    "rxjs": "~7.5.0",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.6",
    "@angular/compiler-cli": "~13.2.0",
    "@nativescript/android": "8.2.2",
    "@nativescript/ios": "8.2.3",
    "@nativescript/types": "~8.2.0",
    "@nativescript/webpack": "~5.0.6",
    "@ngtools/webpack": "~13.2.0",
    "typescript": "~4.5.5"
  }
}

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

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]

@danouche93 can you create a repro sample project? Thanks

[fpaaske]

@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:

[kefahB]

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'));