CODEWITHSUNDEEP
react-nativereact-native-flatlist
Stone Preston
Stone Preston

Reputation: 1858

performance issues with React-Native flatlist with 100+ list items

I am trying to use RN flatlist to show a large list of contact names (100+ items). I keep getting the following warning:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

Certain animated UI items get very sluggish whenever the list has more than 50 items in it, however the sluggishness gets a lot better once I scroll all the way down to the bottom of the list

I grab all the contacts in one go and store them in an array in a redux store. I have tried using props like initialNumToRender but cant seem to improve performance. Is there anything I can do to improve my list? I have never used RN FlatList before so any tips would be appreciated

Here is my list related code:

renderRow = ({item}) => {

 return (
  <ListItem
   title={item.firstName}
   chevronColor={colors.tertiary}
  />
 )
}


  <FlatList
   data={this.props.contacts}
   renderItem={this.renderRow}
   keyExtractor={item => item.id}
   initialNumToRender={10}
   removeClippedSubviews={true}
  />

this.props.contacts is the array of contact objects in the redux store

Upvotes: 5

Views: 15201

Answers (2)

Stone Preston
Stone Preston

Reputation: 1858

I ended up implementing recyclerlistview and followed this tutorial which explained how to get it working since the documentation is lacking. Its working miles better than flat list did. Very fast and smooth.

Upvotes: 9

Charanjeet Singh
Charanjeet Singh

Reputation: 251

You can follow these code implementations. For VIEWABILITY_CONFIG follow this link

const VIEWABILITY_CONFIG - {
  minimumViewTime: 300,
  viewAreaCoveragePercentThreshold: 100,
  waitForInteraction
}
const yourItemHeight = 108;
class yourClass extends React.PureComponent
...

_getItemLayout(data, index) {
return { lenght: yourItemHeight, offset: yourItemHeight * index, index }
}
 <FlatList
   data={this.props.contacts}
   renderItem={this.renderRow}
   keyExtractor={item => item.id}
   getItemLayout: {this._getItemLayout}
   initialNumToRender={10} // Vary According to your screen size take a lumsum according to your item height
   removeClippedSubviews={true}
   viewabilityConfig={VIEWABILITY_CONFIG}
  />

Upvotes: 0

Related Questions