[Due for payment 2026-05-11] [Due for payment 2026-05-07] Android - Spend - Rounded corners disappear on the first expense row after deleting expense

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.63-1
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #87742
Email or phone of affected tester (no customers): sdsodijnosdjoij@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Search

Action Performed:

Precondition:

• Have many expenses.

1. Launch Expensify app.
2. Go to Spend > Expenses.
3. Long tap on the first expense > Select.
4. Select the last expense.
5. Tap dropdown button > Delete.
6. Delete the expense.

Expected Result:

The first expense row will have rounded corners after deleting previous first expense.

Actual Result:

The first expense row has sharp corners after deleting previous first expense.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7139705_1777344643009.Screen_Recording_20260428_105016_Expensify.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @Krishna2323

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #87742

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #87742 - "Update table and row styles for mobile search pages" by @Krishna2323 (High confidence)
Related Issues: #87460 (original issue fixed by this PR)

Recommendation: REVERT

PR #87742 introduced the isFirstItem prop to apply rounded top corners to the first expense row in the mobile Search list. After deleting the first expense, the newly promoted first item retains isFirstItem={false} from its original render position and does not receive the searchTableTopRadius style, leaving it with sharp corners.

Assigned: @Krishna2323 (PR author), @situchan, @shawnborton, @JS00001, @luacmartins (approving reviewers)
Labels: DeployBlockerCash kept (Frontend/App bug — staging only, not production). DeployBlocker removed (no backend involvement).

Detailed Analysis

Evidence

• The melvin-bot comment on this issue explicitly identifies PR Update table and row styles for mobile search pages #87742 as the causing PR.
• PR Update table and row styles for mobile search pages #87742 is present in the StagingDeployCash checklist (entry Align web & mobile promiseAllSettled and fix bug #175 in the chronological list).
• The bug is reproducible on staging (version 9.3.63-1) but not production, confirming it is introduced by a staging-only change.
• The PR is titled "Update table and row styles for mobile search pages" and directly modifies TransactionListItem.tsx to conditionally apply rounded corners using a new isFirstItem prop.

Verification

• Affected file: src/components/Search/SearchList/ListItem/TransactionListItem.tsx
• PR Update table and row styles for mobile search pages #87742 modifies this file and introduces the isFirstItem prop with associated searchTableTopRadius style logic.
• The PR also modifies src/components/Search/SearchList/index.tsx (indirectly, through the list rendering) to pass isFirstItem={index === 0}.
• In src/components/Search/SearchList/index.tsx at line 472: isFirstItem={index === 0} — this is correct for initial render, but the item that becomes the new first row after a deletion may not receive the updated prop in time due to animation/re-render sequencing with FadeOutUp and LinearTransition animations introduced by the PR.

Root Cause

PR #87742 added isFirstItem to TransactionListItem to conditionally apply searchTableTopRadius on narrow/mobile layouts. When a user deletes the first expense, the exit animation (FadeOutUp) plays for the deleted item while the remaining items reflow. Due to the interplay between FadeOutUp.duration() and LinearTransition used in the animated wrapper, the newly promoted first item (previously at index 1) may receive its updated isFirstItem={true} prop after the visual layout has already settled, leaving the row with sharp (no border radius) corners. Before this PR, all rows on mobile had uniform styling without per-item first/last radius logic, so this regression did not exist.