BottomNavigation inconsistent styles

[butaminas]

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).

[Krilo89]

Exactly the same problems here.

Only thing I found out is that styling the MDBottomNavigationBar on an iPhone can be done with the inline properties. But with CSS I can't get make it work.

-edit- Update @nativescript/webpackto the latest version fixes the css styling problem. On versions lower than 3.0.3, the scss styling does not compile inside vue files.

[farfromrefug]

First there might be some.differences in design in iOS and android . the libs are not making things exactly the same way on purpose. Now about the image size I would need to take a look but it might be normal too in a way. What is the image size?

[butaminas]

@farfromrefug the image size on my example is 100x100. I've also tried 48x48 - the text was not visible. The bigger problem for me is not the image size but the fact the on iOS the first tab is not selected and I can't force it to be selected.

Even though the first tab is open, all tab icons look like they are inactive.

[farfromrefug]

@butaminas ok please share the image and i ll test it

[butaminas]

Try these. I've used those in the example.

 

[Krilo89]

@butaminas, I got it working (beside the first open tab). You need to use titleVisibility="Always", with a capital A. On an iPhone it will show the icons with text. The default way MaterialUI works is that it only shows the text on the active tab. And with an iPhone, there's no active tab on startup.

Manually selecting a tab after the vue template is loaded, only works for Android. IOS knows that a different tab is selected on load, but doesn't show the content. Because after the first load it's possible to 'navigate' to the first tab, which is already active. This can't be done when you don't select a default tab after loading the template.

I hope you can follow. The image itself does not cover the text, the text just isn't there, unless you select a tab.

[farfromrefug]

@Krilo89 thanks for the report. There are actually many issues in that comp. Working on it right now... will make things consistent as much as possible between ios and android. Also will fix that casing issue...

[farfromrefug]

@butaminas dont use images from assets for now, use res images. See the issue referenced

[butaminas]

@Krilo89 the titleVisibility change worked, I now see the text (if the image is small enough, still not visible if it is too large probably because of the scaling issue) but unfortunately, no tab is still selected (active) by default. I can see the content but every tab is grey until I manually click on one.

@farfromrefug either I use res or assets, visually, I see no difference.

[farfromrefug]

@butaminas are you using images with @2x and such? It works fine here .Look at the demo-vue app. Working on the rest

[Krilo89]

@butaminas , how does your code look when using res? Image sizes are good over here (i'm using res:)

<MDBottomNavigationBar
      titleVisibility="Always"
  >
    <MDBottomNavigationTab title="Home" icon="res://ic_card"></MDBottomNavigationTab>
    <MDBottomNavigationTab title="Tree" icon="res://ic_tree"></MDBottomNavigationTab>
    <MDBottomNavigationTab title="Menu" icon="res://ic_menu"></MDBottomNavigationTab>
  </MDBottomNavigationBar>

The images scale correctly on iPhones and iPads.

[butaminas]

Yup, if I use it exactly like in the demo - it works.

I've tried just loading a png from res as in this example

Is there really no way to avoid res? It really adds a lot more work compared to just loading from assets.

What about loading an icon from external url? (e.g. I would like to use a profile picture instead of icon).

[Krilo89]

Specifically for icons, I don't think you can use something else than res. But maybe @farfromrefug knows more about that. You can always place the same icon in every folder ;)

[farfromrefug]

@butaminas @Krilo89 pushed a new version 5.0.24 fixes a lot! You should have the same behavior on iOS and Android. Also added badgeColor and badgeTextColor. Now about the res thing. You should use it as much as possible! You can use this http://nsimage.brosteins.com/ It is the best thing to do as you will always get beautiful image / good perf on any iOS device. Too big of an image => slow on low device Too small => blurry image on high res devices

[Krilo89]

Really fast and great work @farfromrefug , thanks! My first tab is still not selected on iPhone, even when using @loaded and using the same method as in you last commits: this.$refs.bottomBar.nativeView.selectTab(0);.

I got the following error as well: NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'tag' of undefined at BottomNavigationBarDelegate.bottomNavigationBarShouldSelectItem(file: node_modules/@nativescript-community/ui-material-bottomnavigationbar/bottomnavigationbar.ios.js:30:51)

[farfromrefug]

@Krilo89 don't use selectTab to inititqte the state. Instead set selected index on the bar. It should auto select the first tab. Works on the vue demo. I will fix the error

[Krilo89]

@farfromrefug , I can't really figure out what you mean. I don't see anything that will autoselect the first tab on load in the demo code, only some code for the showing of a badge.

[farfromrefug]

@Krilo89 well can you try the demo vue app ? (you need to run npm run build first in root). There for me the first tab is selected correctly both on ios and android

[butaminas]

First tab is not selected for me either. Can't really understand why as I have it set up like in the demo.
Will try to run the demo later and investigate.

[butaminas]

@farfromrefug for some reason, I can't run the demo. I get an error Cannot find module '@nativescript-community/ui-material-core/scripts/before-prepare.js'

Also, I can see that the demo version is using iOS platform version 6.5.3 when the latest version is 7.0.4 maybe that also have something to do with the fact that the first tab is not selected.

const bottomNavigationBar = args.object
bottomNavigationBar.selectTab(0)

or

this.$refs.bottomBar.nativeView.selectTab(0)

doesn't work either as the Cannot read property 'tag' of undefined error is still there.

[farfromrefug]

@butaminas please use the vue demo app! i did not have time to update the demo app

[butaminas]

Yes, that's what I'm trying to do. I use the vue-demo app. I don't know if I'm doing something wrong, I did all the steps in the docs but I can't start the app from vue-demo folder.

[farfromrefug]

@butaminas are you on slack or discords? let s discuss there

[butaminas]

@farfromrefug both, how do I find you?

[farfromrefug]

@butaminas look for farfromrefuge

[butaminas]

@farfromrefug what's your Discord 4 digit tag?

[farfromrefug]

@butaminas 9161

[butaminas]

@farfromrefug it says that you're not accepting requests, try adding me instead: Butaminas#9301

[ray007]

badgeColor and badgeTextColor are missing in documentation.

[farfromrefug]

@ray007 thanks. Can you create a PR?