Error when using a TabView in a custom modal


#1

When i use a TabView in a modal and i want to switch from tab i get the following error in iOS:

file:///app/tns_modules/tns-core-modules/ui/tab-view/tab-view.js:182:42: JS ERROR TypeError: undefined is not an object (evaluating ‘page.frame._getNavBarVisible’)

This issue does not occur when using Android. Please find information below:

items.component.ts

import { Component, ViewContainerRef } from "@angular/core";
import { ModalDialogService } from "nativescript-angular/modal-dialog";
import { ItemModalComponent } from "./modal.component";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent {

    constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) {}

    showModal() {
        let options = {
            context: {
				title: "Item modal"
			},
            fullscreen: false,
			viewContainerRef: this.vcRef
        };

        this.modal.showModal(ItemModalComponent, options).then(res => {
			console.dump(res);
        });
    }
}

items-component.html

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
   <Button text="Press me" (tap)="showModal()"></Button>
</StackLayout>

modal.component.ts

import { Component, ElementRef, ViewChild } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/directives/dialogs";

@Component({
    selector: "item-modal",
    templateUrl: "./item/item-modal.html"
})

export class ItemModalComponent {
    public msg:string;
    public title:string;

    public constructor(private params: ModalDialogParams) {
        this.title = params.context.title || '';
    }
 
    public close(res: string) {
        this.params.closeCallback(null);
    }
}

item-modal.html

<GridLayout class="fl-modal">
    <GridLayout class="action-bar fl-modal-header" height="48" rows="*" columns="*, 48">
        <Label class="fl-modal-title" row="0" col="0" [text]="title"></Label>
        <Button class="fa fl-modal-close" row="0" col="1" text="close" (tap)="close()"></Button>
    </GridLayout>
    <TabView #tabView class="tab-view">
        <StackLayout *tabItem="{title: 'Foto\'s'}"><Label text="Foto's"></Label></StackLayout>
        <StackLayout *tabItem="{title: 'Historie'}"><Label text="Historie"></Label></StackLayout>
        <StackLayout *tabItem="{title: 'Opmerkingen'}"><Label text="Opmerkingen"></Label></StackLayout>
    </TabView>
</GridLayout>

#2

I have the same issue on IOS.
nativescript version: 2.5.3
tns-core-module: 2.5.2