React Native List performance

Question

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}/>
  }/>

@bennygenel yes I have i have it set to 250 currently and I have this issue, I dont know if there is a limit to that setting but it seems to only load 5-20 at a time — user3074140
– user3074140, Commented Sep 5, 2017 at 20:41
You should set it to a small number so the FlatList renders fast and then when you scroll down you don't have a performance issue. — bennygenel
– bennygenel, Commented Sep 5, 2017 at 20:45
@bennygenel I just tried with setting it to 5 but i still get stop/start scrolling instead of being able to scroll straight to the bottom smoothly — user3074140
– user3074140, Commented Sep 5, 2017 at 20:47
@bennygenel holy poop, it was because I added the initailRenderNum and removeClipping to the ListItem not the FlatList. you could write that as an actual anwer for me to accept if you like, I appreciate the help — user3074140
– user3074140, Commented Sep 5, 2017 at 21:19

bennygenel · Accepted Answer · 2017-09-05 21:24:51Z

2

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} />
  }/>

answered Sep 5, 2017 at 21:24

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native List performance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related