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

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
      );
    }}
  >
);