Large Flatlist is not rendering all items

[stefan0s]

Is this a bug report?

This seems to be a bug of the FlatList while trying to render many items (more that 60-70).

Have you read the Contributing Guidelines?

(Write your answer here.)

Environment

We are using macOS and the issue happen on both iphone and android

1. react-native -v: 0.45.1
2. node -v: 6.9.1
3. npm -v: 3.10.8
4. yarn --version:

Then, specify:

• Target Platform: iOS, Android

• Development Operating System: macOS

• Build tools: Xcode, Android Studio

Steps to Reproduce

We are using FlatList to render Message Items and after the Flatlist has been rendered we are using scrollToBottom to go to the last item. The Flatlist is working without any issues when having about 20 items, but when we have many items it is NOT always rendering them and not display them at all. We are having an example with 80 items and sometimes is rendering all of them but most of the times is rendering about 40.

[padil]

This happens because it is a virtualized list and loads the array bit by bit

[laynemoseley]

Does it render them when you scroll? Or do they literally never show up?

[stefan0s]

No it does not render at all. But it is doing the following when is not rendering all items, it shows a white space but when i touch it, it aligns properly to the last item (but the rest not rendered and never shown).

[drewhamlett]

@stefan0s have you disabled removeClippedSubviews ?

[evanjmg]

+1 I get this also in Section List - it stops at 120 for some reason - I can paginate up to 6 pages of 20 - I console.log the data in there after a async load and it is more than 120.

[evanjmg]

I solved my problem:
Never mutate or map over your props for list items. Simple maps or copies of the props will not work properly- you have to do all your logic in redux or before changing props and use data={this.props.data}.

[kpink224]

@stefan0s If you haven't already looked into PureComponent or shouldComponentUpdate in relation to FlatList or VirtualizedList, read this: https://60devs.com/pure-component-in-react.html

There is a HUGE performance difference when you implement a customized shouldComponentUpdate function with each of your entries - assuming they are various React Components you are rendering.

[bolan9999]

FlatList and SectionList is bad performance. Try this,please. may be it is a surprise for you

https://github.com/bolan9999/react-native-largelist

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[nicolasdanelon]

Hi, I'm running react-native v0.52.8 and I have the same issue. Will this be fixed? or we have to use third party components?

[junchenjun]

I am having a similar issue, but not even on large lists, sometimes it just only renders partial rows, and the rest of the data are all just blank which you can clearly see that the list left some blank space for the rest of the data, but just not rendering them.
This just happens sometimes, most of time it works perfect, very hard for me to find out where excatly went wrong.