iOS TabView overlap with other component in GridLayout or StackLayout

[bellkin]

Environment "nativescript": { "tns-android": { "version": "5.4.0" }, "tns-ios": { "version": "5.4.0" }, }, "dependencies": { "@angular/animations": "7.2.15", "@angular/common": "7.2.15", "@angular/compiler": "7.2.15", "@angular/core": "7.2.15", "@angular/forms": "7.2.15", "@angular/http": "7.2.15", "@angular/platform-browser": "7.2.15", "@angular/platform-browser-dynamic": "7.2.15", "@angular/router": "7.2.15", "@progress-nativechat/nativescript-nativechat": "2.0.4", "kinvey-nativescript-sdk": "3.12.6", "nativescript-accelerometer": "2.0.1", "nativescript-angular": "7.2.4", "nativescript-background-http": "3.4.0", "nativescript-camera": "4.4.1", "nativescript-image": "2.1.3", "nativescript-geolocation": "5.1.0", "nativescript-imagepicker": "6.2.0", "nativescript-intl": "3.0.0", "nativescript-iqkeyboardmanager": "1.4.0", "nativescript-social-share": "1.5.2", "nativescript-theme-core": "1.0.6", "nativescript-ui-autocomplete": "4.0.0", "nativescript-ui-calendar": "4.0.0", "nativescript-ui-chart": "4.0.2", "nativescript-ui-dataform": "4.0.0", "nativescript-ui-gauge": "4.0.0", "nativescript-ui-listview": "6.3.0", "nativescript-ui-sidedrawer": "6.0.0", "reflect-metadata": "0.1.13", "rxjs": "6.5.2", "rxjs-compat": "6.5.2", "tns-core-modules": "5.4.0", "zone.js": "0.9.1" }, "devDependencies": { "@angular/compiler-cli": "7.2.15", "@ngtools/webpack": "7.3.6", "nativescript-dev-typescript": "0.9.0", "nativescript-dev-webpack": "0.22.0", "tns-platform-declarations": "5.4.0", "typescript": "3.2.2" } Describe the bug in iOS, put TabView in row1 of GridLayout or StackLayout, it will overlap row0, tested with 5.0.0 through 5.4.0

To Reproduce

<GridLayout rows="auto *">
    <GridLayout row="0" columns="* * *" class="heading-bgcolor">
        <StackLayout col="0" class="help-tab-font-style" [ngClass]="{'help-tab-selected': tabSelectedIndex===0, 'help-tab-unselected': tabSelectedIndex!==0}"
            (tap)="tabSelectedIndex=0" verticalAlignment="center">
            <Label text="1111" class="vcenter hcenter"></Label>
        </StackLayout>
        <StackLayout col="1" class="help-tab-font-style" [ngClass]="{'help-tab-selected': tabSelectedIndex===1, 'help-tab-unselected': tabSelectedIndex!==1}"
            (tap)="tabSelectedIndex=1" verticalAlignment="center">
            <Label text="2222" class="vcenter hcenter"></Label>
        </StackLayout>
        <StackLayout col="2" class="help-tab-font-style" [ngClass]="{'help-tab-selected': tabSelectedIndex===2, 'help-tab-unselected': tabSelectedIndex!==2}"
            (tap)="tabSelectedIndex=2" verticalAlignment="center">
            <Label text="3333" class="vcenter hcenter"></Label>
        </StackLayout>
    </GridLayout>
    <TabView row="1" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded($event)">
        <StackLayout *tabItem="{title: ' ', textTransform: 'none'}">
            <Label text="111111111111" class="vcenter hcenter"></Label>
        </StackLayout>
        <StackLayout *tabItem="{title: ' ', textTransform: 'none'}">
            <Label text="222222222222" class="vcenter hcenter"></Label>
        </StackLayout>
        <StackLayout *tabItem="{title: ' ', textTransform: 'none'}">
            <Label text="333333333333" class="vcenter hcenter"></Label>
        </StackLayout>
    </TabView>
</GridLayout>

Expected behavior On android, there will be "1111","2222","3333" on top, and "111111111111" on bottom.

Sample project https://play.nativescript.org/?template=play-ng&id=Vanjw5&v=14

Additional context also tested with iosOverflowSafeArea=true or false, no difference.

[tsonevn]

HI @bellkin, Thank you for the provided sample project. I was able to recreate the issue on my side and will mark it as a bug. As a temporary solution, I would suggest nesting the TabView in GridLayout, which should solve the overlapping issue. For example:

<GridLayout rows="auto *">

    <GridLayout row="0" columns="* * *" class="heading-bgcolor">
        <StackLayout col="0" class="help-tab-font-style" [ngClass]="{'help-tab-selected': tabSelectedIndex===0, 'help-tab-unselected': tabSelectedIndex!==0}"
            (tap)="tabSelectedIndex=0" verticalAlignment="center">
            <Label text="FAQ" class="vcenter hcenter"></Label>
        </StackLayout>

        <StackLayout col="1" class="help-tab-font-style" [ngClass]="{'help-tab-selected': tabSelectedIndex===1, 'help-tab-unselected': tabSelectedIndex!==1}"
            (tap)="tabSelectedIndex=1" verticalAlignment="center">
            <Label text="CONTACT" class="vcenter hcenter"></Label>
        </StackLayout>

        <StackLayout col="2" class="help-tab-font-style" [ngClass]="{'help-tab-selected': tabSelectedIndex===2, 'help-tab-unselected': tabSelectedIndex!==2}"
            (tap)="tabSelectedIndex=2" verticalAlignment="center">
            <Label text="WARRANTY" class="vcenter hcenter"></Label>
        </StackLayout>
    </GridLayout>
<GridLayout row="1">
    <TabView row="1" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded($event)">

        <StackLayout *tabItem="{title: ' ', textTransform: 'none'}">
            <Label text="FAQc" class="vcenter hcenter"></Label>
        </StackLayout>

        <StackLayout *tabItem="{title: ' ', textTransform: 'none'}">
            <Label text="CONTACTc" class="vcenter hcenter"></Label>
        </StackLayout>

        <StackLayout *tabItem="{title: ' ', textTransform: 'none'}">
            <Label text="WARRANTYc" class="vcenter hcenter"></Label>
        </StackLayout>

    </TabView>
</GridLayout>
</GridLayout>

[room58bot]

@tsonevn Any update on this one? I'm experiencing the same issue on iOS

[KonstantinObuhov]

Strange behavior of action bar in modal with the frame when TabView wrapped with GridLayout.

Try open wizard on ios device and navigate steps you'll see action bar doesn't work correctly if in App component leave TabView without GridLayout it works as expected.

https://play.nativescript.org/?template=play-vue&id=6K9gjF&v=4