ui-material-components: BottomNavigation inconsistent styles

Which platform(s) does your issue occur on?

• iOS 14 / iPhone 11 (Simulator)

• CLI: 7.0.10

• Cross-platform modules: “version”: “7.0.11”

• Runtime(s): 7.0.0

• Plugin(s):

"dependencies": {
    "@codelab/nativescript-multi-select": "^2.0.1",
    "@nativescript-community/ui-material-activityindicator": "^5.0.22",
    "@nativescript-community/ui-material-bottomnavigationbar": "^5.0.22",
    "@nativescript-community/ui-material-bottomsheet": "^5.0.22",
    "@nativescript-community/ui-material-button": "^5.0.22",
    "@nativescript-community/ui-material-cardview": "^5.0.22",
    "@nativescript-community/ui-material-core": "^5.0.22",
    "@nativescript-community/ui-material-floatingactionbutton": "^5.0.22",
    "@nativescript-community/ui-material-progress": "^5.0.22",
    "@nativescript-community/ui-material-ripple": "^5.0.22",
    "@nativescript-community/ui-material-slider": "^5.0.22",
    "@nativescript-community/ui-material-tabs": "^5.0.22",
    "@nativescript-community/ui-material-textfield": "^5.0.22",
    "@nativescript-community/ui-material-textview": "^5.0.22",
    "@nativescript/core": "7.0.11",
    "@nativescript/firebase": "11.0.0",
    "@nativescript/theme": "3.0.0",
    "@nstudio/nativescript-loading-indicator": "^4.0.0",
    "@proplugins/nativescript-drop-down": "^9.0.0",
    "nativescript": "7.0.10",
    "nativescript-camera": "^4.5.0",
    "nativescript-inappbrowser": "^2.3.0",
    "nativescript-mediafilepicker": "^4.0.0",
    "nativescript-ui-gauge": "^7.0.2",
    "nativescript-vue": "latest",
    "nativescript-vue-navigator": "^1.2.0",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "~7.11.6",
    "@babel/preset-env": "~7.11.5",
    "@nativescript/android": "7.0.0",
    "@nativescript/ios": "7.0.0",
    "@nativescript/webpack": "~3.0.7",
    "babel-loader": "~8.1.0",
    "nativescript-vue-template-compiler": "~2.8.1",
    "node-sass": "^4.7.1",
    "scss-symbols-parser": "^2.0.1",
    "string-replace-loader": "^2.3.0",
    "vue-loader": "~15.9.3",
    "vue-property-decorator": "^9.0.2"
  }

I’m using the same code as in demo, only difference is that I have 4 tabs instead of 3. I am also using a sample .png image for icon.

Here is how it looks on Android (1st image default settings / 2nd with css styling):

And here is how it it looks on iOS 14 / iPhone 11:

Template code:

<MDBottomNavigationBar
          row="1"
          class="bottomNav"
          :titleVisibility="1"
          @loaded="onbottomNavigationBarLoaded"
          @tabPressed="onBottomNavigationTabPressed"
          @tabSelected="onBottomNavigationTabSelected"
          @tabReselected="onBottomNavigationTabReselected"
      >
        <MDBottomNavigationTab
            title="Tab 1"
            icon="~/images/socials/apple_logo.png" />
        <MDBottomNavigationTab
            title="Tab 2"
            icon="~/images/socials/apple_logo.png" />
        <MDBottomNavigationTab
            title="Tab 3"
            icon="~/images/socials/apple_logo.png" />
        <MDBottomNavigationTab
            title="Tab 4"
            icon="~/images/socials/apple_logo.png" />
</MDBottomNavigationBar>

CSS used for second images on Android and iOS:

.bottomNav {
  active-color: #971c59;
  inactive-color: #808080;
  background-color: #fff;
}

I want it to look the same on iOS as it looks on Android. Or at least make the look consistent, therefore, I’ve tried to apply #808080 as an inactive color. For some reason, when I do that, the icons and text become white. If I do any color besides that, the color does change:

Other issues I’ve noticed:

1. The icon on iOS is very large. In my case, the text isn’t even visible because of the icon size. I’ve tried loading a smaller icon and the text was visible but the icon was still to large compared to how it looks on Android.
2. On Android, when the view is loaded, the first tab is selected and activated (meaning that the active-color is visible on the first tab). On iOS, all tabs are inactive (even though the first tab is selected) and even if I programmatically select the first tab like this bottomNavigationBar.selectTab(0) the color is still in active (works if I select every other tab except the first one).