[Solved] Setting rootNav shows blank white screen on iOS

Ionic Framework ionic-v3
1

I have an app with tabs.

this.nav is a NavController instance

If I use this.nav.rootNav.setRoot(LoginPage) to send the user back to the login page and out of the tab stack, on android it seems to work fine, but on iOS (on device and in the browser) this causes the page to show a blank white screen

Anyone have any ideas why?

2

Could you provide a demo app in a git repo for reference? It’s a bit hard to understand the issue you’re having without seeing an example

3

I will try to when I get a spare moment.

It basically seems like it happens when I try to use nav.setRoot() to change the root view to or from a Tabs view.

It seems to happen on iOS and android actually

I have recorded a screen grab so will try to link it

I think I have fixed it by wrapping in a timeout. It seems to happen when I use setRoot in a callback for an Alert. Seems like the Alert closing interferes, but if the timeout is there it doesn’t seem to happen and it navigates correctly to the TabsPage

  skip() {
    let confirm = Alert.create({
      title: 'Skip',
      message: 'Are you sure you want to skip changing your PIN?',
      buttons: [
        { text: 'Cancel', role: 'cancel' },
        { text: 'Skip', handler: () => {
          setTimeout(() => {
            this.nav.setRoot(TabsPage);
          }, 500)
          }
        }
      ]
    });
    this.nav.present(confirm);
  }
4

Solved.

Relates to Problem to call setRoot in my Alert callback

I saw in the docs that Alerts have a .dismiss() function which returns a promise, and if changing the rootNav in an Alert close handler, you must call .dismiss() and then call nav.setRoot() inside the returned promise

skip() {
    let confirm = Alert.create({
      title: 'Skip',
      message: 'Are you sure you want to skip changing your PIN?',
      buttons: [
        { text: 'Cancel', role: 'cancel' },
        { text: 'Skip', handler: () => {
          confirm.dismiss().then(() => {
            this.nav.setRoot(TabsPage);
          })
          }
        }
      ]
    });
    this.nav.present(confirm);
  }