ion-tabs flashes previous view on android

Question

I am finding that when navigating between views using the ion-tabs on an android device I get brief flash of a previous view before navigating to the tab I have selected. This doesn't happen on an IOS device.

Here is my tabs code:

    <ion-tab title="{{ 'personal' | translate }}" icon-off="ion-ios-person" icon-on="ion-ios-person" ui-sref="app.memberDetails">
        <ion-nav-view name="profile-details"></ion-nav-view>
    </ion-tab>
    <ion-tab title="{{ 'contacts' | translate }}" icon-off="ion-ios-telephone" icon-on="ion-ios-telephone" ui-sref="app.contact" >
        <ion-nav-view name="profile-contact"></ion-nav-view>
    </ion-tab>
    <ion-tab title="{{ 'banking' | translate }}" icon-off="ion-card" icon-on="ion-card" ui-sref="app.banking">
        <ion-nav-view name="profile-banking"></ion-nav-view>
    </ion-tab>
    <ion-tab title="{{ 'employer' | translate }}" icon-off="ion-ios-briefcase" icon-on="ion-ios-briefcase"  ui-sref="app.employer">
        <ion-nav-view name="profile-employer"></ion-nav-view>
    </ion-tab>
    <ion-tab title="{{ 'comm' | translate }}" icon-off="ion-email" icon-on="ion-email" ui-sref="app.communication" >
        <ion-nav-view name="profile-communication"></ion-nav-view>
    </ion-tab>     
</ion-tabs>

and this is my states code:

.state('app.memberDetails', { url: "/personal", views: { 'profile-details': { templateUrl: "app/profile/views/membersPersonalDetails.html", controller: 'membersController' } } })

        .state('app.contact', {
            url: "/contact",
            views: {
                'profile-contact': {
                    templateUrl: "app/profile/views/contactDetails.html",
                    controller: 'membersController'
                }
            }
        })

        .state('app.banking', {
            url: "/banking",
            views: {
                'profile-banking': {
                    templateUrl: "app/profile/views/bankingDetails.html",
                    controller: 'membersController'
                }
            }
        })

        .state('app.employer', {
            url: "/employer",
            views: {
                'profile-employer': {
                    templateUrl: "app/profile/views/employerDetails.html",
                    controller:'employersController'
                }
            }
        })

        .state('app.communication', {
            url: "/communication",
            views: {
                'profile-communication': {
                    templateUrl: "app/profile/views/communication.html"
                    //controller:'communicationController'
                }
            }
        })

raven.zuo raven.zuo · Accepted Answer · 2016-08-11T10:00:55

We have the same problem, our solution is to use https://github.com/shprink/ionic-native-transitions and instead calling $state.go, we call $ionicNativeTransitions.stateGo. And replace ui-sref with native-ui-sref.

ion-tabs flashes previous view on android

1 Answers