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

it is same. In the documentation you can find the following:

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

So it doesn't render all items at once.

and besides:

This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.

Let me know if you need further details.

Answer 3

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

Answer 4

If Flatlist is nested inside a ScrollView then it will render all items at once.