Skip to content

Bottom Navigation tab does not return to its initial style when it's no longer active on android #8235

@vtrifonov

Description

@vtrifonov

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 6.3.2
  • Cross-platform modules: 6.3.2
  • Android Runtime: 6.3.1
  • iOS Runtime: 6.3.0

Describe the bug
When there's a css class for active TabStripItem and there's no default css class for the TabStripItem after selecting the tab the class is applied and when the tab is changed it does not return to the previos state.
This happens only on Android, but not on iOS.

To Reproduce
Create a new application and add bottom-navigation inside and add the following style:

TabStripItem:active {
    background-color: red;
}

Run the application on android and select the second tab. The background of the initial tab stays red and does not return to its initial state.

Playground demo

Expected behavior

The first tab should return to its initial state.

Additional context
If there's a default style for the TabStripItem like this:

TabStripItem {
    background-color: green;
}

it will be applied when the tab is no longer selected. So this can be used as a workaround.

Here's the same playground demo with the applied workaround

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions