I am utilizing the "@nativescript-community/ui-material-tabs" plugin to display tabs on IOS and Android.
https://i.sstatic.net/zixkl.png
However, there seems to be a problem as the component is affecting the top safe area in IOS (specifically tested on IPhone 11 Pro) as seen in the image below:
https://i.sstatic.net/ZWPcB.png
After troubleshooting, I found that the issue arises when using MD Tabs and Nested Routing (especially when the Action Bar is defined in a children's tab).
Here are the relevant components:
app.component.html
<page-router-outlet></page-router-outlet>
app-routing.module.ts
import { NgModule } from '@angular/core'
import { Routes } from '@angular/router'
import { NativeScriptRouterModule } from '@nativescript/angular'
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{
path: 'home',
loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule),
}
]
@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule],
})
export class AppRoutingModule {}
home.component.html
<MDTabs tabsPosition="bottom">
<MDTabStrip>
<MDTabStripItem>
<Label text="Featured"></Label>
<Image src="font://" class="fas"></Image>
</MDTabStripItem>
</MDTabStrip>
<MDTabContentItem>
<page-router-outlet name="featuredTab"></page-router-outlet>
</MDTabContentItem>
</MDTabs>
home.component.ts
...
export class HomeComponent implements OnInit {
constructor(private routerExtension: RouterExtensions,
private activeRoute: ActivatedRoute, private page: Page) {
this.page.actionBarHidden = true; // The action bar is hidden in the parent tabs component.
}
ngOnInit(): void {
this.routerExtension.navigate(
[
{
outlets: {
featuredTab: ["featured"]
},
},
],
{ relativeTo: this.activeRoute }
)
}
}
home-routing.module.ts
...
const routes: Routes = [
{ path: '', redirectTo: "home", pathMatch: 'full' },
{
path: "home",
component: HomeComponent,
children: [
{
path: "featured",
component: NSEmptyOutletComponent,
loadChildren: () =>
import("~/app/home/featured/featured.module").then(
(m) => m.FeaturedModule
),
outlet: "featuredTab",
},
]
}]
...
The "featured" children tab component defines the action bar which occupies space in the ios safe area:
featured.component.html
<ActionBar>
<NavigationButton visibility="hidden"></NavigationButton>
<GridLayout columns="50, *">
<Label class="action-bar-title" text="Home" colSpan="2"></Label>
<Label class="fas" text="" (tap)="openDrawer()"></Label>
</GridLayout>
</ActionBar>
<Label text="You are in featured component"></Label>
For testing purposes, here is the GitHub link: https://github.com/limyandi/fuzzy-octo-memory