From d9172176f3db85fc7745c4fb6faad1eeda60c76a Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Mon, 13 Nov 2023 21:12:55 -0500 Subject: [PATCH 1/2] Use default batch size on web --- src/components/InvertedFlatList/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index bf552c06b4d7..731bacb241a4 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -109,9 +109,6 @@ function InvertedFlatList(props) { shouldMeasureItems contentContainerStyle={contentContainerStyle} onScroll={handleScroll} - // We need to keep batch size to one to workaround a bug in react-native-web. - // This can be removed once https://github.com/Expensify/App/pull/24482 is merged. - maxToRenderPerBatch={1} /> ); } From 68946ccf4e9c56e5239c7b04fd4ac537ae87f028 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Mon, 13 Nov 2023 21:55:18 -0500 Subject: [PATCH 2/2] Remove measure items and cleanup BaseInvertedFlatList --- .../InvertedFlatList/BaseInvertedFlatList.js | 151 ++---------------- src/components/InvertedFlatList/index.js | 1 - src/pages/home/report/ReportActionsList.js | 1 - 3 files changed, 14 insertions(+), 139 deletions(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index 90b4e02e2e4a..4206d5086a9e 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -1,9 +1,6 @@ import PropTypes from 'prop-types'; -import React, {forwardRef, useCallback, useRef} from 'react'; -import {FlatList as NativeFlatlist, View} from 'react-native'; -import _ from 'underscore'; +import React, {forwardRef} from 'react'; import FlatList from '@components/FlatList'; -import * as CollectionUtils from '@libs/CollectionUtils'; const AUTOSCROLL_TO_TOP_THRESHOLD = 128; @@ -14,148 +11,28 @@ const propTypes = { /** Same as FlatList although we wrap it in a measuring helper before passing to the actual FlatList component */ renderItem: PropTypes.func.isRequired, - - /** This must be set to the minimum size of one of the renderItem rows. Web experiences issues when inaccurate. */ - initialRowHeight: PropTypes.number.isRequired, - - /** Passed via forwardRef so we can access the FlatList ref */ - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(NativeFlatlist)})]).isRequired, - - /** Should we measure these items and call getItemLayout? */ - shouldMeasureItems: PropTypes.bool, }; const defaultProps = { data: [], - shouldMeasureItems: false, }; -function BaseInvertedFlatList(props) { - const {initialRowHeight, shouldMeasureItems, innerRef, renderItem} = props; - - // Stores each item's computed height after it renders - // once and is then referenced for the life of this component. - // This is essential to getting FlatList inverted to work on web - // and also enables more predictable scrolling on native platforms. - const sizeMap = useRef({}); - - /** - * Return default or previously cached height for - * a renderItem row - * - * @param {*} data - * @param {Number} index - * - * @return {Object} - */ - const getItemLayout = (data, index) => { - const size = sizeMap.current[index]; - - if (size) { - return { - length: size.length, - offset: size.offset, - index, - }; - } - - // If we don't have a size yet means we haven't measured this - // item yet. However, we can still calculate the offset by looking - // at the last size we have recorded (if any) - const lastMeasuredItem = CollectionUtils.lastItem(sizeMap.current); - - return { - // We haven't measured this so we must return the minimum row height - length: initialRowHeight, - - // Offset will either be based on the lastMeasuredItem or the index + - // initialRowHeight since we can only assume that all previous items - // have not yet been measured - offset: _.isUndefined(lastMeasuredItem) ? initialRowHeight * index : lastMeasuredItem.offset + initialRowHeight, - index, - }; - }; - - /** - * Measure item and cache the returned length (a.k.a. height) - * - * @param {React.NativeSyntheticEvent} nativeEvent - * @param {Number} index - */ - const measureItemLayout = useCallback((nativeEvent, index) => { - const computedHeight = nativeEvent.layout.height; - - // We've already measured this item so we don't need to - // measure it again. - if (sizeMap.current[index]) { - return; - } - - const previousItem = sizeMap.current[index - 1] || {}; - - // If there is no previousItem this can mean we haven't yet measured - // the previous item or that we are at index 0 and there is no previousItem - const previousLength = previousItem.length || 0; - const previousOffset = previousItem.offset || 0; - sizeMap.current[index] = { - length: computedHeight, - offset: previousLength + previousOffset, - }; - }, []); - - /** - * Render item method wraps the prop renderItem to render in a - * View component so we can attach an onLayout handler and - * measure it when it renders. - * - * @param {Object} params - * @param {Object} params.item - * @param {Number} params.index - * - * @return {React.Component} - */ - const renderItemFromProp = useCallback( - ({item, index}) => { - if (shouldMeasureItems) { - return measureItemLayout(nativeEvent, index)}>{renderItem({item, index})}; - } - - return renderItem({item, index}); - }, - [shouldMeasureItems, measureItemLayout, renderItem], - ); - - return ( - - ); -} - -BaseInvertedFlatList.propTypes = propTypes; -BaseInvertedFlatList.defaultProps = defaultProps; -BaseInvertedFlatList.displayName = 'BaseInvertedFlatList'; - -const BaseInvertedFlatListWithRef = forwardRef((props, ref) => ( - ( + )); -BaseInvertedFlatListWithRef.displayName = 'BaseInvertedFlatListWithRef'; +BaseInvertedFlatList.propTypes = propTypes; +BaseInvertedFlatList.defaultProps = defaultProps; +BaseInvertedFlatList.displayName = 'BaseInvertedFlatList'; -export default BaseInvertedFlatListWithRef; +export default BaseInvertedFlatList; diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index 731bacb241a4..815b58ad8308 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -106,7 +106,6 @@ function InvertedFlatList(props) { // eslint-disable-next-line react/jsx-props-no-spreading {...props} ref={innerRef} - shouldMeasureItems contentContainerStyle={contentContainerStyle} onScroll={handleScroll} /> diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 759e73aa90e5..cc19170ae318 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -420,7 +420,6 @@ function ReportActionsList({ renderItem={renderItem} contentContainerStyle={contentContainerStyle} keyExtractor={keyExtractor} - initialRowHeight={32} initialNumToRender={initialNumToRender} onEndReached={loadOlderChats} onEndReachedThreshold={0.75}