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

Bottom Navigation background color not applying properly #464

Open edusperoni opened 4 months ago

edusperoni commented 4 months ago

Which platform(s) does your issue occur on?

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

Please, tell us how to recreate the issue in as much detail as possible.

Setting the background color on the TabStrip does not apply on iOS.

Is there any code involved?

on the demo file demo-snippets/vue/BottomNavigation.vue, add a green background:

                <MDTabStrip backgroundColor="green">
                    <MDTabStripItem backgroundColor="transparent">
                        <Label text="First" />
                        <Image src="font://mdi-home" class="mdi" />
                    </MDTabStripItem>

This is not applied.

This issue is apparently 2 issues:

  1. the background color on the TabStrip itself isn't set (only barTintColor). (src/bottom-navigation/index.ios.ts, adding this.viewController.tabBar.backgroundColor = value instanceof Color ? value.ios : value; seems to add the color correctly)
  2. the TabStripItem has a default background so it needs to be set to a transparent background for the previous change to apply

Unsure what's the best solution for this issue (either setting the tabBar background or using the tabBar background as the default background for the items).

farfromrefug commented 4 months ago

@edusperoni thanks for the report should be fixed in latest