ReactNative FlatList render all items at once?

Had the same issue in one of my Apps. It cost me a couple of hours to solve this Issue for me.

⇓⇓⇓

TDLR; Check out, that you don't nest your FlatList in a ScrollList (or other kind of lists).

⇑⇑⇑

Detailed Description:

ISSUE

Same as the Thread-Opener, at first, my Flatlist render only the amount of renders I defined in initialNumToRender, but immediately after that, the app starts to render the whole rest of the List.

Enviroment

I use native-base.io as UI-Library and encapsulated the Content of the Screen with the Component

Solution

I've figured out, that native-base component <Content> replace ScrollList. A FlatList inside of a ScrollList will pipe you to strange results. As I replaced the -Component for the given Screen with an <View>, all things work like expected.

FlatList renders too many items in advance to get better fill rate. We have similar issues. We build RecyclerListView to workaround such problems. Very similar to RecyclerView but it is JS only. It is faster than FlatList and battle tested at Flipkart. You can try it.

Link: https://github.com/Flipkart/ReactEssentials

You can read more about it here: https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef