ListView is adding large gap of empty space in the view when new items are added dynamically using an observable input

[kfw9257]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Tell us about the problem

I have a RadListView being populated by an observable. When I add additional items to the observable, the list view updates with the additional items by I see an additional large added between the new items and the old items in the list. This gap disappears when you start scrolling the list. I've tried dynamically running the refresh function on the list view element when the observable updates but it didn't fix the issue

Which platform(s) does your issue occur on?

iOS version 14.5

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

• Progress NativeScript UI plugin version: nativescript-ui-listview: "^9.0.4",
• CLI: (run tns --version to fetch it): 7.0.11
• Cross-platform modules: (the version of tns-core-modules in the package.json): "@nativescript/android": "7.0.0", "@nativescript/ios": "6.5.4",
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json) N/A

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

1. Login to the application
2. Generate the new items
3. Navigate to the list view where the new items are created

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

(You can paste entire code snippets, link to playground demo or attach a runnable project)

          <RadListView [items]="items" #listView>
              <ng-template tkListItemTemplate let-item="item" let-i="index">
                <StackLayout class="item-group">
                  <Label
                    id="date"
                    [text]="item.date | date: 'longDate':'UTC'"
                  ></Label>
                  <GridLayout>
                    <CardView
                      class="card-style"
                      radius="3"
                      elevation="4"
                      shadowOpacity=".11"
                      (tap)="onViewDetails(item)"
                    >
                      <GridLayout columns="100,*,auto,15" rows="*,*,*,5">
                        <GridLayout
                          col="0"
                          row="0"
                          rowSpan="4"
                          width="100"
                          height="100"
                          id="image-divider"
                        >
                          <AbsoluteLayout width="100" height="100">
                            <Image
                              *ngIf="item.image"
                              id="image-divider"
                              width="100"
                              height="100"
                              col="0"
                              row="0"
                              rowSpan="4"
                              stretch="aspectFill"
                              verticalAlignment="stretch"
                              [src]="item.thumbnail"
                            >
                            </Image>
                            <Label
                              *ngIf="!item.image && !done"
                              text="&#xe935;"
                              class="ico not-done"
                              left="30"
                              top="30"
                            ></Label>
                            <Label
                              *ngIf="!item.image && item.done"
                              text="&#xe911;"
                              class="ico done"
                              left="30"
                              top="40"
                            ></Label>
                            <Label
                              *ngIf="item.parent !== null"
                              text="&#xe90a;"
                              class="ico stuff"
                              left="5"
                              top="5"
                            ></Label>
                          </AbsoluteLayout>
                        </GridLayout>
                        <Label
                          id="stuff"
                          class="card-stuff"
                          *ngIf="item.type === 10; else name"
                          col="1"
                          row="0"
                          text="New Item"
                        ></Label>
                        <ng-template #name>
                          <Label
                            id="name"
                            class="card-style__name"
                            col="1"
                            row="0"
                            [text]="item.name"
                          ></Label>
                        </ng-template>
                        <Label
                          id="quantity"
                          class="card-style__quantity"
                          col="1"
                          row="1"
                          [text]="item.quantity"
                        ></Label>
                        <Label
                          *ngIf="!item.old"
                          class="status"
                          [ngClass]="getStatusClass(item.status)"
                          col="2"
                          row="2"
                          [text]="getStatusDisplay(item.status)"
                        ></Label>
                        <Label
                          *ngIf="item.old"
                          class="status"
                          [ngClass]="'status__old'"
                          col="2"
                          row="2"
                          [text]="'OLD ITEM'"
                        ></Label>
                      </GridLayout>
                    </CardView>
                  </GridLayout>
                </StackLayout>
              </ng-template>
              <ng-template tkListViewFooter>
                <Label class="footer-space"></Label>
              </ng-template>
            </RadListView>

[kfw9257]

I was able to resolve my issue by running listView.nativeElement.refresh() when the user navigates to the view.