Recyclerlistview: Blank area

[sm2017]

I have a list with about 100 items . when I scroll I see blank area for 0.5 second

I try your sample with last version of react native

It has not same performance like your YouTube and I see blank area . I test at release mode in android 7 phone with 8 core CPU and 8 gig ram

Also in your sample except image all data is same and not changed so we have no cha he in view except images . If you try with better data and each row has different price and ... , the performance decreases and we have more blank area

I also increase renderAheadOffset to 320 and 640 but still see blank area even in your sample project

[naqvitalha]

I'll link one of my tweets here https://twitter.com/naqvitalha/status/932129856762011648 . This is the grocery experience that we've built and you can see how well it does. Travelmate sample is not supposed to be a benchmark page because it's too simple. RecyclerListView will do as good in much more complicated templates as well.
If you see blanks there then there is definitely some configuration issue. If you share your listview setup I can help.

[naqvitalha]

Try this link in expo https://snack.expo.io/BkMrbw5TZ, much more complex and built on RLV.

[sm2017]

Please don't close issue . I read https://snack.expo.io/BkMrbw5TZ and my code is same as your code

I really don't know why my code has blank area . I am trying to repro my issue in snack

[hbarylskyi]

I'm also seeing this problem, even with https://snack.expo.io/BkMrbw5TZ. If you scroll fast enough, you will see blank area for a moment. Tried it on iPhone 6.

[hbarylskyi]

This blank space will be shown for longer if elements you are rendering are heavier. For example every element I render looks similar to this and consists of 60+ views itself:

[sellmeadog]

I'm having the same problem. I get more scrolling blank space with RecylerListView than I do with a FlatList. I have also mimicked the configuration showcased in https://snack.expo.io/BkMrbw5TZ without any luck.

I don't have the scrolling problem with the linked expo example. The key differences I can think of are:

• I am using a Realm database as my data source; binding to the Realm directly versus calling Array.from(...) first doesn't seem to make a difference
• I have 30k+ items versus the examples 7k+
• I am not using expo

[naqvitalha]

@Barylskyigb @sellmeadog Most of the research that we have done around this reveals some irrefutable findings:
1) Scrolling on fastest speed on iOS can show blanks, kind of where you've been building momentum on top of a very large list like the one in sample. Even on iPhone X it happens, although things catch up in few milliseconds. JS thread overhead of RecyclerListView is much lower than that of FlatList, it happens regardless.
2) Blanks on Android are totally avoidable if your component is well optimized. Our production Flipkart app proves that (grocery mainly). Effort on optimizing component will always be needed. That is true for native RecyclerView as well where you would drop frames instead.
3) FlatList creates/destroys elements at a very fast rate. The main reason you may see less blanks is because it starts to drop frames much before you see blanks. Those frame drops slow down the scroll. Also, FlatList renders too many items upfront, you can mimic the same using renderAheadOffset prop in RecyclerListView. Default is just 250 px. Increasing this will improve things for sure but your max memory usage also increases and time for recycling to kick in increases. If you profile memory and fps you'd see RecyclerListView beating FlatList consistently.

The goal for RecyclerListView was to improve main thread performance, reduce garbage collection events and to enable custom layout managers (like masonry etc). With minor tweaking you can easily outperform FlatList in most cases.

[naqvitalha]

Inactive for a while, closing.

[Chetanspace]

i've the same issue any one finds the solution ?

[fariya12]

facing this issue any solution ??

[TheEhsanSarshar]

+1

[lucaspelle1909]

.

[mostafabrazi]

Same issue here.

RN: 0.63.3
recyclerlistview: 3.0.0
Samsung: M11 (3GB RAM).
Connected to local server on my machine: local API 
Android: Last version

List contains in total 300, page contains 70 items.
Scrolling is much more smoother than a Flatlist in my case but blank spaces appears when scrolling fast.
I could fix a part of the issue by enabling disableRecycling so I can't see now blank spaces scrolling back to top, but the issue still occurs when scrolling first time to bottom.

<RecyclerListView
            onEndReached={this.handleListEnd}
            dataProvider={this.state.dataProvider}
            layoutProvider={this.state.layoutProvider}
            rowRenderer={this.rowRenderer}
            renderFooter={this.renderFooter}
            disableRecycling={true}
          />

I know the whole idea of this component is recycling but want to know why this property is there in the first place?

[mostafabrazi]

Any news here? don't know why it's closed