Inverted scroll super laggy on Android

[devoren]

I want to use a flashlist to show a inverted list. But if I use inverted prop on android it works very slow.
Default Flashlist: drops 5-10 FPS in dev mode (UI 60FPS)
Inverted Flashlist: drops 30-40 FPS in dev mode (UI also 20-40FPS)

const renderItem: ListRenderItem<IMessage> = ({ item, index }) => {
	return (
		<MessageItem id={item.id} message={item.message} date={item.date} />
	)};

 const keyExtractor = ({ id, date }: IMessage) => `${id}_${date}`;

 return (
	<SafeAreaView style={styles.container}>
		<FlashList
			ref={list}
			data={messages}
			keyExtractor={keyExtractor}
			renderItem={renderItem}
			contentContainerStyle={{
				paddingVertical: SCALE.XS,
			}}
			showsVerticalScrollIndicator={false}
                        estimatedItemSize={100}
		/>
	</SafeAreaView>
  );

Current behavior

inverted.webm

Expected behavior

UI 60 FPS

To Reproduce

The flatlist also has the same behavior but after using this patch UI stable 60fps but not working with FlashList

Platform:

• iOS
• [+] Android

Environment

1.4.1

[CaptainJeff]

Same issue

[naqvitalha]

I'm looking into this.

[CaptainJeff]

@naqvitalha This ticket might be helpful to reference facebook/react-native#30034

[CaptainJeff]

@naqvitalha any luck tracking down the issue?

[devoren]

@CaptainJeff What if we change this code

to this code ( flatlist solution ):
Platform.OS === 'android' ? { scaleY: -1 } : { transform: [{scaleY: -1}] }

[CaptainJeff]

Yeah @devoren that's pretty much my current temporary solution. I was doing a patch-package on the react-native library for transformStyle but just switched it to patch just this dependency. It does seem to work.

@naqvitalha maybe it makes sense to update this in the project? I just opened a PR #755

[devoren]

@CaptainJeff Does it work without this import in index.js
import ViewReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes'; ViewReactNativeStyleAttributes.scaleY = true;
in my case need to use the scaleY attribute on Android

[CaptainJeff]

@devoren yeah. Mine worked without that value

[CaptainJeff]

@devoren Just to clarify. Are you setting that in the index.js of the root of your app? Not in this dependency, right?

[devoren]

@CaptainJeff yes, index.js of the root of main app

[devoren]

@CaptainJeff Flashlist lags again, but flat list works correctly

[naqvitalha]

It looks like the same issue as FlatList. I'll check the PR @CaptainJeff . Can you confirm it this fixes the issue completely?

[devoren]

@naqvitalha It didn't help in my case, but if I use a flat list and add ViewReactNativeStyleAttributes in index.js it works correctly (without attribute inverted prop not working. Is ScaleY deprecated?) In any case, it lags on Android

[jittuu]

As a workaround before the fix is merged, I managed to work with the following patch file:

diff --git a/dist/FlashList.js b/dist/FlashList.js
index c86f67d011fb509dcdc0998268cad1df3015b1e7..9f713c2be4a4a2f689fc350d88d4a77ca8bdbf16 100644
--- a/dist/FlashList.js
+++ b/dist/FlashList.js
@@ -23,7 +23,9 @@ var FlashList = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.listFixedDimensionSize = 0;
-        _this.transformStyle = { transform: [{ scaleY: -1 }] };
+        _this.transformStyle = react_native_1.Platform.OS === "android"
+            ? { transform: [{ rotate: "180deg" }] }
+            : { transform: [{ scaleY: -1 }] };
         _this.transformStyleHorizontal = { transform: [{ scaleX: -1 }] };
         _this.distanceFromWindow = 0;
         _this.contentStyle = {};

[tsalama]

I'm using the following workarounds that seem to work fine for now.

In my index.js:

// https://github.com/facebook/react-native/issues/30034#issuecomment-1277360480
import ViewReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
ViewReactNativeStyleAttributes.scaleY = true;

flash-list patch:

diff --git a/dist/FlashList.js b/dist/FlashList.js
index 8b0544144099fbd53e84d3035f6c3e4d5324277a..937e606764422b5b3039a977b2e346b3c27d0188 100644
--- a/dist/FlashList.js
+++ b/dist/FlashList.js
@@ -24,7 +24,12 @@ var FlashList = /** @class */ (function (_super) {
         var _a;
         _this = _super.call(this, props) || this;
         _this.listFixedDimensionSize = 0;
-        _this.transformStyle = { transform: [{ scaleY: -1 }] };
+
+        // https://github.com/Shopify/flash-list/issues/751 / https://github.com/facebook/react-native/issues/30034#issuecomment-1374355184
+        _this.transformStyle = (react_native_1.Platform.OS === 'android') ?
+            { scaleY: -1 }
+            : { transform: [{ scaleY: -1 }] };
+
         _this.transformStyleHorizontal = { transform: [{ scaleX: -1 }] };
         _this.distanceFromWindow = 0;
         _this.contentStyle = {

[abdullahIsa]

_this.transformStyle = react_native_1.Platform.OS === "android"
+            ? { transform: [{ rotate: "180deg" }] }
+            : { transform: [{ scaleY: -1 }] };

Huge performance boost while scrolling after doing this especially with extreme long amount of multiples texts.

[fukemy]

Hi can someone tell me which better between{ scaleY: -1} and { transform: [{ rotate: "180deg" }] }

[devoren]

@fukemy In my case "180 deg" works fine, try to measure performance on android

[fukemy]

@devoren thanks you, I am using { scaleY: -1}, it's work fine too. I dont know how to compare the performance between them to choose the best solution

[irisjae]

With the current inverted list transforms, on Android, the scrollbar is inverted (on the left side, when it should be on the right). The upstream react-native patch (facebook/react-native@3dd816c) suggests that we should pass isInvertedVirtualizedList to the inner ScrollView when using inverted lists on Android.

Perhaps we should add that to the inner ScrollView on inverted={true}? For the meantime, the user can workaround this by adding overrideProps={{ isInvertedVirtualizedList: true }} to the FlashList.