Description
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.