Make it more apparent in the expense chat carousel view when expenses are added to a report

[jamesdeanexpensify]

Background

Coming from this convo, we'd like to make it more apparent in the expense chat carousel view when expenses are added to a report.

Proposal

More specifically, new expenses should slide in and there should be a highlight that fades out slowly:

2025-09-26_13-36-18.mp4

cc @Expensify/design

Issue Owner

Current Issue Owner: @situchan

[melvin-bot]

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

[jamesdeanexpensify]

Shoot, I can't seem to get the video to show up right in the OP.

[PiyushChandra17]

I would like to work on this, the changes are already mentioned in OP

[rushatgabhane]

need a proposal for this one

[PiyushChandra17]

Proposal

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

Make it more apparent in the expense chat carousel view when expenses are added to a report

What is the root cause of that problem?

Improvement

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

1. We need to implement a Carousel view when expenses are added to report

2. It should consists with prevButton and nextButton at the top > It should slide in and have fade view effect

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

n/A

What alternative solutions did you explore? (Optional)

n/A

[jamesdeanexpensify]

I updated the video in the OP with a recording. You can see that there's already a carousel view in the expense chat!

[jamesdeanexpensify]

The actual change is: new expenses should slide in and there should be a highlight that fades out slowly:

[PiyushChandra17]

Okay i think it's right here, we need to update this

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

Line 387 in 58a0856

carouselRef.current?.scrollToIndex({index: carouselTransactions.length - visibleItemsOnEndCount, animated: true, viewOffset: 2 * styles.gap2.gap});

Need to figure out the slide in behaviour, highlight that fades out slowly we do it like this way:

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 495 in 58a0856

selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails);

[FitseTLT]

Proposal

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

Make it more apparent in the expense chat carousel view when expenses are added to a report

What is the root cause of that problem?

New Feature

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

We will need to pass shouldHighlight prop to TransactionPreviewContent and we will enable the highlight animation if it is true

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Lines 199 to 202 in 9490950

	const transactionWrapperStyles = [styles.border, styles.moneyRequestPreviewBox, (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending];
	return (
	<View style={[transactionWrapperStyles, containerStyles]}>

const animatedHighlightStyle = useAnimatedHighlightStyle({
        shouldHighlight,
        highlightColor: theme.messageHighlightBG,
        backgroundColor: theme.cardBG,
    });

    const transactionWrapperStyles = [
        styles.border,
        styles.moneyRequestPreviewBox,
        (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,
        animatedHighlightStyle,
    ];

    return (
        <Animated.View style={[transactionWrapperStyles, containerStyles]}>
           

In MoneyRequestReportPreview we will track the highlighted items via a state and pass shouldHighlight all the way down to TransactionPreviewContent if an item is part of it. Via an effect whenever there is a new transaction added we will set newItemsToHighlight

   const [itemsToHighlight, setItemsToHighlight] = useState<Set<string> | null>(null);
    const prevTransactionIDs = usePrevious(transactions.map((tra) => tra.transactionID));
    useEffect(() => {
        const newTransactionIDs = transactions.filter((tran) => !prevTransactionIDs.includes(tran.transactionID)).map((tra) => tra.transactionID);
        if (!newTransactionIDs.length) {
            return;
        }
        const newItemsToHighlight = new Set<string>();
        newTransactionIDs.forEach((item) => {
            newItemsToHighlight.add(item);
        });

        setItemsToHighlight(newItemsToHighlight);
    }, [transactions]);

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

Line 146 in 9490950

isHovered={isHovered}

            shouldHighlight={!!itemsToHighlight?.has(item.transactionID)}

Then pass itemsToHighlight

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

Line 138 in 9490950

<MoneyRequestReportPreviewContent

            itemsToHighlight={itemsToHighlight}

Then insided MoneyRequestReportPreviewContent we will scroll to the first new item

  useEffect(() => {
        const index = carouselTransactions.findIndex((trans) => itemsToHighlight?.has(trans.transactionID));

        if (index < 0) {
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            carouselRef.current?.scrollToIndex({index});
        });
    }, [itemsToHighlight]);

Optionally we can start the scrolling and highlighting after the report preview is scrolled to view here

App/src/pages/home/report/ReportActionsList.tsx

Lines 443 to 449 in 9490950

	if (action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW) {
	if (index > 0) {
	setTimeout(() => {
	reportScrollManager.scrollToIndex(index);
	}, 100);
	} else {
	setIsFloatingMessageCounterVisible(false);

In that case we can imperatively call scrollAndHighlightItem approach like in SelectionLisht here The approach will similar to the above but we will only need to make notifyNewAction pass the new transactionIDs added then after scrolling to the report preview we will call scrollAndHighlightItem with the new transactionIDs and simialr to BaseSelectionList we will scroll to the new item and set a temporary itemsToHighlight state(that would be reset after a timeout).

REsult :

2025-09-27.02-56-40.mp4

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

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @FitseTLT Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).