Horrible performance on inverted Flatlist on Android, when a lot of text is on screen

Question

I am building a chat app and since React-Native version 0.63, I am having horrible performance when there are long texts involved on an inverted Flatlist, on Android.

Here is a snack repro showcasing the issue (visible only when trying on a physical Android phone).

I reported a bug for it. It should be pretty flagrant for anyone who is building a chat app with an inverted Flatlist, but somehow I don't see this issue being talked about anywhere.

This made me think that maybe others have solved it somehow? If yes, how can I solve it too? It is making my app barely usable right now.

Answer 1

Actually, the Flatlist component has been written in a better way to have better performance than other list components like ScrollView. But you should consider there are few principles for a very long list like chat:

• Unique Key: For having unique keys to cache and re-ordering in the best way it is YOU to pass the unique key because ReactJS just use item.key and if it does not exist the ReactJS use index and it is the root of the performance issue, SO, you should use a prop that name is keyExtractor and make a good function to produce unique keys.

• Skipping The Measurement of Dynamic Content: To avoid the re-calculating items measurements in every re-rendering you could use a prop that name is getItemLayout and pass the width, height, offset, index and etc. adding getItemLayout could help you to have a huge performance boost for a long lists with several items.

• Determine Initial Items' Number: You can determine a number of items to load and avoid showing the seen items, this could be a little tricky but I guess using initialNumToRender could help you for initilal loading, after initial you can trim the seen items that they are not in view screen.

• Remove Clipped Items: For this you can use the prop name that name is removeClippedSubviews but care about it. maybe it has bug in some situations.

By my experinces, these ways can improve performance of the long lists. I hope these help you, and maybe there are some other tricks to have better performance.

Answer 2

I solved it by applying a style to the flatlist and the rendering view. It is some kind of problem with android 11, since in previous versions this does not happen with the inverted lists. add the style scaleY: -1 to the flatlist and to the container of the view you are going to render, like this:

 return (
  <FlatList
    // ...
    style={{scaleY: -1}}
    renderItem={({item}) => {
      return (
        <View style={{scaleY: -1}}>
          {/* cell content */}
        </View
      );
    }}
  >
);