Navigation bar is not shown in iOS

Ionic Framework ionic-v3
1

I moved my custom toolbar to a new component and then I referenced it in my Home page, but in iOS the navigation bar is not shown:

When using component:

ios
ios.JPG901×189 13.4 KB

When not using component:

ios2
ios2.JPG891×219 13.2 KB

I want to use component but with navigation bar!

<ion-header dir="rtl">
	<ion-toolbar color="primary">
		<ion-buttons left>
			<button ion-button icon-only color="royal" menuToggle>
				<ion-icon name="menu"></ion-icon>
			</button>
		</ion-buttons>

		<ion-title><img class="logo_title" src="assets/imgs/ionic_logo.svg"></ion-title>

		<ion-buttons class="btn_tool" right>
			<button ion-button icon-only color="royal">
					<ion-icon name="search"></ion-icon>
				</button>
		</ion-buttons>

		<ion-buttons class="btn_tool" right>
			<button ion-button icon-only color="royal">
				<ion-icon name="cart"></ion-icon>
			</button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>

Thanks!

2

In my experience using components for <ion-toolbars> doesn’t work well. It seems like the ionic css depends on <ion-header> having a direct child of <ion-toolbar> with children of <ion-buttons> for proper formatting.

I know it’s frustrating to duplicate headers on each page. I have had success with making each button a component which gets you partially to your goal.

Maybe someone else here has insight into a way to make the header a component.