[Due for payment 2025-05-28] [$250] Android - Expense preview carousel does not scroll back 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.1.41-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+300402kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy Z Fold 4 / Android 14
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Launch Expensify app.
2. Go to 1:1 DM.
3. Submit two expenses.
4. Scroll the carousel to the right to reveal the second expense.
5. Tap on the expense preview.
6. Long press on the second expense.
7. Tap dropdown > Delete.
8. Delete the expense.
9. Tap app back button.

Expected Result:

The expense preview carousel will auto scroll back to the first expense.

Actual Result:

The expense preview carousel does not auto scroll back to the first expense, which results in a blank view as the second expense is deleted.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6823988_1746599785756.Screen_Recording_20250507_143251_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021922399136504489350
• Upwork Job ID: 1922399136504489350
• Last Price Increase: 2025-05-13

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The expense preview list doesn't adjust the scroll when the last item is deleted.

What is the root cause of that problem?

It's a known issue of FlatList RN on Android.

What changes do you think we should make in order to solve the problem?

We can apply a workaround by calling scrollToEnd when the end is reached AND an item is deleted.

Details:

One way to know if an item is deleted is to detect if the content width reduces by storing both current and previous content width.

const contentWidthRef = useRef(0);
const prevContentWidthRef = useRef(0);
...
onContentSizeChange={(w) => {
    prevContentWidthRef.current = contentWidthRef.current;
    contentWidthRef.current = w;
}}

Then, in onEndReached, if the width reduces, call scrollToEnd to adjust the scroll position.

onEndReached={(e) => {
    if (contentWidthRef.current < prevContentWidthRef.current) {
        carouselRef.current?.scrollToEnd()
    }
}}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[melvin-bot]

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021922399136504489350

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

[allroundexperts]

@bernhardoj's proposal looks good to me. Let's go with them.

🎀 👀 🎀 C+ reviewed