Ionic 2 - Screen Flash

Question

I have a login page and a homepage. I use native storage to set an item which will check if the user has already logged in or not (Facebook or Google authentication). If the item has a value (this check happens ins app.componenet.ts )it is directly navigated to homepage. Once a user logs in and if happens to minimize the app and after some period of time. When the user again opens the app,after few sec's of loading I get to see the login screen (which should not be visible as the user has already logged in) for 1 sec and then it navigates to homepage.

This is my app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
import { NativeStorage } from '@ionic-native/native-storage';
import { TabsPage } from '../pages/tabs/tabs';
import { Facebook } from 'ionic-native';
import { GooglePlus } from '@ionic-native/google-plus';
@Component({
  templateUrl: 'app.html',

})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = LoginPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private nativeStorage: NativeStorage, private alertCtrl: AlertController, private googlePlus : GooglePlus) {
    platform.ready().then(() => platform.ready().then(() => {
      this.nativeStorage.getItem("userId").then((data) => {
        console.log(data.userExists);
        this.rootPage = TabsPage;
        this.nav.push(TabsPage);

      }, (error) => {
        console.log("No data in storage");
        this.nav.push(LoginPage);
      })
      statusBar.styleDefault();
      splashScreen.hide();
    })

    )
  }

}

sebaferreras sebaferreras · Accepted Answer · 2017-06-21T06:37:55

That happens because you're first assigning the LoginPage to the rootPage

rootPage: any = LoginPage;

and then you're setting it again after the promise is resolved:

this.rootPage = TabsPage;

In order to fix that, just initialize the rootPage to null at first, and then it will be initialized with the right page when the promise is resolved:

@Component({
  templateUrl: 'app.html',
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = null; // <- I've changed this line

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private nativeStorage: NativeStorage, private alertCtrl: AlertController, private googlePlus : GooglePlus) {
    platform.ready().then(() => platform.ready().then(() => {
      this.nativeStorage.getItem("userId").then((data) => {
        console.log(data.userExists);
        this.rootPage = TabsPage;
        // this.nav.push(TabsPage); <- You don't need this line

      }, (error) => {
        console.log("No data in storage");
        // this.nav.push(LoginPage); <- Remove this line too :)
        this.rootPage = LoginPage; // <- Set the LoginPage as root
      })
      statusBar.styleDefault();
      splashScreen.hide();
    })

    )
  }

}

Please also notice that I've changed a few more lines. You don't need to push a page after setting it as the root page. And the other change, is that if you want to show the LoginPage at first (because the user is not logged in yet) it should be set as the rootPage (and not be pushed).

Ionic 2 - Screen Flash

1 Answers