[WIP] [HOLD on #104977, #104978] [LegendList 6/9] 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.7.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.7.0+001+account-for-android-end-clamp.patch

@@ -0,0 +1,68 @@
+diff --git a/node_modules/@legendapp/list/react-native.js b/node_modules/@legendapp/list/react-native.js
+index 59ecd66..432f476 100644
+--- a/node_modules/@legendapp/list/react-native.js
++++ b/node_modules/@legendapp/list/react-native.js
+@@ -1642,6 +1642,19 @@ function getPredictedNativeClamp(state, unresolvedAmount, totalSize) {
+   }
+   return 0;
+ }
++// Android clamps the offset to the new end while mounting a content shrink, then native MVCP adds the
++// anchor delta on top. Sync JS state to that clamp and only request the rest of the movement.
++function getAndroidNativeClampedAdjust(ctx, positionDiff) {
++  const state = ctx.state;
++  const maxScroll = Math.max(0, getContentSize(ctx) - state.scrollLength);
++  if (state.scroll <= maxScroll + MVCP_POSITION_EPSILON) {
++    return positionDiff;
++  }
++  const targetScroll = Math.min(state.scroll + positionDiff, maxScroll);
++  state.scroll = maxScroll;
++  state.scrollPending = maxScroll;
++  return targetScroll - maxScroll;
++}
+ function getProgressTowardAmount(targetDelta, nativeDelta) {
+   return targetDelta < 0 ? -nativeDelta : nativeDelta;
+ }
+@@ -1884,6 +1897,9 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+         now,
+         positionDiff
+       });
++      if (Platform.OS === "android" && !dataChanged && scrollTarget === void 0) {
++        positionDiff = getAndroidNativeClampedAdjust(ctx, positionDiff);
++      }
+       if (shouldQueueNativeMVCPAdjust(dataChanged, state, positionDiff, prevTotalSize, prevScroll, scrollTarget)) {
+         state.pendingNativeMVCPAdjust = {
+           amount: positionDiff,
+diff --git a/node_modules/@legendapp/list/react-native.mjs b/node_modules/@legendapp/list/react-native.mjs
+index 5bf1496..8262cbd 100644
+--- a/node_modules/@legendapp/list/react-native.mjs
++++ b/node_modules/@legendapp/list/react-native.mjs
+@@ -1621,6 +1621,19 @@ function getPredictedNativeClamp(state, unresolvedAmount, totalSize) {
+   }
+   return 0;
+ }
++// Android clamps the offset to the new end while mounting a content shrink, then native MVCP adds the
++// anchor delta on top. Sync JS state to that clamp and only request the rest of the movement.
++function getAndroidNativeClampedAdjust(ctx, positionDiff) {
++  const state = ctx.state;
++  const maxScroll = Math.max(0, getContentSize(ctx) - state.scrollLength);
++  if (state.scroll <= maxScroll + MVCP_POSITION_EPSILON) {
++    return positionDiff;
++  }
++  const targetScroll = Math.min(state.scroll + positionDiff, maxScroll);
++  state.scroll = maxScroll;
++  state.scrollPending = maxScroll;
++  return targetScroll - maxScroll;
++}
+ function getProgressTowardAmount(targetDelta, nativeDelta) {
+   return targetDelta < 0 ? -nativeDelta : nativeDelta;
+ }
+@@ -1863,6 +1876,9 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
+         now,
+         positionDiff
+       });
++      if (Platform.OS === "android" && !dataChanged && scrollTarget === void 0) {
++        positionDiff = getAndroidNativeClampedAdjust(ctx, positionDiff);
++      }
+       if (shouldQueueNativeMVCPAdjust(dataChanged, state, positionDiff, prevTotalSize, prevScroll, scrollTarget)) {
+         state.pendingNativeMVCPAdjust = {
+           amount: positionDiff,

patches/@legendapp/list/details.md

@@ -0,0 +1,16 @@
+# `@legendapp/list` patches
+
+The Fabric content-size fix from https://github.com/LegendApp/legend-list/commit/a2d20a9b is included in [LegendList 3.7.0](https://github.com/LegendApp/legend-list/blob/v3.7.0/CHANGELOG.md#370), so its local patch has been removed.
+
+### [@legendapp+list+3.7.0+001+account-for-android-end-clamp.patch](@legendapp+list+3.7.0+001+account-for-android-end-clamp.patch)
+
+- Reason: On Android, a chat that opens at its newest messages can briefly show older messages before it snaps back to the end. When rows above the viewport get their real, smaller heights, the content shrinks. Android clamps the scroll offset to the new end, and LegendList's scroll-preservation anchor then moves the offset by the full shrink again. The list stays above the end by that amount until the next scroll to the end. Account for Android's clamp and only move the anchor by what the clamp doesn't cover.
+- Scope: Only item-size scroll preservation on Android, and only when the content shrinks below the current offset. Data changes and active scroll targets already handle the clamp and are unchanged. iOS and web are unchanged.
+- Upstream PR/issue: https://github.com/LegendApp/legend-list/pull/582 upstreams this patch. https://github.com/LegendApp/legend-list/pull/481 covers the related bottom-inset case. Keep this patch until the installed LegendList release includes this fix.
+- E/App issue: https://github.com/Expensify/App/pull/100733#issuecomment-6287555197
+- PR introducing patch: https://github.com/Expensify/App/pull/100733
+- Reproduction: In a DM, mark the third-newest message as unread and go back to the inbox. Open the DM again. It should open at the newest messages without a frame showing older messages. Also scroll through older history and send a new message to check scroll preservation and end following.
+
+### Related upstream work
+
+- https://github.com/LegendApp/legend-list/pull/583 refreshes the cached end-follow state when `maintainScrollAtEndThreshold` changes. This supports a fixed pixel follow distance across viewport changes when using LegendList's built-in end following.

patches/react-native/details.md

@@ -9,10 +9,15 @@
 
 ### [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/react/react-native/pull/57959 covers z-index anchor selection. The follow-up guard preserving LegendList's positioned, zero-sized anchor is proposed in https://github.com/react/react-native/pull/57959#issuecomment-6341492122.
+- Reproducer: https://github.com/react/react-native/pull/59360 adds the RNTester reproduction, without a runtime fix. The standalone reproduction and proposed anchor patch are in https://github.com/margelo/react-native-mvcp-reproducer.
+- Earlier proposal: https://github.com/react/react-native/pull/46247 closed without merging.
+- Removal: Drop this patch only when the adopted React Native release preserves all three anchoring behaviors described above.
 - 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({enabled: !!inverted});
 
     const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
         onScrollProp?.(e);

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

@@ -223,7 +223,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

@@ -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({enabled: !!restProps.inverted});
 
     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

@@ -232,6 +232,20 @@ function MoneyRequestReportActionsListContent({reportIDFromRoute, onLayout}: Mon
         fullPolicySnapshot: report?.policyID && fullPolicySnapshotLastModified ? {policyID: report.policyID, lastModified: fullPolicySnapshotLastModified} : undefined,
     });
 
+    const [editScrollRequestID, setEditScrollRequestID] = useState(0);
+    const completedEditScrollRequestIDRef = useRef(0);
+    const requestScrollToNewestAfterEdit = () => {
+        // Force a layout commit even when closing the editor leaves the row's height unchanged.
+        setEditScrollRequestID((requestID) => requestID + 1);
+    };
+    const onCommitLayoutEffect = () => {
+        if (editScrollRequestID <= completedEditScrollRequestIDRef.current) {
+            return;
+        }
+        completedEditScrollRequestIDRef.current = editScrollRequestID;
+        scrollToBottom();
+    };
+
     // Wait for the actions to arrive before jumping, and clear the route param afterwards so a later remount
     // doesn't yank the user back down.
     useEffect(() => {
@@ -251,7 +265,7 @@ function MoneyRequestReportActionsListContent({reportIDFromRoute, onLayout}: Mon
         const isNewestReportAction = indexWithinReportActions === visibleReportActions.length - 1;
 
         return (
-            <ReportActionScrollToNewestContext.Provider value={scrollToBottom}>
+            <ReportActionScrollToNewestContext.Provider value={requestScrollToNewestAfterEdit}>
                 <ReportActionPositionContextProvider
                     index={indexWithinReportActions}
                     isNewest={isNewestReportAction}
@@ -364,6 +378,7 @@ function MoneyRequestReportActionsListContent({reportIDFromRoute, onLayout}: Mon
                         onLastItemIndexChange={updateLastItemIndex}
                         accessibilityLabel={translate('sidebarScreen.listOfChatMessages')}
                         onListLayout={onListLayout}
+                        onCommitLayoutEffect={onCommitLayoutEffect}
                         onScroll={trackVerticalScrolling}
                         onScrollBeginDrag={onListScrollBeginDrag}
                         onContentSizeChange={onListContentSizeChange}
@@ -374,7 +389,7 @@ function MoneyRequestReportActionsListContent({reportIDFromRoute, onLayout}: Mon
                         contentContainerStyle={[styles.pt5, 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} />}
                     />
                 )}