RadListView - Vue - iOS - Images are positioned incorrectly after new data is added from auto load on demand

[bsansone]

Tell us about the problem

On iOS after new data is added from the auto load on demand function, the images that were aligned previously are aligned incorrectly.

Which platform(s) does your issue occur on?

iOS

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

• Progress NativeScript UI plugin version: "nativescript-vue": "~2.4.0", "nativescript-ui-chart": "^7.1.1", "nativescript-ui-listview": "^8.0.1",
• CLI: 6.5.0
• Cross-platform modules: 6.6.0-next-2020-03-20-190017-03
• Runtime(s): 6.5.0 (both)

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

1. Start the application on an iOS device
2. Observe the images in the RadListView are aligned next to each other and positioned correctly for each row
3. Scroll down until next set of rows are returned back from the auto load on demand
4. Scroll back up and observe that the images have moved and are positioned incorrectly and placed into random spots over other rows

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

https://play.nativescript.org/?template=play-vue&id=LkmdZs

[comiguel]

@bsansone I have the same problem of the deformation of the UI elements, try to call resfresh method of radListView. It didn't work for me, maybe my row has many elements, I don't know :( Another problem that I have on iOS is with loadOnDemandMode="Auto", when I get to the end of the items list (when the backend response a empty array of elements), the loadOnDemand callback it gets stuck running infinite times. This is my loadMoreItemsRequested callback: async onLoadMoreItemsRequested(args) { let deactivate = false; try { deactivate = await this.requestMovements(this.lastPageRequested + 1); //Updates the store and return true when there are no more items to retrieve. if (deactivate) { this.showToast('No tienes más movimientos'); } } finally { args.returnValue = !deactivate; args.object.notifyAppendItemsOnDemandFinished(deactivate); args.object.refresh(); } },

Don't you have this problem?

[cocotime]

I fixed the problem adding iosOverflowSafeArea="false". In your code:

<GridLayout height="26" columns="26,26,26,26"
    iosOverflowSafeArea="false">
    <Image col="0" src="~/heart-filled.png"
        height="26" width="26" />
    <Image col="1" src="~/heart-filled.png"
        height="26" width="26" />
    <Image col="2" src="~/heart-filled.png"
        height="26" width="26" />
    <Image col="3" src="~/heart-filled.png"
        height="26" width="26" />
</GridLayout>