RadListView on iOS scroll issues after using scrollToIndex

[hiperbou]

Please, provide the details below:

Tell us about the problem

I have a list with different item heights, and after using scrollToIndex to go to the bottom of the list, the scroll jumps up or down instead of scrolling smoothly.

Also, scrolling to bottom doesn't show the entire element, depending on its size. In the example attached the elements are generated randomly, so this issue can be observed too by restarting the app a few times.

Which platform(s) does your issue occur on?

iOS only.

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

Reproduced on Playground and older versions.

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

1. Start the application
2. Scroll slowly in either direction
3. Notice jumps on the scroll

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

Project on Playground: https://play.nativescript.org/?template=play-tsc&id=70RW9H

RadListViewScrollToBottomTest.zip

[VladimirAmiorkov]

Hi,

Both of the reported scenarios and behaviours are expected on iOS due to the way "dynamic imte height" can be implemented on that framework. The observed scrollbar "change" during scrolling is because when you have dynamic item height the initial "dummy" size of the scroll view is being updated constantly when those dynamic items are measured. About your second issue with item not being fully visible that is again due to the way dynamic size of cells is handled by the iOS framework (by default it is not supported, due to scroll performance optimizations) and when you scroll to an index, the scroll view is scrolled to that position but because the dynamic size is "unknown" to the iOS framework it is shown only with its "dummy" size.

Hope this explains what both of the described behaviour are happening on iOS.

[hiperbou]

I haven't seen any iOS app with such user experience. Could you provide any workaround to this? Should I write my own implementation instead of using RadListView?

[VladimirAmiorkov]

Hi @hiperbou ,

This is a core functionality that cannot be changed or worked around easily without changes to our custom iOS framework that exposed our implementation of the UICollectionView. Because item's size is being calculated at runtime (once they become visible) and the UICollectionView's require you to provide an size of its scroll view, we are doing that with a relatively close to the real items size (we measure the first item's actual size as it is immediately visible on initialization) and use that size to calculate the entire UICollectionView's scroll viewer size. After that at runtime we update that size accordingly once the actually items are being rendered with their dynamic size, this is the reason the scroll bar jumps. It is not possible to achieve fully dynamic cells size UICollectionView without this behavior. If you feel up to the task we do provide an NDA for our closed source code which you can read more about here, we are always welcoming any contributions.

As of workaround, due to this being a core functionality there is no easy way to workaround it other than make the items not dynamic size by setting the itemHeight of the layout. As state above we are aways looming and welcoming contributions and if you find something that could help out in this scenario on iOS feel free to share it with us, or if you write your own plugin we will be happy to contribute back and showcase it on our plugins marketplace.

[hiperbou]

Also, note that if we don't call to scrollToIndex there are not jumps on the scroll. That was what made me think that it was a bug on the implementation rather that a technical limitation.

If anyone is interested, here is the same example using ListView with the scroll working as expected: https://play.nativescript.org/?template=play-tsc&id=pzkKKa

[VladimirAmiorkov]

There are the same "jumps" but as I mentioned in most cases you scroll from the top to down and each new cell updates the scroll view size with its real size. Since new items get into the new port slowly and not at once the "jump" is smaller and barely visible, one way to make it easily visible is to make each "dynamic size" cell very big, in such scenario the scroll view size is updated with bigger size (and the scroll bar is change with greater values)

The example you listed is using ListView which does not supported dynamic size items making all of the above limitations not relevant. This is a perfect replacement of RadListView in this scenario or setting itemHeight.

[ruanorz]

@hiperbou did you solve this problem? thank you

[hiperbou]

@ruanorz I couldn't solve the problem.

I ended usiing ListView instead of RadListView because I couldn't find a solution using the version that was available when I opened the issue. The performance was better using ListView, although we had to drop the features offered by the RadListView.