FlatList items won't respond to touches while FlatList is loading new items

Question

My list component looks like this:

<List>
  <FlatList
    data={films}
    renderItem={({ item }) => (
      <FilmListItem
        filmSummary={item}
        navigateToDetailsScreen={navigateToDetailsScreen}
      />
    )}
    keyExtractor={() => cuid.slug()}
    ListHeaderComponent={<Header totalResults={totalResults} />}
    ListFooterComponent={<Footer />}
    onEndReached={() => dispatchFetchPage()}
  />
</List>

The FilmListItem render function looks like this:

  render() {
    const { filmSummary } = this.props
    return (
      <TouchableOpacity onPress={this.onPress}>
        <ListItem title={filmSummary.Title} subtitle={filmSummary.Year} />
      </TouchableOpacity>
    )
  }

The FlatList loads a screen-full of items, then continues loading three more screen-fulls. But the TouchableOpacity items already rendered won't respond to touches until the FlatList has finished loading the additional pages.

Once the FlatList has finished loading, items respond to touches, but not before. If I scroll the list to the bottom and the FlatList continues loading more items, the visible items become unresponsive again.

Am I missing something?

I am puzzled why someone down-voted this question. How might I have improved it? — Lawrence I. Siden, Apr 04 '18 at 19:10
I am having the same issue. I have an infinite scroll app which displays Wordpress blog posts from wp-json api. But when the app requests the new data from api, flat list items stop responding to the onPress event handler function. Did you found the solution? If yes then please post here. — Future King, Jun 27 '20 at 13:16

I Putu Yoga Permana · Answer 1 · 2018-04-01T03:54:45.547

It seems related to performance issue. My suggestions:

Using pure component for your render item function. It will shallow compare, so it won't re-render that easily. performance improved.
Don't use the anonymous function on your props. move it out outside render function. So every time your component re-render, that function won't re-create.
add initialNumToRender={number} prop to Flatlist. It will show only those component which visible on the screen.

example code:

// 1. make sure your FilmListItem is pure component!!
class FilmListItem extends React.PureComponent {
  render() {
    // ....
  }
}

// 2. Move out all anonymouse function
_renderItem = ({ item }) => (
  <FilmListItem
    filmSummary={item}
    navigateToDetailsScreen={navigateToDetailsScreen}
  />
);

_keyExtractor = () => cuid.slug();

// render of your main component
render() {
  return (
    <List>
      <FlatList
        initialNumToRender={number} // 3. try add initialNumToRender
        data={films}
        renderItem={this._renderItem}
        keyExtractor={this._keyExtractor}
        ListHeaderComponent={<Header totalResults={totalResults} />}
        ListFooterComponent={<Footer />}
        onEndReached={dispatchFetchPage} // no need anonymouse function
      />
    </List>
  );
}

You can take a look similar performance problem in here:

https://github.com/facebook/react-native/issues/13649

I read that post but found it a little confusing. I was already using React.PureComponent for my item. I hoisted the anonymous function to a constant, and I set initialNumToRender={1} and onEndReachedThreshold={1}. Without these, FlatList was fetching 3 or 4 pages initially, and then another three when the end of the list was visible. It may have also helped that I replaced my keyExtractor with a method that uses an id from each item rather than a randomly generated id. Thank you! — Lawrence I. Siden, Apr 02 '18 at 16:31

FlatList items won't respond to touches while FlatList is loading new items

1 Answers1

Linked