Merge pull request #29253 from bernhardoj/fix/27931-inverted-scroll

Fix report screen scrollbar on Android is on the left screen
Expensify · Oct 12, 2023 · a24dfc9 · a24dfc9
2 parents 12112d2 + c217028
commit a24dfc9
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 136 deletions.
diff --git a/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch b/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch
diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -133,6 +133,7 @@ function BaseInvertedFlatList(props) {
             // Web requires that items be measured or else crazy things happen when scrolling.
             getItemLayout={shouldMeasureItems ? getItemLayout : undefined}
             windowSize={15}
+            inverted
         />
     );
 }

diff --git a/...atList/CellRendererComponent/index.ios.js → ...InvertedFlatList/CellRendererComponent.js b/...atList/CellRendererComponent/index.ios.js → ...InvertedFlatList/CellRendererComponent.js
@@ -21,7 +21,6 @@ function CellRendererComponent(props) {
             {...props}
             style={[
                 props.style,
-
                 /**
                  * To achieve absolute positioning and handle overflows for list items,
                  * it is necessary to assign zIndex values. In the case of inverted lists,

diff --git a/src/components/InvertedFlatList/CellRendererComponent/index.android.js b/src/components/InvertedFlatList/CellRendererComponent/index.android.js
diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js
diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js
@@ -114,7 +114,6 @@ function InvertedFlatList(props) {
         <BaseInvertedFlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            inverted
             ref={listRef}
             shouldMeasureItems
             contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)}

diff --git a/src/components/InvertedFlatList/index.ios.js → ...mponents/InvertedFlatList/index.native.js b/src/components/InvertedFlatList/index.ios.js → ...mponents/InvertedFlatList/index.native.js
@@ -7,7 +7,12 @@ export default forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
-        inverted
         CellRendererComponent={CellRendererComponent}
+        /**
+         * To achieve absolute positioning and handle overflows for list items, the property must be disabled
+         * for Android native builds.
+         * Source: https://reactnative.dev/docs/0.71/optimizing-flatlist-configuration#removeclippedsubviews
+         */
+        removeClippedSubviews={false}
     />
 ));
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2964,11 +2964,6 @@ const styles = (theme) => ({
         horizontal: windowWidth - 140,
     }),
 
-    invert: {
-        // It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
-        transform: [{scaleX: -1}, {scaleY: -1}],
-    },
-
     iPhoneXSafeArea: {
         backgroundColor: theme.inverse,
         flex: 1,