ReactNative FlatList render all items at once?

Question

I'm using ReactNative's new List component - FlatList.

It seems like FlatList renders all items at once even though the cell isn't actually visible on the screen.

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

Setting 30 items and seems like 'rendered' warning was called according to the total number of the items.

I thought FlatList is similar to the way RecycleView in Android works, render an item only when it's about to be visible on the screen.

Am I missing something? Won't it decrease performance?
I wished it could render an item only when it's about to be shown.

Answer 1

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.

Answer 2

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