Skip to content

Commit 3dd816c

Browse files
hannojgfacebook-github-bot
authored andcommitted
Add workaround fix for #35350 (#38073)
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
1 parent b1ceea4 commit 3dd816c

File tree

3 files changed

+7
-3
lines changed

3 files changed

+7
-3
lines changed

packages/virtualized-lists/Lists/VirtualizedList.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1080,6 +1080,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
10801080
style: inversionStyle
10811081
? [inversionStyle, this.props.style]
10821082
: this.props.style,
1083+
isInvertedVirtualizedList: this.props.inverted,
10831084
maintainVisibleContentPosition:
10841085
this.props.maintainVisibleContentPosition != null
10851086
? {
@@ -1974,9 +1975,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
19741975
}
19751976

19761977
const styles = StyleSheet.create({
1977-
verticallyInverted: {
1978-
transform: [{scaleY: -1}],
1979-
},
1978+
verticallyInverted:
1979+
Platform.OS === 'android'
1980+
? {transform: [{scale: -1}]}
1981+
: {transform: [{scaleY: -1}]},
19801982
horizontallyInverted: {
19811983
transform: [{scaleX: -1}],
19821984
},

packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap

+1
Original file line numberDiff line numberDiff line change
@@ -1014,6 +1014,7 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
10141014
getItemLayout={[Function]}
10151015
invertStickyHeaders={true}
10161016
inverted={true}
1017+
isInvertedVirtualizedList={true}
10171018
keyExtractor={[Function]}
10181019
onContentSizeChange={[Function]}
10191020
onLayout={[Function]}

packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap

+1
Original file line numberDiff line numberDiff line change
@@ -796,6 +796,7 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
796796
getItemLayout={[Function]}
797797
invertStickyHeaders={true}
798798
inverted={true}
799+
isInvertedVirtualizedList={true}
799800
keyExtractor={[Function]}
800801
onContentSizeChange={[Function]}
801802
onLayout={[Function]}

0 commit comments

Comments
 (0)