StatusBar comes over Navbar when using Navbar as a common component - IOS only

Ionic Framework ionic-v3
1

I have a navbar in my application which consists a logout button throughout the application (except login screen)
As this behavior remains constant I decided to create a common component for Nav Bar as follows

  <ion-navbar *navbar>
        <ion-title><img src={{titleImage}} /> {{pageTitle}}</ion-title>
        <ion-buttons end>
            <button (click)="logoutClick()"> Logout</button>
        </ion-buttons>
    </ion-navbar>

referring it into all the pages as

<navbar-selector [titleImage]="titleImage" [pageTitle]="pageTitle" ></navbar-selector>

My component:

@Component({
    selector: 'navbar-selector',
    template: `
    <ion-navbar *navbar>
        <ion-title><img src={{titleImage}} /> {{pageTitle}}</ion-title>
        <ion-buttons end>
            <button (click)="logoutClick()"> Logout</button>
        </ion-buttons>
    </ion-navbar>`
})
export class NavbarComponent {
    @Input()
    pageTitle: string;
    @Input()
    titleImage: string;

    error: boolean = false;
    errorResponse: any;

    constructor(private nav: NavController, private userAuthService: UserAuthService) {
        this.userAuthService = userAuthService;
        this.nav = nav;
    }

    logoutClick() {
      //logout logic
    }
}

The problem here is that when ever I use this reusable component, the status bar comes over the NavBar cluttering information from both. This happens only with IOS.

Once I remove the reusable component and utilize navbar in each page, navbar comes under status bar perfectly.

My work around to this problem:
added margin-top:20px for IOS only on navbar-selector element. I would like to know if there is a better way to handle.

2

The issue is due to how the navbar works. The nav-bar needs to be pulled out into other elements through content project. Since now you’re using another component, it’s not pull them out and applying the right classes that are needed.

3

1 year later, I have the same issue. Any solution?