-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Native part] Add workaround for android API 33 ANR when inverting ScrollView #38071
Conversation
Base commit: 971bb81 |
I think we need this in two more places:
|
@NickGerleman thank you for having a look, I updated the files! [Interestingly this change was already working without these changes (running in fabric on new arch) 👀 ] |
Could we update react-native/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js Line 19 in e1fd4a8
|
@NickGerleman Updated! |
@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
Personally, I prefer If @NickGerleman finds In fact, this isn't the first thing we've wanted to pass context that the ScrollView is responsible for rendering a VirtualizedList / FlatList before. In |
@rozele I don't have a opinion on that and go with what the you the core maintainers are saying 😅 |
@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
This pull request was successfully merged by @hannojg in 6d206a3. When will my fix make it into a release? | Upcoming Releases |
…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: <!-- 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] [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: <!-- 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: #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: <!-- 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: 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
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: <!-- 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: 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
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: <!-- 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: 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: <!-- 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] [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: <!-- 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] [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: <!-- 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: #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: <!-- 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] [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:
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 #37913However 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+
Test Plan:
isInvertedVirtualizedList
prop as test to a scrollview and see how the scrollbar will change position.