perf: Migrate to Flashlist in MoneyRequestReportTransactionList by TMisiukiewicz · Pull Request #91422 · Expensify/App

TMisiukiewicz · 2026-05-22T11:58:02Z

Explanation of Change

Problem
On heavy money-request reports the RHP list was effectively non-virtualised. The inner transactions section was rendered via plain .map() inside the parent FlatList's ListHeaderComponent, which renders eagerly. Every transaction row mounted synchronously when the report opened, pushing report open time to ~20–30s for a report with 1600 expenses and producing a noticeable jank window on every navigation.

Solution

Unified list — merged the inner transactions section and the outer report-actions section into a single virtualised list. A discriminated-union UnifiedListItem (section-header | transaction | transactions-footer | report-action) flows through one renderItem dispatcher, so transactions and chat messages now share the same recycler window instead of one being eagerly rendered inside the other's header.
FlashList — migrated the list from react-native's FlatList (FlatListWithScrollKey). initialScrollIndex replaces the FlatList-specific useFlatListScrollKey wrapper
Controller + sub-component — MoneyRequestReportTransactionList continues to own the transaction-domain state (sort, group-by, selection, columns, totals, etc.) and exposes it to the parent via a render-prop controller. The parent renders a small MoneyRequestReportUnifiedList sub-component that assembles the FlashList from controller data plus the report-actions list

Fixed Issues

$ #91425
PROPOSAL:

Tests

Before testing: npm run i-standalone as this PR contains patch to the FlashList

Go to Spend tab
Go to Reports tab
Open Report with a couple of expenses - where list is not scrollable
Verify everything is displayed correctly
Open Report with a lot of expenses in multiple categories
Verify report opens correctly
Select a single report and verify it selects correctly
Select all reports from a category using category header and verify they are all selected (even if they are out of the viewport)
Select all reports from all categories using top table header and verify all reports in a list get selected
Send a message on the report and verify you are scrolled to the bottom of the list
Web only: Narrow down the viewport horizontally and verify the table is scrollable horizontally
Send a couple of messages on the chat
Verify that messages are not scrolled horizontally together with the table

Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

ios.mov

iOS: mWeb Safari

MacOS: Chrome / Safari

web.mov

…rt-list

…ation

codecov · 2026-05-22T12:13:37Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/CONST/index.ts	`93.33% <ø> (ø)`
src/components/Table/TableBody.tsx	`100.00% <100.00%> (ø)`
...ansactionItemRow/DeferredTransactionItemRowRBR.tsx	`100.00% <100.00%> (ø)`
...ents/TransactionItemRow/TransactionItemRowWide.tsx	`99.14% <100.00%> (+<0.01%)`	⬆️
src/components/TransactionItemRow/index.tsx	`83.60% <100.00%> (+0.55%)`	⬆️
src/hooks/useReportActionsScroll.ts	`98.01% <100.00%> (ø)`
src/hooks/useScrollToEndOnNewMessageReceived.ts	`94.11% <100.00%> (ø)`
...stReportView/MoneyRequestReportTransactionItem.tsx	`0.00% <0.00%> (ø)`
...ts/TransactionItemRow/TransactionItemRowNarrow.tsx	`0.00% <0.00%> (ø)`
...ew/MoneyRequestReportTransactionLongPressModal.tsx	`0.00% <0.00%> (ø)`
... and 4 more
... and 19 files with indirect coverage changes

…onents

…rt-list

melvin-bot · 2026-05-26T07:20:10Z

@aimane-chnaif Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6b5c9bef51

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

github-actions · 2026-07-02T12:08:11Z

⚠️ This PR is possibly changing native code and/or updating libraries, it may cause problems with HybridApp. Please check if any patch updates are required in the HybridApp repo and run an AdHoc build to verify that HybridApp will not break. Ask Contributor Plus for help if you are not sure how to handle this. ⚠️

github-actions · 2026-07-02T12:10:19Z

🚧 mountiny has triggered a test Expensify/App build. You can view the workflow run here.

…rt-list

…rt-list # Conflicts: # src/components/Search/index.tsx

TMisiukiewicz · 2026-07-02T13:03:24Z

@aimane-chnaif could you do another round of tests please, just remember about reinstalling the packages after switching the branch as you need a patch applied

…rt-list

aimane-chnaif · 2026-07-03T15:35:08Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0a8bcf28b6

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-03T15:42:34Z

+    const scrollToBottom = useCallback(() => {
+        if (lastItemIndexRef.current < 0) {
+            return;
+        }
+
+        const listRef = reportScrollManager.ref;
+        listRef?.current?.scrollToIndex({index: lastItemIndexRef.current, animated: false});


Route send-message autoscroll through indexed bottom jump

This new helper avoids scrollToEnd because large transaction+chat lists can land on a blank estimated end, but it is only used by the latest-messages pill. When the current user sends an ADD_COMMENT, scrollToBottomForCurrentUserAction still calls reportScrollManager.scrollToEnd(), so the send-message autoscroll keeps the same large-report failure mode after this migration; route that path through this indexed bottom jump as well.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-07-03T15:42:34Z

+    const reportActionItems: UnifiedListItem[] = visibleReportActions.map((action) => ({type: 'report-action', action}));
+    const data: UnifiedListItem[] = shouldInlineTransactions ? [...controller.transactionListItems, TRANSACTIONS_FOOTER_ITEM, ...reportActionItems] : reportActionItems;


Preserve the loading skeleton when only actions are empty

When transactions are inlined, data is populated with transaction rows and the footer even while visibleReportActions is still empty during initial action loading. That prevents the ListEmptyComponent skeleton from rendering, whereas the previous FlatList had empty action data and showed ReportActionsListLoadingSkeleton below the transaction section; reports with existing expenses but still-loading comments now show no loading state for the actions.

Useful? React with 👍 / 👎.

MelvinBot · 2026-07-03T15:52:09Z

Review — FlashList migration for the money-request report list

Reviewed the whole diff, focusing on the parts the bots didn't cover: the new overrideWindowSize windowing mechanism, scroll/deep-link behavior, and the selection re-render path. The architecture is clever and the ExternalScrollFlashListTable approach to keep chat out of the horizontal scroller (fixing the drag-sideways blocker) reads correctly on paper — nice. A few things worth addressing before merge, plus confirmation items best checked on device.

🔴 Deep-link / open-at-action anchoring looks like a real regression

initialScrollIndex is a mount-time-only hint. On a cold deep-link open, the list mounts while visibleReportActions is still empty (isReportEmpty is false during loading because showReportActionsLoadingState is true — MoneyRequestReportActionsList.tsx:720), so linkedActionLocalIndex === -1 → initialScrollIndex === undefined → opens at top. When the linked action's page hydrates later, FlashList does not re-read the changed prop, and there's no compensating scrollToIndex effect (MoneyRequestReportUnifiedList.tsx:192-193,211). The old useFlatListScrollKey re-evaluated every render and sliced data to the target, so anchoring survived data expansion. This confirms the Codex P1. Recommend a scrollToIndex effect keyed on linkedReportActionID once the action is present in data.

🟠 `scrollToEnd` blank-bottom bug still lives in two autoscroll paths

The PR added scrollToBottom (indexed jump via scrollToIndex, :112-118) precisely because scrollToEnd lands on an estimated offset and leaves the bottom blank on large lists — but only wired it to the floating "latest messages" pill. New-message autoscroll (:504) and current-user ADD_COMMENT autoscroll (:560, :595) still call reportScrollManager.scrollToEnd(), so sending/receiving a message on a large report can still land on a blank bottom. Route these through the same indexed jump for consistency (matches Codex P2).

🟡 The `overrideWindowSize` patch works but the invariant is fragile

The patch redirects the window height at a single site (updateLayoutParams); containerViewSizeRef still stores the driver's full content height. getMaxScrollOffset/useBoundDetection correctly read getWindowSize(), and the nested table passes no onEndReached/viewability callbacks, so it's fine today — but any future code path that reads the measured container height for this list would get the full height, not the viewport. Worth a comment in the patch (or the component) calling out that the override is not total. Also overrideWindowSize.width is never read for a vertical list — only .height matters here, so passing contentWidth there is misleading.

Two smaller patch items:

patches/@shopify/flash-list/details.md has Upstream PR/issue: TBD, E/App issue: TBD, PR introducing patch: TBD — every other patch entry fills these in. Please attribute before merge.
Confirm the patch applies cleanly on a fresh npm install (patch-package hadn't been applied in my checkout).

🟡 Loading skeleton is suppressed when a report has expenses but actions are still loading

When transactions are inlined, data is non-empty (rows + footer) even while visibleReportActions is empty during init (MoneyRequestReportUnifiedList.tsx:124), so ListEmptyComponent (the actions skeleton) never renders. Reports with existing expenses but still-loading comments show no loading state for the chat region (Codex P3, minor UX).

Perf note — selection toggles reconcile the whole unified list

data is rebuilt unconditionally each render (:124), and MoneyRequestReportTransactionList consumes selection context, so a selection toggle rebuilds controller → new data/dispatchRenderItem → FlashList re-processes visible cells. Good news: report-action children bail out (memo'd renderer + selection-independent renderReportAction), so the cost is the reconciliation walk plus re-rendering the visible transaction rows (which are un-memoized — pre-existing, but now worth React.memo-ing since the row is the thing that actually commits). Since React Compiler runs here, the existing "wrap in useMemo" suggestion may be partly redundant — worth a quick DevTools profiler pass on a large report to confirm the toggle cost before deciding.

Minor / FYI (verified, low priority)

First-frame under-render, self-correcting: before onLayout, viewportHeight=0/tableOffsetTop=0; the nested list renders only its drawDistance buffer (~24 rows) and corrects on the next commit when both layouts fire. No blank/over-render, but confirm visually it covers a tall viewport on the first frame.
inline↔horizontal layout toggle stale offset: the scroll store only resets on report.reportID change and only writes while isHorizontalTable. If a window resize flips inline→horizontal for the same report, the driver seeds from a stale offset until the first post-toggle scroll — possible one-frame wrong-window flash. (MoneyRequestReportUnifiedList.tsx:147-155)
scrollToBottom index guard only checks < 0, not an upper clamp to data.length-1 (:113); a data-shrink race could target an out-of-range index. FlashList clamps rather than crashes, so low risk.
Verified clean: unread-marker index-offset math (both inline and horizontal cases, no off-by-one at the footer), deleted helpers (getInitialNumReportActionsToRender, getInitialPaginationSize, useFlatListScrollKey, FlatListWithScrollKey) have no dangling references, and the AUTOSCROLL_TO_TOP_THRESHOLD import swap is equivalent.

Automated review by MelvinBot — the deep-link (🔴) and scrollToEnd (🟠) items are the two I'd prioritize; the rest are polish/confirmation. Not a substitute for on-device regression testing of the horizontal-table windowing.

aimane-chnaif · 2026-07-03T15:52:33Z

Please check this deeplink bug. The video shows comparison between this branch vs staging

bug.mov

…rt-list

TMisiukiewicz · 2026-07-06T11:59:44Z

@aimane-chnaif any specific repro steps I should follow? I cannot reproduce it unfortunately

bug.mov

aimane-chnaif · 2026-07-06T12:26:13Z

@TMisiukiewicz what is test email? I can invite to that report

TMisiukiewicz · 2026-07-06T12:27:28Z

@aimane-chnaif applausetester@applause.expensifail.com

aimane-chnaif · 2026-07-06T12:29:43Z

@aimane-chnaif applausetester@applause.expensifail.com

https://dev.new.expensify.com:8082/r/2606978285575315/7498427359743226882

…rt-list

TMisiukiewicz · 2026-07-07T07:59:00Z

@aimane-chnaif this should be fixed, could you retest please?

aimane-chnaif · 2026-07-07T08:09:10Z

Scroll issue fixed but there's still flicker which doesn't happen in production

flicker.mov

github-actions · 2026-07-07T11:25:02Z

🚧 mountiny has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-07-07T11:48:12Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #91422.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-65152186801-163e75a-3fc52a63ded4d919c3d03b1d2f534c4a22fe00a0/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-6515218-163e75a-f85e2d328c3be4da6214b252953129b7b8d43312/index.html

Web 🕸️
https://91422.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

melvin-bot Bot assigned TMisiukiewicz May 22, 2026

TMisiukiewicz added 3 commits May 22, 2026 14:00

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

4b12b1a

…rt-list

perf: migrate transaction list from .map() to FlashList for virtualiz…

4551621

…ation

perf: unify transactions + actions into one virtualised list

f68b1ee

fix: restore lastTransactionID and isDesktopTableLayout

d64ff24

mountiny mentioned this pull request May 22, 2026

perf: virtualise transaction list in report screen #91425

Open

TMisiukiewicz added 8 commits May 25, 2026 09:14

fix: CI spellcheck and remove memoization wrappers

f4fbe38

fix: rephrase virtualized comment to satisfy cspell

1ee223b

use Flashlist

52ceec0

refactor: extract unified list render-prop body into sub-component

2779f70

fix: hoist long-press modal out of virtualised footer cell

71af131

Merge branch 'main' into perf/virtualised-report-list

81bb0f0

refactor: extract long-press modal and horizontal scroll wrapper comp…

1220e39

…onents

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

6b5c9be

…rt-list

TMisiukiewicz changed the title ~~perf: virtualise transaction list in report screen~~ perf: Migrate to Flashlist in MoneyRequestReportTransactionList May 26, 2026

TMisiukiewicz marked this pull request as ready for review May 26, 2026 07:20

TMisiukiewicz requested review from a team as code owners May 26, 2026 07:20

melvin-bot Bot requested review from aimane-chnaif and joekaufmanexpensify and removed request for a team and joekaufmanexpensify May 26, 2026 07:20

github-actions Bot reviewed May 26, 2026

View reviewed changes

Comment thread src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx Outdated

github-actions Bot reviewed May 26, 2026

View reviewed changes

Comment thread src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx Outdated

chatgpt-codex-connector Bot reviewed May 26, 2026

View reviewed changes

Comment thread src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx Outdated

TMisiukiewicz added 2 commits May 26, 2026 11:37

remove dead keyExtractor from transaction list controller

143946e

fix unread marker index offset when transactions are present

03ce297

TMisiukiewicz added 3 commits July 2, 2026 10:30

Add ExternalScrollFlashListTable + overrideWindowSize flash-list patch

c832398

Pin group-by/columns controls; scroll only column header with table

1e6462b

reset the offset

dc5373a

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

606bda3

…rt-list

This comment has been minimized.

Sign in to view

fix CI

a579798

TMisiukiewicz force-pushed the perf/virtualised-report-list branch from 8fdb7c6 to a579798 Compare July 2, 2026 12:33

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

cc1278d

…rt-list # Conflicts: # src/components/Search/index.tsx

TMisiukiewicz added 2 commits July 3, 2026 09:57

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

e0c9ed8

…rt-list

run fmt

0a8bcf2

TMisiukiewicz force-pushed the perf/virtualised-report-list branch from e8cf35f to 0a8bcf2 Compare July 3, 2026 08:12

chatgpt-codex-connector Bot reviewed Jul 3, 2026

View reviewed changes

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

c303939

…rt-list

TMisiukiewicz added 3 commits July 7, 2026 08:45

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

95bb8a1

…rt-list

Merge remote-tracking branch 'origin/main' into perf/virtualised-repo…

c601033

…rt-list

Fix scroll drift by skipping deferred RBR in wide transaction rows

6515218

		const reportActionItems: UnifiedListItem[] = visibleReportActions.map((action) => ({type: 'report-action', action}));
		const data: UnifiedListItem[] = shouldInlineTransactions ? [...controller.transactionListItems, TRANSACTIONS_FOOTER_ITEM, ...reportActionItems] : reportActionItems;

Uh oh!

Conversation

TMisiukiewicz commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented May 22, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot Bot commented May 26, 2026

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

github-actions Bot commented Jul 2, 2026

Uh oh!

github-actions Bot commented Jul 2, 2026

Uh oh!

This comment has been minimized.

TMisiukiewicz commented Jul 2, 2026

Uh oh!

aimane-chnaif commented Jul 3, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Jul 3, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot commented Jul 3, 2026

Review — FlashList migration for the money-request report list

🔴 Deep-link / open-at-action anchoring looks like a real regression

🟠 scrollToEnd blank-bottom bug still lives in two autoscroll paths

🟡 The overrideWindowSize patch works but the invariant is fragile

🟡 Loading skeleton is suppressed when a report has expenses but actions are still loading

Perf note — selection toggles reconcile the whole unified list

Uh oh!

aimane-chnaif commented Jul 3, 2026

Uh oh!

TMisiukiewicz commented Jul 6, 2026

Uh oh!

aimane-chnaif commented Jul 6, 2026

Uh oh!

TMisiukiewicz commented Jul 6, 2026

Uh oh!

aimane-chnaif commented Jul 6, 2026

Uh oh!

TMisiukiewicz commented Jul 7, 2026

Uh oh!

aimane-chnaif commented Jul 7, 2026

Uh oh!

github-actions Bot commented Jul 7, 2026

Uh oh!

github-actions Bot commented Jul 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

TMisiukiewicz commented May 22, 2026 •

edited

Loading

codecov Bot commented May 22, 2026 •

edited by github-actions Bot

Loading

🟠 `scrollToEnd` blank-bottom bug still lives in two autoscroll paths

🟡 The `overrideWindowSize` patch works but the invariant is fragile