RadListView header view does not resize correctly.

[e-burlaka-md]

Did you verify this is a real problem by searching the NativeScript Forum?

Yes

Tell us about the problem

TkListViewHeader view does not resize correctly.

Which platform(s) does your issue occur on?

iOS

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

• Progress NativeScript UI version: "nativescript-ui-listview" - 3.5.11
• CLI: 4.1.2
• Cross-platform modules: 4.1.1
• Runtime(s): "tns-android" - 4.1.3 and "tns-ios" - 4.1.1

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

1. Start the app
2. Show component inside tkListViewHeader view using "ngIf" directive
   Bug: component not visible
3. Scroll list view until the component hides then scroll to top
   Bug: component visible but is displayed over the list items

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

iOS device:

Android device:

import {Component, OnInit, ViewChild} from "@angular/core";
import {ItemService} from "./item.service";
import {ObservableArray} from "tns-core-modules/data/observable-array";
import {RadListViewComponent} from "nativescript-ui-listview/angular";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html"
})
export class ItemsComponent implements OnInit {
    @ViewChild('listView') listView: RadListViewComponent;

    items = new ObservableArray();
    isVisible: boolean = false;

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items.push(this.itemService.getItems())
    }

    onToggle(): void {
        this.isVisible = !this.isVisible;
    }

    onRefresh(): void {
        this.listView.nativeElement.refresh();
    }
}

<ActionBar title="My App" class="action-bar">
  <StackLayout orientation="horizontal">
    <Button text="Toggle" (tap)="onToggle()"></Button>
    <Button text="Refresh" (tap)="onRefresh()"></Button>
  </StackLayout>
</ActionBar>
<GridLayout>
  <RadListView #listView [items]="items">
    <ListViewLinearLayout tkListViewLayout
                          scrollDirection="Vertical"></ListViewLinearLayout>
      <ng-template tkListItemTemplate let-item="item" let-even="even">
        <StackLayout [style.backgroundColor]="even ? 'darkgray' : 'dimgray'">
          <Label [text]="'[' + item?.id + '] ' + item?.name"
                 style="font-size: 35; height: 60;"></Label>
         </StackLayout>
      </ng-template>
      <ng-template tkListViewHeader>
        <StackLayout>
          <Label text="Header" style="font-size: 80; background-color: green;"></Label>
          <Label *ngIf="isVisible" text="Lorem ipsum..."
                 style="font-size: 60; background-color: cornflowerblue;"></Label>
        </StackLayout>
      </ng-template>
    </RadListView>
</GridLayout>

{
	"description": "NativeScript Application",
	"license": "SEE LICENSE IN <your-license-filename>",
	"readme": "NativeScript Application",
	"repository": "<fill-your-repository-here>",
	"nativescript": {
		"id": "org.nativescript.ListTest",
		"tns-android": {
			"version": "4.1.3"
		},
		"tns-ios": {
			"version": "4.1.1"
		}
	},
	"dependencies": {
		"@angular/animations": "~6.0.0",
		"@angular/common": "~6.0.0",
		"@angular/compiler": "~6.0.0",
		"@angular/core": "~6.0.0",
		"@angular/forms": "~6.0.0",
		"@angular/http": "~6.0.0",
		"@angular/platform-browser": "~6.0.0",
		"@angular/platform-browser-dynamic": "~6.0.0",
		"@angular/router": "~6.0.0",
		"nativescript-angular": "~6.0.0",
		"nativescript-theme-core": "~1.0.4",
		"nativescript-ui-listview": "^3.5.11",
		"reflect-metadata": "~0.1.8",
		"rxjs": "~6.1.0",
		"tns-core-modules": "~4.1.0",
		"zone.js": "^0.8.26"
	},
	"devDependencies": {
		"babel-traverse": "6.26.0",
		"babel-types": "6.26.0",
		"babylon": "6.18.0",
		"lazy": "1.0.11",
		"nativescript-dev-typescript": "~0.7.0",
		"typescript": "~2.7.2"
	}
}

[VladimirAmiorkov]

Hi @e-burlaka-md ,

Thank you for reporting this to us. Similar to #762

Closing this issue and relating it to the other, please follow the other issue.