PoC: Migrate to LegendList

jest/setup.ts

@@ -1,22 +1,26 @@
 import type {RenderInfo} from '@components/FlatList/RenderTaskQueue';
 
 import '@shopify/flash-list/jestSetup';
+import type * as LegendListModule from '@legendapp/list/react-native';
+import type * as FlashListModule from '@shopify/flash-list';
+import type React from 'react';
 import type {ReactNode} from 'react';
 import type React from 'react';
 import type * as RNAppLogs from 'react-native-app-logs';
 import type {ReadDirItem} from 'react-native-fs';
-import type * as RNKeyboardController from 'react-native-keyboard-controller';
 
 import 'react-native-gesture-handler/jestSetup';
+import type * as RNKeyboardController from 'react-native-keyboard-controller';
 import type Animated from 'react-native-reanimated';
 
-import {useMemo} from 'react';
 import 'setimmediate';
+import {useMemo} from 'react';
 import mockStorage from 'react-native-onyx/dist/storage/__mocks__';
-import {TextDecoder, TextEncoder} from 'util';
 import '@src/polyfills/PromiseWithResolvers';
 import '@src/polyfills/requestIdleCallback';
 
+import {TextDecoder, TextEncoder} from 'util';
+
 import mockFSLibrary from './setupMockFullstoryLib';
 import setupMockImages from './setupMockImages';
 import setupMockLegendList from './setupMockLegendList';
@@ -31,6 +35,95 @@
 mockFSLibrary();
 setupMockLegendList();
 
+// LegendList relies on native layout measurements that Jest does not produce. FlashList's Jest setup supplies
+// deterministic layouts while keeping performance tests virtualized in the same way as the previous list.
+jest.mock('@legendapp/list/react-native', () => {
+    const ReactActual = jest.requireActual<typeof React>('react');
+    const FlashListActual = jest.requireActual<typeof FlashListModule>('@shopify/flash-list').FlashList;
+    const LegendListModuleActual = jest.requireActual<typeof LegendListModule>('@legendapp/list/react-native');
+
+    type MockLegendListProps = Omit<FlashListModule.FlashListProps<unknown>, 'data' | 'initialScrollIndex' | 'initialScrollIndexParams' | 'maintainVisibleContentPosition'> & {
+        alignItemsAtEnd?: boolean;
+        data?: readonly unknown[];
+        initialScrollAtEnd?: boolean;
+        initialScrollIndex?: number | {index: number; viewOffset?: number; viewPosition?: number};
+        maintainScrollAtEnd?: unknown;
+        maintainScrollAtEndThreshold?: number;
+        maintainVisibleContentPosition?: unknown;
+        recycleItems?: boolean;
+    };
+    type MockLegendListState = {
+        contentLength: number;
+        scroll: number;
+        scrollLength: number;
+    };
+    type MockLegendListRef = FlashListModule.FlashListRef<unknown> & {
+        getState: () => MockLegendListState | undefined;
+    };
+
+    return {
+        ...LegendListModuleActual,
+        LegendList: ReactActual.forwardRef<MockLegendListRef, MockLegendListProps>(
+            (
+                {
+                    alignItemsAtEnd,
+                    data = [],
+                    initialScrollAtEnd,
+                    initialScrollIndex,
+                    maintainScrollAtEnd,
+                    maintainScrollAtEndThreshold,
+                    maintainVisibleContentPosition,
+                    onEndReached,
+                    onEndReachedThreshold = 0,
+                    onScroll,
+                    recycleItems,
+                    ...props
+                },
+                ref,
+            ) => {
+                const listStateRef = ReactActual.useRef<MockLegendListState | undefined>(undefined);
+                const initialScrollConfig = typeof initialScrollIndex === 'number' ? {index: initialScrollIndex} : initialScrollIndex;
+                const flashListInitialScrollIndex = initialScrollAtEnd && data.length > 0 ? data.length - 1 : initialScrollConfig?.index;
+                const flashListInitialScrollIndexParams = initialScrollAtEnd
+                    ? {viewPosition: 1}
+                    : initialScrollConfig && {viewOffset: initialScrollConfig.viewOffset, viewPosition: initialScrollConfig.viewPosition};
+                const handleScroll: NonNullable<FlashListModule.FlashListProps<unknown>['onScroll']> = (event) => {
+                    const {contentOffset, contentSize, layoutMeasurement} = event.nativeEvent;
+                    listStateRef.current = {
+                        contentLength: contentSize.height,
+                        scroll: contentOffset.y,
+                        scrollLength: layoutMeasurement.height,
+                    };
+                    onScroll?.(event);
+                    const distanceFromEnd = contentSize.height - layoutMeasurement.height - contentOffset.y;
+                    if (distanceFromEnd <= layoutMeasurement.height * (onEndReachedThreshold ?? 0)) {
+                        onEndReached?.();
+                    }
+                };
+                const setRef = (instance: FlashListModule.FlashListRef<unknown> | null) => {
+                    const mockInstance = instance && Object.assign(instance, {getState: () => listStateRef.current});
+                    if (typeof ref === 'function') {
+                        ref(mockInstance);
+                        return;
+                    }
+                    if (ref) {
+                        Object.assign(ref, {current: mockInstance});
+                    }
+                };
+
+                return ReactActual.createElement(FlashListActual<unknown>, {
+                    ...props,
+                    data,
+                    initialScrollIndex: flashListInitialScrollIndex,
+                    initialScrollIndexParams: flashListInitialScrollIndexParams,
+                    onScroll: handleScroll,
+                    ref: setRef,
+                });
+            },
+        ),
+    };
+});
+
 // Polyfill necessary for Onyx.init in jest/setupAfterEnv.ts
 Object.assign(global, {TextDecoder, TextEncoder});
 

patches/react-native/details.md

@@ -9,9 +9,10 @@
 
 ### [react-native+0.86.0+002+fixMVCPAndroid.patch](react-native+0.86.0+002+fixMVCPAndroid.patch)
 
-- Reason: Fixes content jumping issues with `MaintainVisibleContentPosition` on Android, particularly in bidirectional pagination scenarios. The patch makes two key improvements:
+- Reason: Fixes content jumping issues with `MaintainVisibleContentPosition` on Android, particularly in bidirectional pagination scenarios. The patch:
   1. Changes when the first visible view is calculated - now happens on scroll events instead of during Fabric's willMountItems lifecycle, which was causing incorrect updates
   2. Improves first visible view selection logic to handle Fabric's z-index-based view reordering by finding the view with the smallest position that's still greater than the scroll position
+  3. Preserves a positioned, zero-sized first child as a scroll anchor. LegendList moves this anchor to compensate for item measurements. Selecting its surrounding container or rejecting its empty frame prevents native scroll compensation and makes the chat jump as estimated rows shrink.
 - Upstream PR/issue: https://github.com/facebook/react-native/pull/46247
 - E/App issue: 🛑
 - PR Introducing Patch: https://github.com/Expensify/App/pull/46315 (introduced), https://github.com/Expensify/App/pull/45289 (refactored)

patches/react-native/react-native+0.86.0+002+fixMVCPAndroid.patch

@@ -35,9 +35,16 @@ index 2bee605..ba26e7b 100644
      for (i in config.minIndexForVisible until contentView.childCount) {
        val child = contentView.getChildAt(i)
 
-@@ -128,27 +135,49 @@ internal class MaintainVisibleScrollPositionHelper<ScrollViewT>(
+@@ -128,27 +135,57 @@ internal class MaintainVisibleScrollPositionHelper<ScrollViewT>(
        val position = if (horizontal) child.x + child.width else child.y + child.height
 
++      // Virtualized lists can use a zero-sized, positioned first child as their scroll anchor.
++      // Preserve it instead of choosing the container that holds all rendered items.
++      if (i == config.minIndexForVisible && child.width == 0 && child.height == 0 && position > currentScroll) {
++        firstVisibleView = child
++        break
++      }
++
        // If the child is partially visible or this is the last child, select it as the anchor.
 -      if (position > currentScroll || i == contentView.childCount - 1) {
 -        firstVisibleViewRef = WeakReference(child)
@@ -70,7 +77,8 @@ index 2bee605..ba26e7b 100644
      }
 +    val frame = Rect()
 +    firstVisibleView.getHitRect(frame)
-+    if (frame.width() > 0 || frame.height() > 0) {
++    // Zero-sized anchors have a meaningful position even though they have no area.
++    if (frame.width() > 0 || frame.height() > 0 || frame.left != 0 || frame.top != 0) {
 +        prevFirstVisibleFrame = frame
 +    } else {
 +        prevFirstVisibleFrame = null

src/CONST/index.ts

@@ -7015,6 +7015,7 @@ const CONST = {
 
     MOBILE_PAGINATION_SIZE: 15,
     WEB_PAGINATION_SIZE: 30,
+    PAGINATION_LOADING_INDICATOR_HEIGHT: 72,
 
     /** Dimensions for illustration shown in Confirmation Modal */
     CONFIRM_CONTENT_SVG_SIZE: {

src/components/FlashList/index.tsx

@@ -7,7 +7,7 @@ import {FlashList as ShopifyFlashList} from '@shopify/flash-list';
 import React from 'react';
 
 function FlashList<T>({onScroll: onScrollProp, inverted, ...restProps}: FlashListProps<T>) {
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: true, inverted});
+    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !!inverted});
 
     const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
         onScrollProp?.(e);

src/components/FlashList/types.ts

@@ -1,7 +1,31 @@
 import type {RefObject} from 'react';
-import type {FlatList} from 'react-native';
+
+type ScrollToIndexParams = {
+    animated?: boolean;
+    index: number;
+    viewOffset?: number;
+    viewPosition?: number;
+};
+
+type ScrollToOffsetParams = {
+    animated?: boolean;
+    offset: number;
+};
+
+type ScrollToEndParams = {
+    animated?: boolean;
+};
+
+/** Common imperative API used by the report scroll manager across FlatList, FlashList, and LegendList. */
+type ActionListRef = {
+    scrollToIndex: (params: ScrollToIndexParams) => void;
+    scrollToOffset: (params: ScrollToOffsetParams) => void;
+    scrollToEnd: (params?: ScrollToEndParams) => void;
+    getNativeScrollRef?: () => unknown;
+};
 
 /** Ref to the underlying list instance attached via `ref={}`. */
-type FlatListRefType = RefObject<FlatList<unknown> | null> | null;
+type FlatListRefType = RefObject<ActionListRef | null> | null;
 
 export default FlatListRefType;
+export type {ActionListRef};

src/components/FlatList/FlatList/index.ios.tsx

@@ -42,7 +42,7 @@ function CustomFlatList<T>({
         [onMomentumScrollEnd],
     );
 
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !enableAnimatedKeyboardDismissal, inverted: restProps.inverted});
+    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !enableAnimatedKeyboardDismissal && !!restProps.inverted});
     const handleScroll = useCallback(
         (e: NativeSyntheticEvent<NativeScrollEvent>) => {
             onScrollProp?.(e);

src/components/FlatList/FlatList/index.tsx

@@ -245,7 +245,7 @@ function MVCPFlatList<T>({
         };
     }, []);
 
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: true, inverted: restProps.inverted});
+    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !!restProps.inverted});
     const handleScroll = useCallback(
         (e: NativeSyntheticEvent<NativeScrollEvent>) => {
             onScrollProp?.(e);

src/components/KeyboardDismissibleFlatList/index.tsx

@@ -11,7 +11,7 @@ import {useKeyboardDismissibleFlatListActions} from './KeyboardDismissibleFlatLi
 function KeyboardDismissibleFlatList<T>({onScroll: onScrollProp, inverted, ref, ...restProps}: AnimatedFlatListWithCellRendererProps<T>) {
     const {onScroll: onScrollHandleKeyboard} = useKeyboardDismissibleFlatListActions();
 
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: true, inverted});
+    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !!inverted});
 
     const additionalOnScroll = useAnimatedScrollHandler({
         onScroll: emitComposerScrollEvents,

src/components/LegendList/allowLegendListItemOverflow.ts

@@ -0,0 +1,22 @@
+import type {LegendListRef} from '@legendapp/list/react-native';
+
+/**
+ * LegendList uses paint containment for web item containers, which clips descendants that render
+ * outside their row. Remove only paint containment so inline menus can overflow while layout and
+ * style containment keep the rest of the row isolated.
+ */
+function allowLegendListItemOverflow(list: LegendListRef | null, index: number): boolean {
+    const itemContainer: unknown = list?.getState().elementAtIndex(index);
+    if (!isRecord(itemContainer) || !isRecord(itemContainer.style) || typeof itemContainer.style.contain !== 'string') {
+        return false;
+    }
+
+    itemContainer.style.contain = 'layout style';
+    return true;
+}
+
+function isRecord(value: unknown): value is Record<PropertyKey, unknown> {
+    return typeof value === 'object' && value !== null;
+}
+
+export default allowLegendListItemOverflow;

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -637,8 +637,12 @@ function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps)
                 hasNextActionMadeBySameActor(visibleReportActions, indexWithinReportActions, isOffline);
             const shouldDisableContextMenuForConciergeDraft = isDraftPendingCompletion && draftReportActionID === reportAction.reportActionID;
 
+            // This value cannot be memoized, because it is based on the indexWithinReportActions which changes on every render.
+            // eslint-disable-next-line react/jsx-no-constructed-context-values
+            const reportActionIndexContextValue = {index: indexWithinReportActions, isNewest: indexWithinReportActions === visibleReportActions.length - 1};
+
             return (
-                <ReportActionIndexContext.Provider value={indexWithinReportActions}>
+                <ReportActionIndexContext.Provider value={reportActionIndexContextValue}>
                     <ReportActionsListItemRenderer
                         reportAction={reportAction}
                         parentReportAction={parentReportAction}

src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

@@ -3,7 +3,7 @@ import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import MoneyRequestReceiptView from '@components/ReportActionItem/MoneyRequestReceiptView';
-import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
+import ReportActionsSkeletonCover, {ReportActionsAnimatedSkeletonCover} from '@components/ReportActionsSkeletonCover';
 import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
 
 import {useIsAppLoadPending, useIsReportLoadPending} from '@hooks/useInFlightRequests';
@@ -105,7 +105,7 @@ function InitialLoadingSkeleton({styles, onLayout}: {styles: ThemeStyles; onLayo
             <View style={[styles.appContentHeader, styles.borderBottom]}>
                 <ReportHeaderSkeletonView onBackButtonPress={() => {}} />
             </View>
-            <ReportActionsSkeletonView />
+            <ReportActionsAnimatedSkeletonCover />
         </View>
     );
 }
@@ -217,7 +217,7 @@ function MoneyRequestReportView({report, reportIDFromRoute, reportLoadingState,
     }
 
     if (shouldShowEmptyActionsSkeleton) {
-        return <ReportActionsSkeletonView shouldAnimate={false} />;
+        return <ReportActionsSkeletonCover />;
     }
 
     if (!report) {
@@ -228,7 +228,7 @@ function MoneyRequestReportView({report, reportIDFromRoute, reportLoadingState,
         return (
             <View style={styles.flex1}>
                 <ReportHeaderSkeletonView />
-                <ReportActionsSkeletonView />
+                <ReportActionsAnimatedSkeletonCover />
                 {shouldDisplayReportFooter ? <ReportFooter /> : null}
             </View>
         );