Merge pull request #57318 from callstack-internal/gedu/recyclerview_e…

…stimatedHeight_patching Patching recyclerlistview 2
Expensify · Feb 25, 2025 · aa2e880 · aa2e880
2 parents 7bbda5d + 2bfb366
commit aa2e880
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/patches/recyclerlistview+4.2.1.patch b/patches/recyclerlistview+4.2.1.patch
@@ -10,3 +10,36 @@ index 3ca4550..753c2f7 100644
          if (this._initComplete) {
              this._processInitialOffset();
              this._processOnEndReached();
+diff --git a/node_modules/recyclerlistview/dist/reactnative/platform/reactnative/scrollcomponent/ScrollComponent.js b/node_modules/recyclerlistview/dist/reactnative/platform/reactnative/scrollcomponent/ScrollComponent.js
+index 18c5ae2..4ca00f2 100644
+--- a/node_modules/recyclerlistview/dist/reactnative/platform/reactnative/scrollcomponent/ScrollComponent.js
++++ b/node_modules/recyclerlistview/dist/reactnative/platform/reactnative/scrollcomponent/ScrollComponent.js
+@@ -49,12 +49,13 @@ var ScrollComponent = /** @class */ (function (_super) {
+             }
+         };
+         _this._onLayout = function (event) {
+-            if (_this._height !== event.nativeEvent.layout.height || _this._width !== event.nativeEvent.layout.width) {
+-                _this._height = event.nativeEvent.layout.height;
++            const estimatedHeightSize = _this.props.estimatedHeightSize || event.nativeEvent.layout.height;
++            if (_this._height !== estimatedHeightSize || _this._width !== event.nativeEvent.layout.width) {
++                _this._height = estimatedHeightSize;
+                 _this._width = event.nativeEvent.layout.width;
+                 if (_this.props.onSizeChanged) {
+                     _this._isSizeChangedCalledOnce = true;
+-                    _this.props.onSizeChanged(event.nativeEvent.layout);
++                    _this.props.onSizeChanged(__assign(__assign({}, event.nativeEvent.layout), { height: estimatedHeightSize }));
+                 }
+             }
+             if (_this.props.onLayout) {
+diff --git a/node_modules/recyclerlistview/src/core/scrollcomponent/BaseScrollComponent.tsx b/node_modules/recyclerlistview/src/core/scrollcomponent/BaseScrollComponent.tsx
+index ee2952a..fc4326a 100644
+--- a/node_modules/recyclerlistview/src/core/scrollcomponent/BaseScrollComponent.tsx
++++ b/node_modules/recyclerlistview/src/core/scrollcomponent/BaseScrollComponent.tsx
+@@ -18,6 +18,7 @@ export interface ScrollComponentProps {
+     renderContentContainer?: (props?: object, children?: React.ReactNode) => React.ReactNode | null;
+     renderAheadOffset: number;
+     layoutSize?: Dimension;
++    estimatedHeightSize?: number;
+ }
+ export default abstract class BaseScrollComponent extends React.Component<ScrollComponentProps, {}> {
+     public abstract scrollTo(x: number, y: number, animate: boolean): void;
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -1800,6 +1800,7 @@ const CONST = {
     },
     CENTRAL_PANE_ANIMATION_HEIGHT: 200,
     LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
+    LHN_VIEWPORT_ITEM_COUNT: 20,
     SEARCH_SKELETON_VIEW_ITEM_HEIGHT: 108,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EXPENSIFY_MERCHANT: 'Expensify, Inc.',

diff --git a/src/components/LHNOptionsList/LHNOptionsList.tsx b/src/components/LHNOptionsList/LHNOptionsList.tsx
@@ -287,6 +287,7 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
                     keyExtractor={keyExtractor}
                     renderItem={renderItem}
                     estimatedItemSize={estimatedItemSize}
+                    overrideProps={{estimatedHeightSize: estimatedItemSize * CONST.LHN_VIEWPORT_ITEM_COUNT}}
                     extraData={extraData}
                     showsVerticalScrollIndicator={false}
                     onLayout={onLayout}