Add workaround for android API 33 ANR when inverting ScrollView #37913

hannojg · 2023-06-15T13:59:43Z

Summary:

As explained in this issue:

[Android] Inverted FlatList + Text Input causing ANR on android 13 #35350

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.

The goal of this PR is that react-native users can just use <FlatList inverted={true} /> without running into any ANRs or the need to apply manual hot fixes 😄

Changelog:

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

Test Plan:

The change is minimal, and only affects android.
Run the RNTesterApp for android and confirm that in the flatlist example the inverted list is still working as expected.

analysis-bot · 2023-06-15T14:40:42Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,757,479	-204
android	hermes	armeabi-v7a	8,070,058	-198
android	hermes	x86	9,250,082	-194
android	hermes	x86_64	9,099,221	-195
android	jsc	arm64-v8a	9,319,056	+227
android	jsc	armeabi-v7a	8,508,955	+219
android	jsc	x86	9,382,540	+223
android	jsc	x86_64	9,635,790	+226

Base commit: 7d4f233
Branch: main

NickGerleman · 2023-06-15T20:11:13Z

Thanks for the PR! I'm going to pass this over to @rozele who has spent a lot of time fighting with inverted FlatList, to get his take.

There is some later work we have been potentially looking at to move away from inversion based on transform (this fixes a couple other issues, like Talkback not working correctly). This issue has been raised super often though, so we definitely shouldn't block on that if we have a reliable workaround to the Android platform issue.

NickGerleman · 2023-06-15T20:08:49Z

...ative/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java

+    if (inverted) {
+      view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_LEFT);
+    } else {
+      view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_DEFAULT);
+    }


Does this work correctly for horizontal lists?

Also, does it position the scrollbar correctly on RTL interfaces?

I don't know offhand if they're usually on the opposite sides for RTL vs LTR on Android but I suspect they might be, they are for the web: https://www.w3.org/People/kennyluck/Test/bidi-scrollbar

I thought about RTL as well, but it seems that RTL isn't handled right now and the scrollbar handle is always on the right side. So I didn't add support for it here either.

HorizontalLists are handled by ReactHorizontalScrollViewManager, so yes, it still works 😊

rozele · 2023-06-15T21:08:19Z

packages/virtualized-lists/Lists/VirtualizedList.js

-    transform: [{scaleY: -1}],
+    transform:
+      // It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
+      Platform.OS === 'android' ? [{scaleX: -1}, {scaleY: -1}] : [{scaleY: -1}],
  },
  horizontallyInverted: {
    transform: [{scaleX: -1}],


Is the same workaround needed for horizontal lists?

Horizontal lists don't need that workaround, there won't be any ANRs when inverted

packages/virtualized-lists/Lists/VirtualizedList.js

...ative/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java

rozele

See comments

…pi-33

facebook-github-bot · 2023-06-20T20:07:33Z

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h

facebook-github-bot · 2023-06-21T21:06:40Z

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

github-actions · 2023-06-22T03:39:43Z

This pull request was successfully merged by @hannojg in 90186cd.

^{When will my fix make it into a release? | Upcoming Releases}

ejain · 2023-06-22T03:53:28Z

Will this fix make it into a 0.70.x release?

NickGerleman · 2023-06-22T07:37:48Z

I would like for us to live with this change for a bit before we pick.

We should get feedback soon from Meta usages, but it wouldn’t hurt to also get RC validation. Though the timing with the release window would make that a long gap.

cc @cortinico who has followed the inverted flat list/chat ui perf issues.

NickGerleman · 2023-06-22T08:37:01Z

I took a closer look at this change and found a couple issues, one of which would lead to a regression. I tried to find a short fix, but am unlanding for now instead.

The main one, is that RN internally may ship JS changes before native changes. This means we have a configuration where VirtualizedList uses scale instead of scaleY, but the new code in the ViewManager isn't yet running. We will need to either ship the native change first, or add a signal to read in JS. I would recommend the first since I think the API for view manager constants is in flux I think.

The other issue, that is more cosmetic is around types. Right now we pass every VirtualizedListProps prop to the ScrollView, and suppress type-checking. But we should be adding inverted to the props in ScrollViewNativeComponent if we are going to start passing it. Though I saw it was already part of the View Config.

facebook-github-bot · 2023-06-22T09:07:47Z

This pull request has been reverted by f544376.

hannojg · 2023-06-22T12:53:28Z

@NickGerleman thanks for examining this closely! What are the next steps here?
Should I make a change to the PR so the issue you named gets handled correctly?

NickGerleman · 2023-06-22T17:02:36Z

The next step would be to make a PR that:

Adds the native component prop. I might actually recommend a new name instead of inverted, in case anyone accidentally thinks it will invert their ScrollView.
Makes sure VirtualizedList doesn't trigger the new prop, until the native change is rolled out. Then we can have VirtualizedList take advantage of it.

hannojg · 2023-06-26T11:29:29Z

Hey @NickGerleman,

I will create two PRs now,

One PR with the native change, but a new prop name. Then we can merge it and wait till it's rolled out.
A PR containing the JS fix, which will set the new prop to apply the fix.

I think this way it should be fine right? I think regular react native users won't be affected by the issue that the JS code of react native might get updated before the native code does.

See also: facebook#37913 (comment)

Summary: This PR is a result of this PR, which got merged but then reverted: - #37913 We are trying to implement a workaround for #35350, so react-native users on android API 33+ can use `<FlatList inverted={true} />` without running into ANRs. This is the native part, where we add a new internal prop named `isInvertedVirtualizedList`, which can in a follow up change be used to achieve the final fix as proposed in #37913 However as NickGerleman pointed out, its important that we first ship the native change. ## Changelog:  [ANDROID] [ADDED] - Native part of fixing ANR when having an inverted FlatList on android API 33+ Pull Request resolved: #38071 Test Plan: - Check the RN tester app and see that scrollview is still working as expected - Add the `isInvertedVirtualizedList` prop as test to a scrollview and see how the scrollbar will change position. Reviewed By: rozele Differential Revision: D47062200 Pulled By: NickGerleman fbshipit-source-id: d20eebeec757d9aaeced8561f53556bbb4a492e4

…book#38071) Summary: This PR is a result of this PR, which got merged but then reverted: - facebook#37913 We are trying to implement a workaround for facebook#35350, so react-native users on android API 33+ can use `<FlatList inverted={true} />` without running into ANRs. This is the native part, where we add a new internal prop named `isInvertedVirtualizedList`, which can in a follow up change be used to achieve the final fix as proposed in facebook#37913 However as NickGerleman pointed out, its important that we first ship the native change. ## Changelog:  [ANDROID] [ADDED] - Native part of fixing ANR when having an inverted FlatList on android API 33+ Pull Request resolved: facebook#38071 Test Plan: - Check the RN tester app and see that scrollview is still working as expected - Add the `isInvertedVirtualizedList` prop as test to a scrollview and see how the scrollbar will change position. Reviewed By: rozele Differential Revision: D47062200 Pulled By: NickGerleman fbshipit-source-id: d20eebeec757d9aaeced8561f53556bbb4a492e4

Summary: This PR is a result of this PR, which got merged but then reverted: - #37913 We are trying to implement a workaround for #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: - #38071 ⚠️ **Note:** [38071](#38071) needs to be merged and shipped first! Only then we can merge this PR. ## Changelog:  [ANDROID] [FIXED] - ANR when having an inverted FlatList on android API 33+ Pull Request resolved: #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

Summary: This PR is a result of this PR, which got merged but then reverted: - facebook#37913 We are trying to implement a workaround for facebook#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: - facebook#38071 ⚠️ **Note:** [38071](facebook#38071) needs to be merged and shipped first! Only then we can merge this PR. ## Changelog:  [ANDROID] [FIXED] - ANR when having an inverted FlatList on android API 33+ Pull Request resolved: facebook#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

…book#38071) Summary: This PR is a result of this PR, which got merged but then reverted: - facebook#37913 We are trying to implement a workaround for facebook#35350, so react-native users on android API 33+ can use <FlatList inverted={true} /> without running into ANRs. This is the native part, where we add a new internal prop named isInvertedVirtualizedList, which can in a follow up change be used to achieve the final fix as proposed in facebook#37913 However as NickGerleman pointed out, its important that we first ship the native change. ## Changelog:  [ANDROID] [ADDED] - Native part of fixing ANR when having an inverted FlatList on android API 33+ Pull Request resolved: facebook#38071 Test Plan: - Check the RN tester app and see that scrollview is still working as expected - Add the isInvertedVirtualizedList prop as test to a scrollview and see how the scrollbar will change position. Reviewed By: rozele Differential Revision: D47062200 Pulled By: NickGerleman fbshipit-source-id: d20eebeec757d9aaeced8561f53556bbb4a492e4

Summary: This PR is a result of this PR, which got merged but then reverted: - #37913 We are trying to implement a workaround for #35350, so react-native users on android API 33+ can use `<FlatList inverted={true} />` without running into ANRs. This is the native part, where we add a new internal prop named `isInvertedVirtualizedList`, which can in a follow up change be used to achieve the final fix as proposed in #37913 However as NickGerleman pointed out, its important that we first ship the native change. ## Changelog:  [ANDROID] [ADDED] - Native part of fixing ANR when having an inverted FlatList on android API 33+ Pull Request resolved: #38071 Test Plan: - Check the RN tester app and see that scrollview is still working as expected - Add the `isInvertedVirtualizedList` prop as test to a scrollview and see how the scrollbar will change position. Reviewed By: rozele Differential Revision: D47062200 Pulled By: NickGerleman fbshipit-source-id: d20eebeec757d9aaeced8561f53556bbb4a492e4

Summary: This PR is a result of this PR, which got merged but then reverted: - #37913 We are trying to implement a workaround for #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: - #38071 ⚠️ **Note:** [38071](#38071) needs to be merged and shipped first! Only then we can merge this PR. ## Changelog:  [ANDROID] [FIXED] - ANR when having an inverted FlatList on android API 33+ Pull Request resolved: #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

…book#38071) Summary: This PR is a result of this PR, which got merged but then reverted: - facebook#37913 We are trying to implement a workaround for facebook#35350, so react-native users on android API 33+ can use `<FlatList inverted={true} />` without running into ANRs. This is the native part, where we add a new internal prop named `isInvertedVirtualizedList`, which can in a follow up change be used to achieve the final fix as proposed in facebook#37913 However as NickGerleman pointed out, its important that we first ship the native change. ## Changelog:  [ANDROID] [ADDED] - Native part of fixing ANR when having an inverted FlatList on android API 33+ Pull Request resolved: facebook#38071 Test Plan: - Check the RN tester app and see that scrollview is still working as expected - Add the `isInvertedVirtualizedList` prop as test to a scrollview and see how the scrollbar will change position. Reviewed By: rozele Differential Revision: D47062200 Pulled By: NickGerleman fbshipit-source-id: d20eebeec757d9aaeced8561f53556bbb4a492e4

Add workaround for android API 33 ANR when inverting views

58d4ebc

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 15, 2023

Fix import

e94e87f

hannojg mentioned this pull request Jun 15, 2023

Long text in inverted Flatlist causes huge performance drop on Android #30034

Closed

NickGerleman reviewed Jun 15, 2023

View reviewed changes

rozele reviewed Jun 15, 2023

View reviewed changes

packages/virtualized-lists/Lists/VirtualizedList.js Outdated Show resolved Hide resolved

rozele reviewed Jun 15, 2023

View reviewed changes

packages/virtualized-lists/Lists/VirtualizedList.js Outdated Show resolved Hide resolved

rozele reviewed Jun 15, 2023

View reviewed changes

...ative/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java Show resolved Hide resolved

rozele requested changes Jun 15, 2023

View reviewed changes

hannojg added 3 commits June 16, 2023 13:28

Merge branch 'facebook:main' into fix/android-flatlist-inverted-anr-a…

5279546

…pi-33

Add inverted prop to ScrollViewProps

c44cb4d

Use scale: -1 for convience + code doc

296226a

hannojg requested a review from rozele June 16, 2023 14:14

rozele reviewed Jun 21, 2023

View reviewed changes

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h Show resolved Hide resolved

inverted prop in ScrollViewProps.cpp

0f09703

rozele approved these changes Jun 21, 2023

View reviewed changes

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h Show resolved Hide resolved

github-actions bot added the Merged This PR has been merged. label Jun 22, 2023

facebook-github-bot closed this in 90186cd Jun 22, 2023

facebook-github-bot added the Reverted label Jun 22, 2023

hannojg added a commit to hannojg/react-native that referenced this pull request Jun 26, 2023

add internalAndroidApplyInvertedFix prop

94cb533

See also: facebook#37913 (comment)

hannojg mentioned this pull request Jun 26, 2023

[Native part] Add workaround for android API 33 ANR when inverting ScrollView #38071

Closed

hannojg added a commit to hannojg/react-native that referenced this pull request Jun 26, 2023

Add workaround fix for facebook#35350

a3d53f9

See also: facebook#37913 (comment)

hannojg mentioned this pull request Jun 26, 2023

Add workaround fix for #35350 #38073

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add workaround for android API 33 ANR when inverting ScrollView #37913

Add workaround for android API 33 ANR when inverting ScrollView #37913

hannojg commented Jun 15, 2023 •

edited

Loading

analysis-bot commented Jun 15, 2023

NickGerleman commented Jun 15, 2023

NickGerleman Jun 15, 2023

liamjones Jun 16, 2023

hannojg Jun 16, 2023

rozele Jun 15, 2023

hannojg Jun 16, 2023

rozele left a comment

facebook-github-bot commented Jun 20, 2023

facebook-github-bot commented Jun 21, 2023

github-actions bot commented Jun 22, 2023

ejain commented Jun 22, 2023

NickGerleman commented Jun 22, 2023

NickGerleman commented Jun 22, 2023 •

edited

Loading

facebook-github-bot commented Jun 22, 2023

hannojg commented Jun 22, 2023

NickGerleman commented Jun 22, 2023

hannojg commented Jun 26, 2023

Add workaround for android API 33 ANR when inverting ScrollView #37913

Add workaround for android API 33 ANR when inverting ScrollView #37913

Conversation

hannojg commented Jun 15, 2023 • edited Loading

Summary:

Changelog:

Test Plan:

analysis-bot commented Jun 15, 2023

NickGerleman commented Jun 15, 2023

NickGerleman Jun 15, 2023

Choose a reason for hiding this comment

liamjones Jun 16, 2023

Choose a reason for hiding this comment

hannojg Jun 16, 2023

Choose a reason for hiding this comment

rozele Jun 15, 2023

Choose a reason for hiding this comment

hannojg Jun 16, 2023

Choose a reason for hiding this comment

rozele left a comment

Choose a reason for hiding this comment

facebook-github-bot commented Jun 20, 2023

facebook-github-bot commented Jun 21, 2023

github-actions bot commented Jun 22, 2023

ejain commented Jun 22, 2023

NickGerleman commented Jun 22, 2023

NickGerleman commented Jun 22, 2023 • edited Loading

facebook-github-bot commented Jun 22, 2023

hannojg commented Jun 22, 2023

NickGerleman commented Jun 22, 2023

hannojg commented Jun 26, 2023

hannojg commented Jun 15, 2023 •

edited

Loading

NickGerleman commented Jun 22, 2023 •

edited

Loading