[ui-material-bottom-navigation] MDTabStrip background-color works on Android, but not on iOS

[Ed-Simmons]

• "@nativescript/core": "~8.1.1"
• "@nativescript/android": "~8.1.1"
• "@nativescript/ios": "~8.1.0"
• "@nativescript-community/ui-material-bottom-navigation": "^6.2.0",

I'm using the root app.scss to set styles globally, but the background-color property is only being applied on Android, iOS seems to be defaulting to white:

MDTabStrip {
  background-color: red;
  color: $gray;
  selected-item-color: $primary;
  un-selected-item-color: $gray;
}

[Ed-Simmons]

@farfromrefug I can resolve the issue by setting the background-color of the MDTabStripItem instead:

MDTabStripItem {
  background-color: <color>;
}

I guess that means the TapStripItems are (by default) transparent on Android and opaque/ white on iOS? I'm not sure which would be the more consistent approach.

[farfromrefug]

@Ed-Simmons not sure. What if you set

MDTabStripItem {
  background-color: transparent;
}

Do you see the red then?

[Ed-Simmons]

@farfromrefug yeah that also works!

[farfromrefug]

@Ed-Simmons then it confirms what you said. The native MDTabStripItem have different background color on creation.

[Ed-Simmons]

@farfromrefug There is a side-effect of setting transparent on Android though, you get this card-esque animation on tap:

https://user-images.githubusercontent.com/70568004/138840898-6161a6f3-aa08-4145-816c-4bc6811440f5.mov

To be clear - either setting MDTabStrip & MDTabStripItem to have the same background color, or leaving the MDTabStripItem's background color on default, removes/ cancels this animation on Android.

[farfromrefug]

@Ed-Simmons i dont see any animation issue on your video. Are you talking about the ripple effect on the tab items?

[Ed-Simmons]

@farfromrefug Yes, sorry that's exactly what I meant. I wasn't expecting a ripple XD

[farfromrefug]

@Ed-Simmons well you are in material plugins so ripple are kind of the thing ;)

[Ed-Simmons]

@farfromrefug FYI I think the default behaviour on iOS has changed in iOS 15 - the TabStrip is now transparent by default, and you have to set a background colour on the TabStripItem.

I would suggest that this issue isn't really required any more, other than a need to update the docs/ css section of the readme.

[farfromrefug]

@Ed-Simmons Thanks for the report! any chance you could make a PR for the doc?