From 3dd816c6b7bcd9cc4c21199f0b645755fb97f50f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= <die.drei99@yahoo.de>
Date: Fri, 28 Jul 2023 10:55:52 -0700
Subject: [PATCH] Add workaround fix for #35350 (#38073)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
This PR is a result of this PR, which got merged but then reverted:

- https://github.com/facebook/react-native/pull/37913

We are trying to implement a workaround for https://github.com/facebook/react-native/issues/35350, so react-native users on android API 33+ can use `<FlatList inverted={true} />` without running into ANRs.

As explained in the issue, starting from android API 33 there are severe performance issues when using scaleY: -1 on a view, and its child view, which is what we are doing when inverting the ScrollView component (e.g. in FlatList).

This PR adds a workaround. The workaround is to also scale on the X-Axis which causes a different transform matrix to be created, that doesn't cause the ANR (see the issue for details).
However, when doing that the vertical scroll bar will be on the wrong side, thus we switch the position in the native code once we detect that the list is inverted, using the newly added `isInvertedVirtualizedList` prop.

This is a follow up PR to:

- https://github.com/facebook/react-native/pull/38071

⚠️ **Note:** [38071](https://github.com/facebook/react-native/pull/38071) needs to be merged and shipped first! Only then we can merge this PR.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[ANDROID] [FIXED] - ANR when having an inverted FlatList on android API 33+

Pull Request resolved: https://github.com/facebook/react-native/pull/38073

Test Plan:
- Check the RN tester app and see that scrollview is still working as expected
- Add the `internalAndroidApplyInvertedFix` prop as test to a scrollview and see how the scrollbar will change position.

Reviewed By: cortinico

Differential Revision: D47848063

Pulled By: NickGerleman

fbshipit-source-id: 4a6948a8b89f0b39f01b7a2d44dba740c53fabb3
---
 packages/virtualized-lists/Lists/VirtualizedList.js       | 8 +++++---
 .../__tests__/__snapshots__/VirtualizedList-test.js.snap  | 1 +
 .../__snapshots__/VirtualizedSectionList-test.js.snap     | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js
index a7775c9daa8aa3..e4817060f9439c 100644
--- a/packages/virtualized-lists/Lists/VirtualizedList.js
+++ b/packages/virtualized-lists/Lists/VirtualizedList.js
@@ -1080,6 +1080,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       style: inversionStyle
         ? [inversionStyle, this.props.style]
         : this.props.style,
+      isInvertedVirtualizedList: this.props.inverted,
       maintainVisibleContentPosition:
         this.props.maintainVisibleContentPosition != null
           ? {
@@ -1974,9 +1975,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
 }
 
 const styles = StyleSheet.create({
-  verticallyInverted: {
-    transform: [{scaleY: -1}],
-  },
+  verticallyInverted:
+    Platform.OS === 'android'
+      ? {transform: [{scale: -1}]}
+      : {transform: [{scaleY: -1}]},
   horizontallyInverted: {
     transform: [{scaleX: -1}],
   },
diff --git a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
index b877e3da84d999..c19130c6fa7ae6 100644
--- a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
+++ b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
@@ -1014,6 +1014,7 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
   getItemLayout={[Function]}
   invertStickyHeaders={true}
   inverted={true}
+  isInvertedVirtualizedList={true}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
diff --git a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
index 3f64c8856611e6..ffca6bafe2bb10 100644
--- a/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
+++ b/packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
@@ -796,6 +796,7 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
   getItemLayout={[Function]}
   invertStickyHeaders={true}
   inverted={true}
+  isInvertedVirtualizedList={true}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}