From e00986d8b6700fb471501e9e042b5fce3cfdc6c2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 11 Oct 2023 12:43:11 +0800 Subject: [PATCH 1/3] removed manual inverted list workaround --- ...0.72.4+003+VerticalScrollBarPosition.patch | 22 ------ .../CellRendererComponent/index.android.js | 35 --------- .../InvertedFlatList/index.android.js | 71 ------------------- src/components/InvertedFlatList/index.ios.js | 13 ---- .../index.ios.js => index.native.js} | 36 +++++----- src/styles/styles.js | 5 -- 6 files changed, 16 insertions(+), 166 deletions(-) delete mode 100644 patches/react-native+0.72.4+003+VerticalScrollBarPosition.patch delete mode 100644 src/components/InvertedFlatList/CellRendererComponent/index.android.js delete mode 100644 src/components/InvertedFlatList/index.android.js delete mode 100644 src/components/InvertedFlatList/index.ios.js rename src/components/InvertedFlatList/{CellRendererComponent/index.ios.js => index.native.js} (55%) 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/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.ios.js b/src/components/InvertedFlatList/index.ios.js deleted file mode 100644 index 357f3d78ea9e..000000000000 --- a/src/components/InvertedFlatList/index.ios.js +++ /dev/null @@ -1,13 +0,0 @@ -import React, {forwardRef} from 'react'; -import BaseInvertedFlatList from './BaseInvertedFlatList'; -import CellRendererComponent from './CellRendererComponent'; - -export default forwardRef((props, ref) => ( - -)); diff --git a/src/components/InvertedFlatList/CellRendererComponent/index.ios.js b/src/components/InvertedFlatList/index.native.js similarity index 55% rename from src/components/InvertedFlatList/CellRendererComponent/index.ios.js rename to src/components/InvertedFlatList/index.native.js index d6f02de2b942..fc41045fafb8 100644 --- a/src/components/InvertedFlatList/CellRendererComponent/index.ios.js +++ b/src/components/InvertedFlatList/index.native.js @@ -1,18 +1,6 @@ -import React from 'react'; +import React, {forwardRef} from 'react'; import {View} from 'react-native'; -import PropTypes from 'prop-types'; - -const propTypes = { - /** Position index of the list item in a list view */ - index: PropTypes.number.isRequired, - - /** Styles that are passed to the component */ - style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), -}; - -const defaultProps = { - style: {}, -}; +import BaseInvertedFlatList from './BaseInvertedFlatList'; function CellRendererComponent(props) { return ( @@ -21,7 +9,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, @@ -35,8 +22,17 @@ function CellRendererComponent(props) { ); } -CellRendererComponent.propTypes = propTypes; -CellRendererComponent.defaultProps = defaultProps; -CellRendererComponent.displayName = 'CellRendererComponent'; - -export default CellRendererComponent; +export default forwardRef((props, ref) => ( + +)); diff --git a/src/styles/styles.js b/src/styles/styles.js index d4aacfff96aa..fc1dbb420cf6 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2960,11 +2960,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}], - }, - keyboardShortcutModalContainer: { maxHeight: '100%', flex: 0, From 3a8079371825b261acc1b5afd893fac8eca44fee Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 11 Oct 2023 12:43:23 +0800 Subject: [PATCH 2/3] set inverted by default --- src/components/InvertedFlatList/BaseInvertedFlatList.js | 1 + src/components/InvertedFlatList/index.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) 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/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) { Date: Wed, 11 Oct 2023 15:20:07 +0800 Subject: [PATCH 3/3] move CellRendererComponent to a separate file --- .../InvertedFlatList/CellRendererComponent.js | 41 +++++++++++++++++++ .../InvertedFlatList/index.native.js | 22 +--------- 2 files changed, 42 insertions(+), 21 deletions(-) create mode 100644 src/components/InvertedFlatList/CellRendererComponent.js diff --git a/src/components/InvertedFlatList/CellRendererComponent.js b/src/components/InvertedFlatList/CellRendererComponent.js new file mode 100644 index 000000000000..77397aeb4610 --- /dev/null +++ b/src/components/InvertedFlatList/CellRendererComponent.js @@ -0,0 +1,41 @@ +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; + +const propTypes = { + /** Position index of the list item in a list view */ + index: PropTypes.number.isRequired, + + /** Styles that are passed to the component */ + style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), +}; + +const defaultProps = { + style: {}, +}; + +function CellRendererComponent(props) { + return ( + + ); +} + +CellRendererComponent.propTypes = propTypes; +CellRendererComponent.defaultProps = defaultProps; +CellRendererComponent.displayName = 'CellRendererComponent'; + +export default CellRendererComponent; diff --git a/src/components/InvertedFlatList/index.native.js b/src/components/InvertedFlatList/index.native.js index fc41045fafb8..ece86032d80b 100644 --- a/src/components/InvertedFlatList/index.native.js +++ b/src/components/InvertedFlatList/index.native.js @@ -1,26 +1,6 @@ import React, {forwardRef} from 'react'; -import {View} from 'react-native'; import BaseInvertedFlatList from './BaseInvertedFlatList'; - -function CellRendererComponent(props) { - return ( - - ); -} +import CellRendererComponent from './CellRendererComponent'; export default forwardRef((props, ref) => (