[LegendList 4/7] feat: migrate report actions to chronological LegendList

package.json

@@ -108,7 +108,7 @@
     "@fullstory/react-native": "^1.10.2",
     "@gorhom/portal": "^1.0.14",
     "@invertase/react-native-apple-authentication": "^2.5.0",
-    "@legendapp/list": "^3.3.10",
+    "@legendapp/list": "^3.6.0",
     "@lottiefiles/dotlottie-react": "0.13.5",
     "@onfido/react-native-sdk": "15.1.0",
     "@pusher/pusher-websocket-react-native": "^1.3.1",

patches/@legendapp/list/@legendapp+list+3.6.0+001+synchronize-fabric-content-size.patch

@@ -0,0 +1,52 @@
+diff --git a/node_modules/@legendapp/list/react-native.js b/node_modules/@legendapp/list/react-native.js
+index 0b730ec..9e14f1d 100644
+--- a/node_modules/@legendapp/list/react-native.js
++++ b/node_modules/@legendapp/list/react-native.js
+@@ -6097,4 +6097,12 @@ function useFreshDataTransitionVisibility(readyToRender, transitionEpoch) {
+ // src/components/Containers.native.tsx
++// Fabric positions and the MVCP anchor update through React. Commit the content
++// size with them so an imperative Animated update cannot clamp the old viewport.
++var useContainersSize = IsNewArchitecture ? function useContainersSizeState() {
++  const [size = 0] = useArr$(["totalSize"]);
++  return size;
++} : function useContainersSizeAnimated() {
++  return useValue$("totalSize");
++};
+ var ContainersLayer = typedMemo(function ContainersLayer2({
+   children,
+   freshDataTransitionEpoch,
+@@ -6102,7 +6110,7 @@ var ContainersLayer = typedMemo(function ContainersLayer2({
+ }) {
+   const ctx = useStateContext();
+   const columnWrapperStyle = ctx.columnWrapperStyle;
+-  const animSize = useValue$("totalSize");
++  const animSize = useContainersSize();
+   const [readyToRender, numColumns, otherAxisSize = 0] = useArr$(["readyToRender", "numColumns", "otherAxisSize"]);
+   const isVisible = useFreshDataTransitionVisibility(!!readyToRender, freshDataTransitionEpoch);
+   const style = horizontal ? {
+diff --git a/node_modules/@legendapp/list/react-native.mjs b/node_modules/@legendapp/list/react-native.mjs
+index a3d8d9a..1f2bcf9 100644
+--- a/node_modules/@legendapp/list/react-native.mjs
++++ b/node_modules/@legendapp/list/react-native.mjs
+@@ -6076,4 +6076,12 @@ function useFreshDataTransitionVisibility(readyToRender, transitionEpoch) {
+ // src/components/Containers.native.tsx
++// Fabric positions and the MVCP anchor update through React. Commit the content
++// size with them so an imperative Animated update cannot clamp the old viewport.
++var useContainersSize = IsNewArchitecture ? function useContainersSizeState() {
++  const [size = 0] = useArr$(["totalSize"]);
++  return size;
++} : function useContainersSizeAnimated() {
++  return useValue$("totalSize");
++};
+ var ContainersLayer = typedMemo(function ContainersLayer2({
+   children,
+   freshDataTransitionEpoch,
+@@ -6081,7 +6089,7 @@ var ContainersLayer = typedMemo(function ContainersLayer2({
+ }) {
+   const ctx = useStateContext();
+   const columnWrapperStyle = ctx.columnWrapperStyle;
+-  const animSize = useValue$("totalSize");
++  const animSize = useContainersSize();
+   const [readyToRender, numColumns, otherAxisSize = 0] = useArr$(["readyToRender", "numColumns", "otherAxisSize"]);
+   const isVisible = useFreshDataTransitionVisibility(!!readyToRender, freshDataTransitionEpoch);
+   const style = horizontal ? {

patches/@legendapp/list/details.md

@@ -0,0 +1,10 @@
+# `@legendapp/list` patches
+
+### [@legendapp+list+3.6.0+001+synchronize-fabric-content-size.patch](@legendapp+list+3.6.0+001+synchronize-fabric-content-size.patch)
+
+- Reason: On Android, the entire report-action list can briefly jump to older rows while item measurements settle. LegendList updates its content size through an imperative `Animated.Value`, while Fabric row positions and the scroll-preservation anchor update through React. An early content-size update can clamp the old viewport before the matching positions mount. Read the content size through the same React store on the New Architecture so these layout changes commit together.
+- Scope: Both native module formats use the synchronized size on the New Architecture. The legacy architecture retains its animated size updates, and the web entries are unchanged. Native scroll preservation and the initial loading skeleton remain enabled.
+- Upstream PR/issue: Pending submission after local validation. This patch is being developed locally as part of the LegendList migration.
+- E/App issue: https://github.com/Expensify/App/pull/100733#issuecomment-5886543887
+- PR introducing patch: https://github.com/Expensify/App/pull/100733
+- Reproduction: Open an expense chat containing a report preview and messages with different heights. Wait for the actual rows to replace the skeleton. The highlighted preview should stay visible while measurements settle, without a frame displaying older rows. Also scroll through older history and return to the latest messages to check scroll preservation.

patches/react-native/details.md

@@ -9,10 +9,12 @@
 
 ### [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
-- Upstream PR/issue: https://github.com/facebook/react-native/pull/46247
+  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. LegendList 3.6 places the anchor at its adjustment offset plus 10,000,000 pixels, beyond the viewport. The strict visibility check also prevents a fixed, zero-sized spacer at or above the scroll offset in another scroll view from taking over its visible-content anchor.
+- Scope: This changes Android `MaintainVisibleContentPosition` for every React Native scroll view that enables it, not only the report-action list. Keep this in mind when updating React Native or investigating anchoring in other scroll views.
+- Upstream PR/issue: https://github.com/facebook/react-native/pull/46247 (closed without merging; the zero-sized LegendList anchor fix is not covered there)
 - 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/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();
 
     const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
         onScrollProp?.(e);

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

@@ -7,7 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 
-import React, {useCallback, useRef, useState} from 'react';
+import {useRef, useState} from 'react';
 import {FlatList} from 'react-native';
 
 import type {CustomFlatListProps} from './types';
@@ -26,30 +26,21 @@ function CustomFlatList<T>({
 }: CustomFlatListProps<T>) {
     const [isScrolling, setIsScrolling] = useState(false);
     const styles = useThemeStyles();
-    const handleScrollBegin = useCallback(
-        (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-            onMomentumScrollBegin?.(event);
-            setIsScrolling(true);
-        },
-        [onMomentumScrollBegin],
-    );
+    const handleScrollBegin = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        onMomentumScrollBegin?.(event);
+        setIsScrolling(true);
+    };
 
-    const handleScrollEnd = useCallback(
-        (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-            onMomentumScrollEnd?.(event);
-            setIsScrolling(false);
-        },
-        [onMomentumScrollEnd],
-    );
+    const handleScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        onMomentumScrollEnd?.(event);
+        setIsScrolling(false);
+    };
 
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !enableAnimatedKeyboardDismissal, inverted: restProps.inverted});
-    const handleScroll = useCallback(
-        (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-            onScrollProp?.(e);
-            emitComposerScrollEvents();
-        },
-        [emitComposerScrollEvents, onScrollProp],
-    );
+    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: !enableAnimatedKeyboardDismissal && !!restProps.inverted});
+    const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        onScrollProp?.(e);
+        emitComposerScrollEvents();
+    };
 
     const listRef = useRef<FlatListInnerRefType<T> | null>(null);
     useFlatListHandle<T>({

src/components/FlatList/FlatList/index.tsx

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

src/components/KeyboardDismissibleFlatList/index.tsx

@@ -8,10 +8,10 @@ import {useAnimatedScrollHandler, useComposedEventHandler} from 'react-native-re
 
 import {useKeyboardDismissibleFlatListActions} from './KeyboardDismissibleFlatListContext';
 
-function KeyboardDismissibleFlatList<T>({onScroll: onScrollProp, inverted, ref, ...restProps}: AnimatedFlatListWithCellRendererProps<T>) {
+function KeyboardDismissibleFlatList<T>({onScroll: onScrollProp, ref, ...restProps}: AnimatedFlatListWithCellRendererProps<T>) {
     const {onScroll: onScrollHandleKeyboard} = useKeyboardDismissibleFlatListActions();
 
-    const emitComposerScrollEvents = useEmitComposerScrollEvents({enabled: true, inverted});
+    const emitComposerScrollEvents = useEmitComposerScrollEvents();
 
     const additionalOnScroll = useAnimatedScrollHandler({
         onScroll: emitComposerScrollEvents,

src/components/LegendList/allowLegendListItemOverflow.ts

@@ -0,0 +1,19 @@
+import {isRecord} from '@libs/ObjectUtils';
+
+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): void {
+    const itemContainer: unknown = list?.getState().elementAtIndex(index);
+    if (!isRecord(itemContainer) || !isRecord(itemContainer.style) || typeof itemContainer.style.contain !== 'string') {
+        return;
+    }
+
+    itemContainer.style.contain = 'layout style';
+}
+
+export default allowLegendListItemOverflow;

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -361,7 +361,7 @@ function MoneyRequestReportActionsListContent({reportIDFromRoute, onLayout}: Mon
                         contentContainerStyle={[shouldUseNarrowLayout ? styles.pt4 : styles.pt3, shouldReserveBulkActionBarSpace && styles.bulkActionBarListSpacing]}
                         isLoadingInitialActions={isInitialReportLoadPending}
                         /* This list is not inverted, so the footer is the bottom of the message feed —
-                           the same position the indicator occupies in the inverted ReportActionsList. */
+                           the same position the indicator occupies in ReportActionsList. */
                         listFooterComponent={<ConciergeThinkingMessage reportID={report.reportID} />}
                     />
                 )}

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -1,5 +1,4 @@
 import LinkButton from '@components/Button/composed/LinkButton';
-import type FlatListRefType from '@components/FlashList/types';
 
 import useCopySelectionEvent from '@hooks/useCopySelectionEvent';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -18,6 +17,8 @@ import {getTransactionPendingAction} from '@libs/TransactionUtils';
 
 import Navigation from '@navigation/Navigation';
 
+import type ActionListRefType from '@pages/inbox/ActionListTypes';
+
 import {resolveLayoutSpacing} from '@styles/layoutSpacing';
 
 import CONST from '@src/CONST';
@@ -127,7 +128,7 @@ type MoneyRequestReportTransactionListProps = {
     linkedReportActionID: string | undefined;
 
     /** Ref forwarded to the underlying FlashList. */
-    listRef: FlatListRefType;
+    listRef: ActionListRefType;
 
     /** Reports the unified list's last item index so the parent can jump to the bottom via scrollToIndex. */
     onLastItemIndexChange?: (index: number) => void;

src/components/MoneyRequestReportView/MoneyRequestReportUnifiedList.tsx

@@ -1,8 +1,8 @@
 import FlashList from '@components/FlashList';
-import type FlatListRefType from '@components/FlashList/types';
 
 import useWindowDimensions from '@hooks/useWindowDimensions';
 
+import type ActionListRefType from '@pages/inbox/ActionListTypes';
 import useScrollToEditingReportAction from '@pages/inbox/report/useScrollToEditingReportAction';
 
 import variables from '@styles/variables';
@@ -48,15 +48,13 @@ function unifiedListItemType(item: UnifiedListItem) {
 }
 
 type MoneyRequestReportFlashListProps = FlashListProps<UnifiedListItem> & {
-    /** Ref to the underlying list, shared via the ActionList context (typed for the legacy FlatList). */
-    ref: FlatListRefType;
+    /** Ref to the underlying list, shared via the common ActionList imperative API. */
+    ref: ActionListRefType;
 };
 
 /**
- * Forwards the shared ActionList context ref to the underlying FlashList. That context slot predates this FlashList-based
- * list and is still shared with the legacy report list, so it is typed for a FlatList. Mirroring InvertedFlashList, the
- * ref is forwarded through @components/FlashList — which receives it as an untyped runtime prop — so no type assertion is
- * needed. The scroll manager relies on the FlashList registering into this slot.
+ * Forwards the shared ActionList ref through @components/FlashList to the underlying list.
+ * FlashList implements the common imperative API consumed by the report scroll manager.
  */
 function MoneyRequestReportFlashList(props: MoneyRequestReportFlashListProps) {
     return (
@@ -93,7 +91,7 @@ type MoneyRequestReportUnifiedListProps = {
     newTransactionID?: string;
 
     /** Ref to the underlying list, shared via the ActionList context. */
-    listRef: FlatListRefType;
+    listRef: ActionListRefType;
 
     accessibilityLabel: string;