CODEWITHSUNDEEP
performancelistreactjslistviewreact-native
user3074140
user3074140

Reputation: 857

React Native List performance

I have a FlatList inside of a Modal in my application the Flatlist is filled with ListItem components from 'react-native-elements'.

The ListItems just have a title and an onPress method and nothing else, but the list has 250-300 items. The list is very laggy. I understand that is going to happen with a lot of items, but with the list I cant scroll to the bottom immediately. I can scroll a certain distance then it loads up the next few items then scroll a bit more then load a bit etc. This makes picking an item lower on the list or at the bottom incredibly slow.

My data is an array of { imgnames: "imglink" } objects and the list is sorted alphabetically.

I was wondering if this performance issue is going to happen no matter what because of the amount of items, or if its because it is inside of the module.

I just want to be able to scroll the entire length of the list immediately, so I can scroll to the 'M' or 'P' sections straightaway and then have a small delay while the list renders.

What would be the best list implementation for this.

FlatList Code:

<FlatList 
        data={this.props.list} 
        renderItem={
            ({item}) => <ListItem hideChevron = {true} onPress={() => this._setImage(item.imgLink)} title={item.key} removeClippedSubviews = {true} initialNumToRender={5}/>
  }/>

Upvotes: 0

Views: 941

Answers (1)

bennygenel
bennygenel

Reputation: 24680

Setting initailRenderNum and removeClipping props should help with the performance problems of the FlatList.

Example: 

<FlatList 
    data={this.props.list} 
    removeClippedSubviews={true} 
    initialNumToRender={5}
    renderItem={
        ({item}) => <ListItem hideChevron={true} onPress={() => this._setImage(item.imgLink)} title={item.key} />
  }/>

Upvotes: 2

Related Questions