White top border cannot be removed (and can't change color)

[demetrio812]

Hello, while using the component with a dark theme I noticed there is a white line, I am not able to remove it.

This is my css:

.bottom-nav {
    tab-active-color: white;
    tab-inactive-color: #c56856;
    tab-background-color: #4A4A4A;
}

This is the component:

<BottomNavigation [tabs]="homeTabsService.tabs"
                      (tabSelected)="onBottomNavigationTabSelected($event)"
                      class="bottom-nav">
    </BottomNavigation>

And this is the visible white line:

Thanks, Dem

[henrychavez]

Hi, I'll release an update of the plugin with a new property to change that line color and support for iPhone X. for now you can change that line color with the code below:

bottomNavigationLoaded(args) {
  const bottomNavigation = args.object;
  if (isIOS) {
    bottomNavigation.ios.keyLine.backgroundColor = new Color('green').ios;
  }
}

you should set that function in the loaded event like this

<BottomNavigation
  ...
  (loaded)="bottomNavigationLoaded($event)">
  ...
</BottomNavigation>

I'll let you know when the release is ready so you can forget this and use the new property to change that line color. 😄

[demetrio812]

Thanks for your support! The workaround works for now :)

[henrychavez]

@demetrio812 now you can use the keyLineColor property or tab-keyline-color css property to change the color of the top border 😄

[demetrio812]

This works perfectly! Thank you!