Tabs showing black screen

Hi!
Im having a weird issue of a black screen when I navigate to a tabs component, gif for better explanation:

The screens shows after a couple of clicks.
Basically what i did was this:

tabs.html:

<ion-tabs>
  <ion-tab [root]="tab.component" *ngFor="let tab of tabs" [rootParams]="data" tabTitle="{{ tab.name }}"></ion-tab>
</ion-tabs>

tabs.ts:

constructor(
    navParams: NavParams
  ) {

    this.mySelectedIndex = navParams.data.tabIndex || 0;
    this.user = authService.getUser();

    if(this.user.type = "user"){
          this.setUserTabs();
    }else{
      this.setClientTabs();
    }

    private setUserTabs() {
        this.tabs = [
          {
        name: 'Pending',
        component: JobsPending
      },
      {
        name: 'Confirmed',
        component: JobsConfirmed
      },
      {
        name: 'Complete',
        component: JobsDone
      },
    ];
  }

  private setClientTabs(){
    this.tabs = [
      {
        name: 'Confirmados',
        component: JobsConfirmed
      },
      {
        name: 'Pendientes',
        component: JobsPending
      },
      {
        name: 'Completados',
        component: JobsDone
      }
    ];
  }        

Anyone had this issue before? Or thinks that my approach of “dynamic” tabs is not the right way to go?

Thanks!

My ionic info is:
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.6
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

If any one has this issue, make sure you are initialising the tabs components :expressionless:

1 Like

How do you initialize tabs component?

2 Likes