RadListView rendering issue with GridLayout inside component after scroll

[m3rls]

Tell us about the problem

RadListView rendering issue with GridLayout inside component after scroll

Which platform(s) does your issue occur on?

iOS (at least 12.2+. Replicated on the iOS Simulator and multiple physical iPhone X devices)

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

• Progress NativeScript UI plugin version: 7.0.0-androidx-110619
• CLI: 6.0.0-2019-07-04-115320-13557
• Cross-platform modules: 6.0.0-rc-2019-06-28-175837-02
• Runtime(s): tns-ios: 6.0.0-rc-2019-06-28-105002-01, tns-android: 6.0.0-rc-2019-07-04-174325-01

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

1. Start the "Nested Example" playground application linked below (Image 1)
2. Scroll down the page a bit (note the data is the same dataset repeated several times to limit scope for the playground example)
3. Scroll up the page and the "score" on the left of each row underneath the market count will render incorrectly (Image 2)
4. Start the "Flat Example" playground application listed below
5. Repeat step 2 & 3 above
6. Note that the "score" retains the correct height / boundaries and renders correctly (Image 3)

The only difference between the two playground examples provided is that the EventCell.vue component in Nested Example has been merged into Home.vue in Flat Example - rather than being contained inside a component.

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=nfW3cF&v=3 (Nested Example - This will produce the issue) https://play.nativescript.org/?template=play-vue&id=h2pt8d&v=3 (Flat Example - This will display correctly)

Screenshots

Image 1

Image 2

Image 3

Screen recording showing issue (scrolling down, then scrolling back up, in "Nested Example"

[VladimirAmiorkov]

Hi @m3rls ,

Thank you for your issue report.

We are going to review it and update you once we have more information. As you are using an older version (7.0.0-androidx-110619) of the plugin and we are currently preparing for the next big version of NativeScript, we have published and RC version of the nativescript-ui-listview plugin that includes additional fixes and improvements. Can you try to install the RC tag and see if that changes the above issue simply do npm i nativescript-ui-listview@rc.

[m3rls]

Hi @VladimirAmiorkov - I tried to update nativescript-ui-listview to @rc, but ran into issues (TNSCore.framework duplicate output file) which I fixed by upgrading all of the nativescript-ui-* packages to their @rc tag.

Either way, unfortunately it still seems to happen. Below is an updated version of the "Nested Example" playground, hopefully I updated everything correctly?

nested-example.zip

[VladimirAmiorkov]

Thank you for giving that a try. I am marking this issue as bug.

[tsonevn]

The same issue was reported in admin with t.1418702

[MCurran16]

@VladimirAmiorkov @tsonevn Any updates on this? Timeline?

We're also seeing this issue. It is frustrating not being able to have nested components within the <v-template>. Is there a workaround that you know of?

[foxted]

I am having a similar issue, notice the very first item icon before and after the scroll:

Here is the code associated to it:

<RadListView for="(result,index) in results"
             ref="Results"
             v-show="results.length > 0"
             separatorColor="transparent"
             scrollBarIndicatorVisible="false"
             scrollDirection="vertical"
             loadOnDemandMode="Auto"
             @loadMoreDataRequested="onLoadMoreItemsRequested"
>
    <v-template>
        <StackLayout :key="index">
            <GridLayout rows="30,30,*" class="journal-entry" margin="10">
                <StackLayout row="1" rowSpan="3" class="card">
                    <Label :text="result.note.length ? result.note : 'journal.home.empty-state' | localize" :textWrap="true" marginTop="15" marginBottom="10"></Label>
                    <Label :text="result.loggedAt | humanize" class="text-muted text-small" textAlignment="right" marginBottom="5"></Label>
                </StackLayout>
                <EmotionIcon :emotion="result.emotion" row="0" rowSpan="2" :size="60" height="60" :key="index"></EmotionIcon>
            </GridLayout>
        </StackLayout>
    </v-template>
</RadListView>

It can sometimes happen in the middle of that list, which seems really random.

[Lehren]

Happening to me too on nativescript-ui-listview@8.0.1. Hoping for a fix.

[foxted]

As far as I can tell, seems like when using the <GridLayout>, some rows/columns get missed when the loadMoreItemsRequested event is triggered and loads new items.

My grid in the example below has 3 rows, 1 column. When loading more items, some items only end up with two columns. I added some background color to help visualize: row 1 = red, row 2 = blue, row 3 = green:

We can see that the "Okay" entry is missing the red row.

[foxted]

A more obvious example with two rows per item: row 1 = red, row 2 = blue:

[Lehren]

Happening to me too. Can't really use any components that use GridLayout in a RadListView. Shame.

[edusperoni]

Could you try setting iosOverflowSafeArea="false" on your GridLayout?

[foxted]

I ended up changing my layout to use a StackLayout instead.

[ghost]

I have the same issue

[MCurran16]

@edusperoni That actually worked for me. I put it on the GridLayout itself and it's parent. Thanks for your continued help!

Hope that works for others.

[mreall]

@edusperoni thanks for the tip. iosOverflowSafeArea="false" didn't work for me, but adding iosOverflowSafeAreaEnabled="false" to my GridLayout worked. What's the difference?

[Rho-bur]

@edusperon & @mreall Thanks! I had a similar issue when on scrolling an additional UIView item was added on IOS apparently randomly on some list items within a GridLayout; this additional empty item was blocking the full item list, Setting iosOverflowSafeAreaEnabled="false" on GridLayout help me get rid of this issue which consumed a day of my life :-(