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

BottomNavigation inconsistent styles #198

Open butaminas opened 3 years ago

butaminas commented 3 years ago

Which platform(s) does your issue occur on?

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

Screen Shot 2020-10-14 at 16 42 24 Screen Shot 2020-10-14 at 16 42 40

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

Screen Shot 2020-10-14 at 16 40 51 Screen Shot 2020-10-14 at 16 41 13

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:

Screen Shot 2020-10-14 at 16 51 18

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

butaminas commented 3 years ago

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

 

Krilo89 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

butaminas commented 3 years ago

@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 commented 3 years ago

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

Krilo89 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

butaminas commented 3 years ago

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 commented 3 years ago

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

butaminas commented 3 years ago

@farfromrefug both, how do I find you?

farfromrefug commented 3 years ago

@butaminas look for farfromrefuge

butaminas commented 3 years ago

@farfromrefug what's your Discord 4 digit tag?

farfromrefug commented 3 years ago

@butaminas 9161

butaminas commented 3 years ago

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

ray007 commented 3 years ago

badgeColor and badgeTextColor are missing in documentation.

farfromrefug commented 3 years ago

@ray007 thanks. Can you create a PR?

ray007 commented 3 years ago

Done. Even though I think it would have been a lot less work for you 😄

Btw: is there a way to influence position of the badge? On Android it is mostly to the right of the icon, on iOS it seems to cover the icon.

farfromrefug commented 3 years ago

@ray007 thanks! it is not a question of time needed by one or the other. It is a question of community managed projects. Remember that i already spend a LOT of time to maintain all this so that YOU gain time working on your project. If i dont get help then at one point i will stop maintaining those publicly.