[Tabs] IOS Safe Area Issue when using Tabs and Nested Routing

[limyandi]

Which platform(s) does your issue occur on?

• iOS/Android/Both

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.0.2-2021-06-01-080717-14408
• Cross-platform modules: 8.0.6
• Runtime(s): android: 8.0.0, ios: 8.0.0
• Plugin(s):

  "dependencies": {
  "@angular/animations": "~11.2.7",
  "@angular/common": "~11.2.7",
  "@angular/compiler": "~11.2.7",
  "@angular/core": "~11.2.7",
  "@angular/forms": "~11.2.7",
  "@angular/platform-browser": "~11.2.7",
  "@angular/platform-browser-dynamic": "~11.2.7",
  "@angular/router": "~11.2.7",
  "@nativescript-community/ui-material-bottomnavigationbar": "^5.3.2",
  "@nativescript-community/ui-material-tabs": "^5.3.3",
  "@nativescript/angular": "~11.8.0",
  "@nativescript/core": "~8.0.0",
  "@nativescript/theme": "~3.0.1",
  "nativescript-ui-sidedrawer": "~9.0.3",
  "reflect-metadata": "~0.1.13",
  "rxjs": "~6.6.7",
  "zone.js": "~0.11.4"
  },
  "devDependencies": {
  "@angular/compiler-cli": "~11.2.7",
  "@nativescript/android": "8.0.0",
  "@nativescript/ios": "8.0.0",
  "@nativescript/types": "^8.0.1",
  "@nativescript/webpack": "beta",
  "@ngtools/webpack": "~11.2.6",
  "@schematics/angular": "^12.0.2",
  "typescript": "~4.0.0"
  },

Please, tell us how to recreate the issue in as much detail as possible.

I uses the "@nativescript-community/ui-material-tabs" plugin to show tabs in IOS and Android.

The problem is, the component "strangely" affect the top safe area in IOS (tested in IPhone 11 Pro) as you can see below:

I have troubleshoot and determine the issue to be when using MD Tabs and Nested Routing (where the Action Bar is defined in children tab).

Below is the associated 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://&#xf015;" 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; // as can be seen the action bar is hidden in the parent tabs component.
  }

  ngOnInit(): void {
    // Init your component properties here.
    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",
      },
    ]
}]
...

And finally, the "featured" children tab component which defines the action bar (which takes up the 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="&#xf0c9;" (tap)="openDrawer()"></Label>
  </GridLayout>
</ActionBar>

<Label text="You are in featured component"></Label>

Is there any code involved?

https://github.com/limyandi/fuzzy-octo-memory

[farfromrefug]

@limyandi not sure where the issue comes from. Lot of moving part in your code. If you can reproduce without angular, 3rd party plugins, and a very simple repro code i will fix it

[csimpi]

@farfromrefug Why would he reproduce without angular when he's getting the issue with Angular? He has even linked the whole repo and everything :D

[farfromrefug]

@csimpi to know if the issue is angular related or not! i wont fix any angular issue as i dont work with it. You are welcome to fix it and create a PR

[fpaaske]

@limyandi it's been a while so you might already have solved it, but if not, try replacing page-router-outlet with a router-outlet in home.component.html