react-native

react-native copied to clipboard

Description

I recently upgraded to react 0.63.2 thanks to the latest Expo SDK 39. I immediately noticed that my most important FlatLists took a huge performance hit on Android (iOs seem unaffected).

After investigating, I found out that it happens when using inverted on a FlatList that contains items with a lot of text (see snack).

The same Flatlist, with the same data, is perfectly smooth when not inverted.

I have yet to test it in production, as the latest Expo SDK is causing trouble that stops me from building the app.

React Native version:

react-native: https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz => 0.63.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create a Flatlist that renders items that contain a lot of text
2. Set the Flatlist as inverted

Expected Results

The Flatlist should be as smooth when inverted as when normal.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@divone/4c8d68

Just checked it in production and the performance hit is still there, making the app feel laggy.

This issue appears as soon as you invert a ScrollView actually, as you can see on this snack: https://snack.expo.io/@divone/c0c1f3

Again, only visible on a physical Android device.

It seems that the issue only happens on some phones. For me, it happens on a Google Pixel 4 with Android 11.

I see this issue on Pixel4 XL running Android 11, which was working fine on React Native 0.61.5 with Android 10. I notice that when the keyboard is open it does not seem to lag.

Hey @divonelnc thanks for the investigation! I noticed the same issue when running your example.

Facing this issue on a Samsung Galaxy Note10 running Android 11 as well with Expo SDK 39. Didn't happen on Android 10.

Discovered that changing the verticallyInverted style prop from transform: [{scaleY: -1}] to scaleY: -1 in VirtualizedList fixes it for Android, however it does not invert on iOS.

Experienced this issue as well. I upgraded my Samsung Galaxy S10 from Android 10 to Android 11 and suddenly experienced a noticable lag on the inverted FlatList in my app. @cookiespam 's workaround fixed the problem, however.

Im experience the same issue on android with a Samsung Galaxy s10 Android 11, and i noticed after updated the same issue. And i even have it if i don't have long text (The text element goes full width with short text)

@cookiespam's workaround works. for a less intrusive fix, we could "invert" twice ourselves, once in the container and once in every cell

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

for ios, could just use the official inverted prop. however, that scaleY outside of transform seems undocumented. @cookiespam how did you come up with it? great thanks though

@vinceplusplus

I was just trying to invert the FlatList on my own without using the inverted prop and somehow accidentally used scaleY (was googling how to invert something using css) which had been deprecated.

@cookiespam then that was a good accident 👍

I also encounter this issue with my chat screen. It's really hard to find to root cause.

• Only happen on Android S10e device.
• With inverted FlatList.
• FlatList Item contains a Text with any given length.

It's only take 10 items in the list for the performance to be hit really bad.

I'm using @cookiespam bandaid + patch-package to resolve the issue for now now.

Here is the the content of the patch:

react-native+0.63.3.patch

diff --git a/node_modules/react-native/Libraries/Lists/VirtualizedList.js b/node_modules/react-native/Libraries/Lists/VirtualizedList.js
index 9ec105f..a8f1d8c 100644
--- a/node_modules/react-native/Libraries/Lists/VirtualizedList.js
+++ b/node_modules/react-native/Libraries/Lists/VirtualizedList.js
@@ -11,6 +11,7 @@
 'use strict';
 
 const Batchinator = require('../Interaction/Batchinator');
+const Platform = require('../Utilities/Platform');
 const FillRateHelper = require('./FillRateHelper');
 const PropTypes = require('prop-types');
 const React = require('react');
@@ -2185,9 +2186,14 @@ function describeNestedLists(childList: {
 }
 
 const styles = StyleSheet.create({
-  verticallyInverted: {
-    transform: [{scaleY: -1}],
-  },
+  verticallyInverted:
+    Platform.OS === 'android'
+      ? {
+          scaleY: -1,
+        }
+      : {
+          transform: [{scaleY: -1}]
+        },
   horizontallyInverted: {
     transform: [{scaleX: -1}],
   },

Wow wow wow thank you guys this fix is a lifesaver !!! 🙏

I was actually trying to replace my FlatList by a ScrollView to see where the issue was coming from and noticed then that without inverting the FlatList the performance was fine.

Now I can keep my FlatList inverted, it works exactly same as before without changing any other props and I'm going from horrible 40-50fps (since updating to Android 11) to butter smooth 90fps 😍

the solution proposed by @vinceplusplus is what I will be using:

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

Is someone considered making a pull request with @cookiespam and @pqkluan's patch? I could make one in a couple of days when I get some free time but I also don't want to steal your moment of glory haha

Facing this issue on a Samsung Galaxy Note10 running Android 11 as well with Expo SDK 39. Didn't happen on Android 10.

Discovered that changing the verticallyInverted style prop from transform: [{scaleY: -1}] to scaleY: -1 in VirtualizedList fixes it for Android, however it does not invert on iOS.

@cookiespam You are legend, worked for me too.

using the scaleY: -1 instead of transform: [{scaleY: -1}] indeed seems to fix the performance issue, BUT (as usual there is a but) the refresh control becomes an issue.

It renders on the top of the screen as you attempt to scroll down and in order to actually scroll you'll need to scroll up then down to "free" the pan responder somehow.

@vinceplusplus

I was just trying to invert the FlatList on my own without using the inverted prop and somehow accidentally used scaleY (was googling how to invert something using css) which had been deprecated.

I think I love you, thank you!

I'd just wanted to drop in and say thank you as well 🙏🏼💙

I was severely confused when I upgraded to Android 11 (on a Redmi Note 8 Pro) and the performance on the chat screen in my app was suddenly horrible. Scrolling for a couple of seconds resulted in 1000+ dropped frames. It was so laggy and jerky that one got almost dizzy by watching it.

Based on your suggestions I've implemented a simple check (with react-native-device-info) so the fix is only applied for android & version >= 11.

const useAndroidInvertedFix = useMemo(
  () => Platform.OS === 'android' && Number(getSystemVersion()) >= 11,
  [],
);

I'm extremely grateful for this workaround, however the underlying issue should be officially addressed by react-native itself, right? Does anyone know the procedure for doing that or is it enough that this issue gets enough attention? 🤔

@KochMario the best way to get this fix in is by submitting a PR. Unfortunately the team can’t address every issue as most are not a priority. But there is a massive effort right now to evaluate PrS submitted by contributors.

I have been struggling to understand why my chat was lagging when tested on a Samsung S20 ultra with 12gb of RAM while it works prefectly on my xiaomi 9 with just 3GB of RAM. And the comments in this thread helped me fix the issue. Thanks everyone🎉

resolved my issue on react-native-gifted-chat with the solution from @pqkluan

As @nero2009 mention it has issue with Android devices for lag scrolling (not smooth like in iOS). If you are using react-native-gifted-chat and experience this issue with the RN version you have. Apply the solution mention on this thread.

I am facing the same issue and have applied the solution here : https://github.com/facebook/react-native/issues/30034#issuecomment-780547496 . Hoping it does not break anything else. I'll post here if it does 🤞 .

Encountered this issue in a chat scenario (where inverting the list is desirable) and was pulling my hair out why adding text elements to the list was causing scroll perf to tank.

Can confirm that uninverting the list and applying the scaleY workaround fixes scroll perf, but breaks the pull-to-refresh functionality :( may need to do something custom there.

Does anyone have any idea at an Android level why the perf implodes with the default implementation?

React Native 0.66 on a Pixel 6 / Android 12.

edit: between this issue and https://github.com/facebook/react-native/issues/30373 I feel that inverted FlatLists are just completely unusable on Android out-of-the-box - my team will likely need to invest in a custom list control for our chat canvas.

Encountered this issue in a chat scenario (where inverting the list is desirable) and was pulling my hair out why adding text elements to the list was causing scroll perf to tank.

Can confirm that uninverting the list and applying the scaleY workaround fixes scroll perf, but breaks the pull-to-refresh functionality :( may need to do something custom there.

Does anyone have any idea at an Android level why the perf implodes with the default implementation?

React Native 0.66 on a Pixel 6 / Android 12.

It was only something I saw on phones using One UI 3 so surprised it's now showing up on Android 12 too

Encountered this issue in a chat scenario (where inverting the list is desirable) and was pulling my hair out why adding text elements to the list was causing scroll perf to tank.

Can confirm that uninverting the list and applying the scaleY workaround fixes scroll perf, but breaks the pull-to-refresh functionality :( may need to do something custom there.

Does anyone have any idea at an Android level why the perf implodes with the default implementation?

React Native 0.66 on a Pixel 6 / Android 12.

edit: between this issue and https://github.com/facebook/react-native/issues/30373 I feel that inverted FlatLists are just completely unusable on Android out-of-the-box - my team will likely need to invest in a custom list control for our chat canvas.

@sfuqua you may want to take a peek at https://github.com/mattermost/mattermost-mobile/blob/master/app/components/post_list/post_list.tsx and https://github.com/mattermost/mattermost-mobile/blob/master/app/components/post_list/post_list_refresh_control.tsx for an inverted list with working refresh control using scaleY: -1

Encountered this issue in a chat scenario (where inverting the list is desirable) and was pulling my hair out why adding text elements to the list was causing scroll perf to tank. Can confirm that uninverting the list and applying the scaleY workaround fixes scroll perf, but breaks the pull-to-refresh functionality :( may need to do something custom there. Does anyone have any idea at an Android level why the perf implodes with the default implementation? React Native 0.66 on a Pixel 6 / Android 12. edit: between this issue and #30373 I feel that inverted FlatLists are just completely unusable on Android out-of-the-box - my team will likely need to invest in a custom list control for our chat canvas.

@sfuqua you may want to take a peek at https://github.com/mattermost/mattermost-mobile/blob/master/app/components/post_list/post_list.tsx and https://github.com/mattermost/mattermost-mobile/blob/master/app/components/post_list/post_list_refresh_control.tsx for an inverted list with working refresh control using scaleY: -1

Cheers, I'll give that a try - I thought I'd tried that yesterday but may have been applying the wrong style to the RefreshControl.

Bottom refreshControl

For those who want to keep the refresh control at the bottom, you can wrap your flatlist in a view with scaleY:-1 instead of putting the style into the flat list.

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

The scaleY style does not work on react 0.70.0

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

But transform: [{ rotate: '180deg' }], does the trick!

Worth noting that the rotate transform isn't perfect, since the scroll indicator moves to the other side of the list (from the right to the left).

Currently, I disabled the vertical scroll indicator in my application by passing showsVerticalScrollIndicator={Platform.OS !== 'android'} to FlatList, but this doesn't make for a good user experience.

For now, I have written a quick and dirty workaround to restore scaleY like so in my application's index.js file:

// Add scaleY back to work around its removal in React Native 0.70.
import ViewReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'
ViewReactNativeStyleAttributes.scaleY = true

This allows you to continue using scaleY and avoid the aforementioned issue with the scroll bar being moved to the other side of the FlatList when using rotate instead of scaleY. This works fine in React Native 0.70.x, but might break in the future if support for the property is removed from the native Android View code.

any solution with RN 0.70?? because scaleY StyleSheet is already remove from the package.