skinClass does not show on mobile app init in Flex 4.6

Question

My skinclass is not getting shown if I start my mobile app without clearing the application data.

I have a custom button component with a skin class in homepage. The skinclass shows change only after I goto any other view and come back to homepage and then I can see the skin applied, but I am having trouble in figuring out a way to display the skin on init of application.

HomeView.mxml

<s:VGroup width="50%" height="100%" >
    <s:SkinnableContainer width="100%" height="100%" skinClass="com.abc.mobile.views.skins.BackgroundFillSkin">
        <s:VGroup width="100%" height="100%" horizontalAlign="center">
            <s:VGroup width="100%" height="50%" verticalAlign="middle" horizontalAlign="center">
                <components:ImageButton buttonMode="true" styleName="btnSrs"
                                        imageSkin="{Images.iconDashboardSR}"
                                        skinClass="com.abc.mobile.views.skins.ImageButtonSkin"
                                        id="btnSrs"/>                               
                <s:Label textAlign="center" verticalAlign="middle" styleName="homeScreenLabel" text="SRs" minWidth="120" id="lblSrs"/>
            </s:VGroup>
            <s:VGroup width="100%" height="50%" verticalAlign="middle" horizontalAlign="center">
                <components:ImageButton buttonMode="true" label="Asdsda"
                                        imageSkin="{Images.iconCR}"
                                        skinClass="com.abc.mobile.views.skins.ImageButtonSkin" id="btnCrs"/>
                <s:Label textAlign="center" verticalAlign="middle" styleName="homeScreenLabel" text="CRs" minWidth="120"/>
            </s:VGroup>             
        </s:VGroup>
    </s:SkinnableContainer>                 
</s:VGroup>

I am using PureMVC framework, so HomeViewMediator calls setupView on CREATION_COMPLETE which just adds a MOUSECLICK event listener on it

homeView.btnSrs.addEventListener(MouseEvent.CLICK,showDashboard);

ImageButtonSkin.mxml SkinClass

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx"
             xmlns:skins="com.abc.mobile.views.skins.*">
    <s:states>
        <s:State name="disabled"/>
        <s:State name="down"/>
        <s:State name="over"/>
        <s:State name="up"/>
    </s:states>     
    <fx:Metadata>
        [HostComponent("com.abc.mobile.views.components.ImageButton")]
    </fx:Metadata>              
    <skins:NotificationButton id="notification" 
                              visible="{int(hostComponent.toolTip)>0}"
                              includeInLayout="{int(hostComponent.toolTip)>0}"
                              depth="1" right="-10" top="-15" label="{hostComponent.toolTip}"
                              fontWeight="bold" fontSize="13" color="0x690502"/>

    <s:BitmapImage source="{hostComponent.getStyle('imageSkin')}"
                   source.up="{hostComponent.getStyle('imageSkin')}"
                   bottom="0" left="0" right="0" top="0"/>
</s:SparkSkin>

ImageButton.as Class

package com.abc.mobile.views.components
{
    import spark.components.Button;     
    [Style(name="imageSkin",type="*")]
    public class ImageButton extends Button
    {
        public function ImageButton()
        {
            super();
            this.buttonMode = true;
        }
    }
}

Update

Adding screenshot of mobile app on init and returning from any other view to homepage

Updated with solution

override public function styleChanged(styleProp:String):void {
            super.styleChanged(styleProp);
            if (styleProp!=null) 
            {
                switch(hostComponent.id){
                    case "btnSrs": bi.source=Images.iconDashboardSR;break;
                    case "btnCrs": bi.source=Images.iconCR;break;

                }                   
                invalidateDisplayList();                    
                return;
            }
        }

Answer 1

source="{hostComponent.getStyle('imageSkin')}" - this binding will not detect changes to style. Try to override styleChanged method to detect 'imageSkin' style changes and re-apply image source.