diff --git a/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch b/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch deleted file mode 100644 index e6ed0d4f79a3..000000000000 --- a/patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch +++ /dev/null @@ -1,22 +0,0 @@ -diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java -index 33658e7..31c20c0 100644 ---- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java -+++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java -@@ -381,6 +381,17 @@ public class ReactScrollViewManager extends ViewGroupManager - view.setScrollEventThrottle(scrollEventThrottle); - } - -+ @ReactProp(name = "verticalScrollbarPosition") -+ public void setVerticalScrollbarPosition(ReactScrollView view, String position) { -+ if ("right".equals(position)) { -+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_RIGHT); -+ } else if ("left".equals(position)) { -+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_LEFT); -+ } else { -+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_DEFAULT); -+ } -+ } -+ - @ReactProp(name = "isInvertedVirtualizedList") - public void setIsInvertedVirtualizedList(ReactScrollView view, boolean applyFix) { - // Usually when inverting the scroll view we are using scaleY: -1 on the list diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index 10248697394f..f49214f5de70 100644 --- 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/src/components/InvertedFlatList/CellRendererComponent/index.ios.js b/src/components/InvertedFlatList/CellRendererComponent.js similarity index 99% rename from src/components/InvertedFlatList/CellRendererComponent/index.ios.js rename to src/components/InvertedFlatList/CellRendererComponent.js index d6f02de2b942..77397aeb4610 100644 --- a/src/components/InvertedFlatList/CellRendererComponent/index.ios.js +++ b/src/components/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 deleted file mode 100644 index 78ca24751187..000000000000 --- a/src/components/InvertedFlatList/CellRendererComponent/index.android.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import PropTypes from 'prop-types'; -import styles from '../../../styles/styles'; - -const propTypes = { - /** Position index of the list item in a list view */ - index: PropTypes.number.isRequired, -}; - -function CellRendererComponent(props) { - return ( - - ); -} - -CellRendererComponent.propTypes = propTypes; -CellRendererComponent.displayName = 'CellRendererComponent'; - -export default CellRendererComponent; diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js deleted file mode 100644 index 0ffed10921d8..000000000000 --- a/src/components/InvertedFlatList/index.android.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, {forwardRef} from 'react'; -import {FlatList} from 'react-native'; -import PropTypes from 'prop-types'; -import _ from 'underscore'; -import BaseInvertedFlatList from './BaseInvertedFlatList'; -import styles from '../../styles/styles'; -import stylePropTypes from '../../styles/stylePropTypes'; -import CellRendererComponent from './CellRendererComponent'; - -const propTypes = { - /** Passed via forwardRef so we can access the FlatList ref */ - innerRef: PropTypes.shape({ - current: PropTypes.instanceOf(FlatList), - }).isRequired, - - /** The style of the footer of the list */ - ListFooterComponentStyle: stylePropTypes, -}; - -const defaultProps = { - ListFooterComponentStyle: {}, -}; - -class InvertedFlatList extends React.Component { - constructor(props) { - super(props); - - this.list = undefined; - } - - componentDidMount() { - if (!_.isFunction(this.props.innerRef)) { - // eslint-disable-next-line no-param-reassign - this.props.innerRef.current = this.list; - } else { - this.props.innerRef(this.list); - } - } - - render() { - return ( - (this.list = el)} - // Manually invert the FlatList to circumvent a react-native bug that causes ANR (application not responding) on android 13 - inverted={false} - style={styles.invert} - ListFooterComponentStyle={[styles.invert, this.props.ListFooterComponentStyle]} - verticalScrollbarPosition="left" // We are mirroring the X and Y axis, so we need to swap the scrollbar position - 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} - /> - ); - } -} -InvertedFlatList.propTypes = propTypes; -InvertedFlatList.defaultProps = defaultProps; - -export default forwardRef((props, ref) => ( - -)); diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index d46cd5801605..564db6296c9b 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -114,7 +114,6 @@ function InvertedFlatList(props) { ( // 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 index 8fa81cd98b21..8b68e752dd9d 100644 --- 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,