Add workaround fix for #35350 #38073
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
the
CLA Signed
Base commit: eaafc26 |
57 tasks
|
@NickGerleman now that is merged we can get this one merged and finally have the workaround in place 🙌 |
|
We should be able to merge this after Jul 24, when the native part is shipped everywhere. Will leave some comments here first then import. |
github-actions
bot
added
the
Needs: Repro
NickGerleman
approved these changes
Jul 19, 2023
|
Hey @NickGerleman, the comments have been addressed and I think the native code should be shipped everywhere right now. Any chance we can get this merged? 😊 |
|
@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
@NickGerleman merged this pull request in 3dd816c. |
billnbell
pushed a commit
to billnbell/react-native
that referenced
this pull request
Jul 29, 2023
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
billnbell
pushed a commit
to billnbell/react-native
that referenced
this pull request
Jul 29, 2023
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
billnbell
pushed a commit
to billnbell/react-native
that referenced
this pull request
Jul 29, 2023
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
lunaleaps
pushed a commit
that referenced
this pull request
Aug 7, 2023
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
This was referenced Aug 10, 2023
github-merge-queue bot
pushed a commit
to software-mansion/react-native-reanimated
that referenced
this pull request
Oct 30, 2023
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect. --> ## Summary This PR changes how reanimated treats inverted `FlatLists`. In #3765 our implementation was changed to mimic the react-native behavior by assigning a special style that reverts the cell inversion (inverted FlatList flips the entire view and then flips back every cell). In react-native@0.72.4 the inversion style was [changed](facebook/react-native#38073) on android due to some performance issues. That change combined with our implementation was causing the cell to remain inverted on android (since both styles were being applied). This PR changes our implementation to instead allow the `CellRendererComponent` to receive a style prop, making react solely responsible for the cell inversion. ## Test plan Check whether the Inverted FlatList Example behaves properly on android. I tested the example on all rn versions from rn@0.69
This was referenced Jan 4, 2024
This was referenced Feb 28, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.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
isInvertedVirtualizedListprop.This is a follow up PR to:
Changelog:
[ANDROID] [FIXED] - ANR when having an inverted FlatList on android API 33+
Test Plan:
internalAndroidApplyInvertedFixprop as test to a scrollview and see how the scrollbar will change position.