Dynamic change of CSS class for TabStrip not working (Tabs/BottomNavigation) #8459

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.5.0
• Cross-platform modules: 6.5.0
• Android Runtime: 6.5.0
• iOS Runtime: 6.5.0

Describe the bug
When changing a CSS class of TabStrip programmatically the changes are not applied or only partially applied. The issue is present for both Android and iOS but has different behavior.

To Reproduce
Use this Playground demo or the following structure:

.defaultCssClass {
    background-color: #79d2a6;
    highlight-color: green;
    selected-item-color: yellow;
    un-selected-item-color: blue;
}

.newTabsClass {
    background-color: orangered; /* Works on iOS; not working on Android */
    highlight-color: lightgreen;  /* Works on both */
    selected-item-color: whitesmoke;  /* Not Working on iOS; Works on Android BUT only after tab change */
    un-selected-item-color: pink; /* Not Working on iOS; Works on Android BUT only after tab change */
}

and then change defaultCssClass with newTabsClass

export function onButtonTap(args: EventData) {
    let rootTabs = getRootView() as Tabs;
    console.log(`rootTabs: ${rootTabs}`);

    rootTabs.tabStrip.className = "newTabsClass";
}

Where the Tabs is the root component (or not)

e.g. app-root.xml

<Tabs>
    <TabStrip class="defaultCssClass">
        <TabStripItem>
            <Label text="Home"></Label>
            <Image src="res://home"></Image>
        </TabStripItem>
        <TabStripItem>
            <Label text="Settings"></Label>
            <Image src="res://settings"></Image>
        </TabStripItem>
        <TabStripItem>
            <Label text="Search"></Label>
            <Image src="res://search"></Image>
        </TabStripItem>
    </TabStrip>
    <TabContentItem>
        <GridLayout>
            <Button text="Change TabStrip styles dynamically" tap="onButtonTap" />
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Settings Page" class="h2 text-center">
            </Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Search Page" class="h2 text-center">
            </Label>
        </GridLayout>
    </TabContentItem>
</Tabs>

Result

background-color: orangered; // Works on iOS; not working on Android
highlight-color: lightgreen; // Works on both
selected-item-color: whitesmoke; // Not Working on iOS; Works on Android BUT only after tab change
un-selected-item-color: pink; // Not Working on iOS; Works on Android BUT only after tab change

Expected behavior
All styles to be applied

Sample project
https://play.nativescript.org/?template=play-tsc&id=dohnYC&v=4