Navbar acting strange on both iOS and Android

Ionic Framework ionic-v3
1

Hi. I am quite new to Ionic and I’m trying to make a simple To-Do List app, however, the navbar seems to be too big on Android and on iOS it overlaps the status bar. This is my code:

<ion-header>
  <ion-navbar hideBackButton color='pastelblue'>
    <ion-title>
      myTasks
    </ion-title>
    
    <ion-buttons end>
    	<button ion-button icon-only end>
    		<ion-icon name="add-circle"></ion-icon>
    	</button>
   	</ion-buttons>	
   	
   	<ion-buttons>
   		<button ion-button icon-only>
    		<ion-icon name="swap"></ion-icon>
    	</button>
   	</ion-buttons>

  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

This is what I see with ionic serve --lab:
2018-11-24%2014_47_17-Ionic%20Lab

Here is my ionic info:
js%20command%20prompt

What could be causing this? Any help is appreciated, thanks!

2

Try with this HTML to solve Android issue:

<ion-header>
    <ion-navbar hideBackButton color="pastelblue">        

        <ion-buttons start>
            <button ion-button icon-only>
                <ion-icon name="swap"></ion-icon>
            </button>
        </ion-buttons>
        
        <ion-title>
            myTasks
        </ion-title>
        
        <ion-buttons end>
            <button ion-button icon-only end>
                <ion-icon name="add-circle"></ion-icon>
            </button>
        </ion-buttons>        

    </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

iOS issue is duplicated: