[Better Expense Report View] [$250] Only the header & bottom padding of preview are highlighted after submitting expense

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.49-4
Reproducible in staging?: Yes
Reproducible in production?: No
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): [email protected]
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.4
App Component: Search

Action Performed:

1. Launch Expensify app.
2. Go to workspace chat.
3. Submit an expense.
4. Go to Reports.
5. Tap bookmark icon.
6. Tap Expense Reports.
7. Open FAB > Create expense > Manual.
8. Submit another expense to the same workspace chat.

Expected Result:

After submitting expense, the entire expense report row will be highlighted briefly.

Actual Result:

After submitting expense, only the header and bottom padding of the expense report row are highlighted briefly.

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

Bug6839049_1747905876375.ScreenRecording_05-22-2025_17-19-20_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021925505161579344245
• Upwork Job ID: 1925505161579344245
• Last Price Increase: 2025-05-22
• Automatic offers:
• nkdengineer | Contributor | 107428411

Issue Owner

Current Issue Owner: @sumo-slonik

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @inimaga (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[nlemma]

@adelekennedy FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[melvin-bot]

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

[melvin-bot]

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

[JoshIri360]

Proposal

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

When a new expense is submitted to an expense report, the corresponding row (TransactionItemRow) should briefly highlight in orange to draw the user's attention. However, existing background styles within the component were either overriding this orange highlight or causing only parts of the row to be highlighted, while other parts retained their default or active-state (green) backgrounds.

What is the root cause of that problem?

The root cause was a combination of two factors within the TransactionItemRow component:

1. The animatedHighlightStyle (derived from useAnimatedHighlightStyle) was configured with a default backgroundColor (theme.highlightBG) which is green. This green background was being applied even when the orange "newly added" highlight was not active, interfering with other styles or the intended transparency.
2. The bgActiveStyles, responsible for applying green backgrounds for selected or hovered states, were not configured to yield to the orange "newly added" highlight. If an item was, for example, selected and newly added, the green selected style could override the orange highlight.

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

The solution involves the following adjustments in src/components/TransactionItemRow/index.tsx:

1. Modify animatedHighlightStyle: The backgroundColor property for useAnimatedHighlightStyle is set to 'transparent'. This ensures that animatedHighlightStyle only applies its highlightColor (the orange highlight for new items when transactionItem.shouldBeHighlighted is true) and does not introduce its own green background when the orange highlight is not active.
2. Update bgActiveStyles Logic: The useMemo hook for bgActiveStyles checks if transactionItem.shouldBeHighlighted === true. If it is, an empty style object ({}) is returned. This makes the inner View transparent to the animatedHighlightStyle's orange highlight, ensuring the orange highlight is visible and takes precedence over selected/hovered styles.
3. Apply Styles: The animatedHighlightStyle is applied to the outer Animated.View components (for both narrow and wide layouts). The bgActiveStyles are applied to the inner View component that contains the main content. This layering ensures the orange highlight can cover the component, and the conditional transparency of bgActiveStyles allows it to show through.

These changes ensure that the orange highlight for new items is correctly displayed, while other background styles (like selected or hovered states) apply correctly when the orange highlight is not active.

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]

⚠️ @JoshIri360 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).

[nkdengineer]

Proposal

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

After submitting expense, only the header and bottom padding of the expense report row are highlighted briefly.

What is the root cause of that problem?

It comes from #62286 where we used TransactionItemRow component in

App/src/components/SelectionList/Search/ReportListItem.tsx

Line 152 in 284ac81

<TransactionItemRow

This component has animatedHighlightStyle that always has a default background color that overrides the background color from ReportListItem. When the report item is highlighted, transactionItem.shouldBeHighlighted is undefined so only the header and bottom of the report row are highlighted.

App/src/components/TransactionItemRow/index.tsx

Line 232 in 284ac81

<Animated.View style={[animatedHighlightStyle]}>

App/src/components/TransactionItemRow/index.tsx

Lines 87 to 92 in 284ac81

	const animatedHighlightStyle = useAnimatedHighlightStyle({
	shouldHighlight: transactionItem.shouldBeHighlighted ?? false,
	borderRadius: variables.componentBorderRadius,
	highlightColor: theme.messageHighlightBG,
	backgroundColor: theme.highlightBG,
	});

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

We can introduce a new prop like isInReportRow with default value is false.

And if it's true we will not apply animatedHighlightStyle here and here

Then we will pass isInReportRow as true here.

App/src/components/SelectionList/Search/ReportListItem.tsx

Line 152 in 284ac81

<TransactionItemRow

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

None

What alternative solutions did you explore? (Optional)

We can override shouldBeHighlighted of transaction data with item?.shouldAnimateInHighlight

transactionItem={{...transaction, shouldBeHighlighted: item.shouldAnimateInHighlight}}

App/src/components/SelectionList/Search/ReportListItem.tsx

Line 153 in 284ac81

transactionItem={transaction}

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.

[adelekennedy]

imo not a deploy blocker @inimaga, dropping the priority

[arosiclair]

It comes from #62286 where we used TransactionItemRow component

cc @sumo-slonik @DylanDylann @mountiny

[mountiny]

@sumo-slonik coul dyou please handle this as a follow up?

[mountiny]

Thanks for both proposals. I think the solution from @nkdengineer is a bit cleaner and simpler so i would go with that.

@nkdengineer can you please raise a pr?

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nkdengineer]

Will raise the PR soon.