[$250] Reports – Thumbs-up icon missing after approving a report

[lanitochka17]

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.72-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13176702/test-cases/41236790
Email or phone of affected tester (no customers): aperera+j0@applausemail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Log in as the Admin of the Collect workspace in NewDot
2. Navigate to the report that was submitted for approval
3. Open the report preview
4. Click Approve
5. Observe the report title in the preview header

Expected Result:

After approving the report, a thumbs-up (👍) icon should be displayed next to the report title in the preview header

Actual Result:

The thumbs-up (👍) icon is not displayed after approving the report.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug7021769_1764950495862.Grabando__796.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021998441958329207564
• Upwork Job ID: 1998441958329207564
• Last Price Increase: 2025-12-16

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

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

[abbasifaizan70]

Proposal

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

After approving a report in the report preview, a thumbs-up (👍) icon should be displayed next to the report title in the preview header to indicate the approval status. Currently, the thumbs-up icon is not displayed after approving a report, even though the approval animation logic exists.

What is the root cause of that problem?

The root cause is that while the animation infrastructure for the thumbs-up icon exists in MoneyRequestReportPreviewContent.tsx (the thumbsUpScale shared value is created and animated when a report is approved), the actual thumbs-up icon component is never rendered in the JSX.

Specifically:

1. The thumbsUpScale shared value is initialized and animated correctly (lines 196, 382-388)
2. The isApproved state is correctly determined using isReportApproved
3. However, the thumbs-up icon is not included in the lazy-loaded icons list
4. The icon is not rendered next to the report title in the preview header (around line 679-686)

The animation logic was implemented but the visual component was never added to the UI.

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

1. Add ThumbsUp to the lazy-loaded icons

Update the useMemoizedLazyExpensifyIcons call in MoneyRequestReportPreviewContent.tsx to include 'ThumbsUp':

const expensifyIcons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'BackArrow', 'ThumbsUp'] as const);

2. Create an animated style for the thumbs-up icon

Add an animated style that uses the existing thumbsUpScale shared value:

const thumbsUpStyle = useAnimatedStyle(() => ({
    transform: [{scale: thumbsUpScale.value}],
}));

3. Render the thumbs-up icon next to the report title

Add the thumbs-up icon component next to the report title text, conditionally rendered when isApproved is true:

{isApproved && (
    <Animated.View style={[styles.ml2, thumbsUpStyle]}>
        <Icon
            src={expensifyIcons.ThumbsUp}
            small
            fill={theme.success}
        />
    </Animated.View>
)}

This will display the thumbs-up icon next to the report title with the existing spring animation when a report is approved. The icon will scale from 0 to 1 with the animation delay and duration already configured in the useEffect hook.

What alternative solutions did you explore? (Optional)

None

[tsa321]

Proposal

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

Reports – Thumbs-up icon missing after approving a report

What is the root cause of that problem?

The settlement (checkmark) and approved (thumbs-up) icons were removed in #66260, where there was a lot of discussion about whether they should be removed or not.

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

If we want to keep them, then we can revert the changes that removed the approved icon in #66260 :

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

Lines 672 to 678 in 5f69d0e

	</Text>
	{!doesReportNameOverflow && <>&nbsp;{approvedOrSettledIcon}</>}
	</Text>
	{doesReportNameOverflow && (
	<View style={[styles.mtn0Half, (transactions.length < 3 || shouldUseNarrowLayout) && styles.alignSelfStart]}>
	{approvedOrSettledIcon}
	</View>

What alternative solutions did you explore? (Optional)

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/~021998441958329207564

[melvin-bot]

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

[DylanDylann]

Can't reproduce anymore. @tsa321 @abbasifaizan70 Could you reproduce this bug on new main?

Screen.Recording.2025-12-12.at.15.14.01.mov