[$250] Report - Preview is displayed cutted off when adding expense after moving expenses.

[jponikarchuk]

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.2.89-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2582/folder/13176730/41237111/1099720669
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Motorola MotoG60 / Android 12 / Chrome ( mWeb / Hybrid app)
App Component: Money Requests

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the Expensify app.
2. Open any workspace chat.
3. Create two manual expenses.
4. On report preview, scroll to the right to the second expense preview.
5. Open the report.
6. Select both expenses.
7. Tap on dropdown menu > "Move Expenses" > "Create Report"
8. Return to chat.
9. On the now empty report, tap on "Add Expense" > "Create Expense"
10. Create a manual expense.
11. Note that after expense is created, preview is displayed cutted off on preview.

Expected Result:

Preview of expense added to empty report, should be completelly visible.

Actual Result:

Preview of expense added to an empty report, is displayed cutted off if expenses were moved to another report before adding it.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022006651325780229010
• Upwork Job ID: 2006651325780229010
• Last Price Increase: 2026-01-01
• Automatic offers:
• abzokhattab | Reviewer | 110008986
• daledah | Contributor | 110008987

Issue Owner

Current Issue Owner: @srikarparsi

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (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.

[daledah]

Proposal

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

Preview of expense added to an empty report, is displayed cutted off if expenses were moved to another report before adding it.

What is the root cause of that problem?

After moving expenses to another report and adding a new expense to the empty report, the carousel kept an invalid scroll position when the transaction list changed. The carousel tries to show index 1 when only index 0 exists, leaving the preview cut of

App/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

Lines 809 to 828 in 6aacf44

	<FlatList
	snapToAlignment="start"
	decelerationRate="fast"
	snapToInterval={reportPreviewStyles.transactionPreviewCarouselStyle.width + styles.gap2.gap}
	horizontal
	data={carouselTransactions}
	ref={carouselRef}
	nestedScrollEnabled
	bounces={false}
	keyExtractor={(item) => `${item.transactionID}_${reportPreviewStyles.transactionPreviewCarouselStyle.width}`}
	contentContainerStyle={[styles.gap2]}
	style={reportPreviewStyles.flatListStyle}
	showsHorizontalScrollIndicator={false}
	renderItem={renderFlatlistItem}
	onViewableItemsChanged={onViewableItemsChanged}
	onEndReached={adjustScroll}
	viewabilityConfig={viewabilityConfig}
	ListFooterComponent={<View style={styles.pl2} />}
	ListHeaderComponent={<View style={styles.pr2} />}
	/>

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

We should add a useEffect that:

• Detects when currentIndex is out of bounds (currentIndex >= carouselTransactions.length)
• Resets currentIndex to 0
• Scrolls the FlatList back to index 0

    useEffect(() => {
        const prevLength = prevCarouselTransactionLength.current;
        const currentLength = carouselTransactions.length;

        // Reset to beginning if currentIndex is out of bounds for the new transactions list
        if (currentIndex > 0 && (currentLength === 0 || currentIndex >= currentLength)) {
            setCurrentIndex(0);
            setOptimisticIndex(undefined);
            setCurrentVisibleItems([0]);
            // Scroll the FlatList back to the beginning
            if (carouselRef.current && currentLength > 0) {
                carouselRef.current.scrollToIndex({index: 0, animated: false});
            } else if (carouselRef.current) {
                // If there are no transactions, scroll to offset 0
                carouselRef.current.scrollToOffset({offset: 0, animated: false});
            }
        }
        // Reset when transactions go from empty to having items (to ensure we start at the beginning)
        else if (prevLength === 0 && currentLength > 0 && currentIndex !== 0) {
            setCurrentIndex(0);
            setOptimisticIndex(undefined);
            setCurrentVisibleItems([0]);
            if (carouselRef.current) {
                carouselRef.current.scrollToIndex({index: 0, animated: false});
            }
        }
        // Note: prevCarouselTransactionLength is updated by the cleanup function in the effect above
    }, [carouselTransactions.length, currentIndex]);

What alternative solutions did you explore? (Optional)

There's a facebook/react-native#27504 on Android when we change the size of the item. So we should add the onEndReached is triggered, and programmatically scroll to the end to fill the space like we did this PR

    const adjustScroll = useCallback((info: {distanceFromEnd: number}) => {
        if (!shouldAdjustScroll || info.distanceFromEnd > 0) {
            return;
        }
        carouselRef.current?.scrollToEnd();
    }, []);

Then pass the props to the FlatList

    onEndReached={adjustScroll}
    onEndReachedThreshold={0.75}

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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

[melvin-bot]

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

[abzokhattab]

Thanks @daledah the proposal looks good me

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.