Fix receipt thumbnail disappearing after rotate/crop by Beamanator · Pull Request #87091 · Expensify/App

Beamanator · 2026-04-03T13:53:03Z

Explanation of Change

PR #86512 introduced localSource on transaction.receipt to preserve the local file URI during SmartScan, preventing the server's remote URL from causing an unnecessary image reload. ReportActionItemImage uses localSource in priority over thumbnail/image when rendering.

However, replaceReceipt (used by both the Replace button and the Rotate/Crop flow) only merges source, state, and filename into receiptOptimistic — Onyx merge doesn't remove keys absent from the update, so the old localSource persists. ReportActionItemImage then renders the stale local URI instead of the new receipt. The full-receipt modal reads receipt.source directly, which is why the correct image shows there but not in expense list/detail thumbnail views.

This PR has two fixes:

1. IOU/index.ts — clear localSource on replace (localSource: null)

Adding localSource: null to receiptOptimistic explicitly clears the stale URI via Onyx merge. This fixes both deploy blockers: the old receipt no longer persists after a Replace, and thumbnails update correctly after Rotate/Crop.

2. ReportActionItemImage.tsx — fix the effectiveImage null guard

Without this fix, setting localSource: null introduces a new regression: the image goes blank during the optimistic update. The existing guard uses !== undefined:

// before: null !== undefined → true → effectiveImage = null → blank receipt during optimistic update
const effectiveImage = localSource !== undefined && typeof image === 'string' ? localSource : image;

null passes this strict check, so effectiveImage is assigned null instead of the correct image value, producing an empty image source until the server responds.

// after: null != null → false → correctly falls back to image
const effectiveImage = localSource != null && typeof image === 'string' ? localSource : image;

!= null (loose equality) treats both null and undefined as "no local source".

3. Transaction.ts — widen localSource type to string | null

Reflects that localSource can be explicitly cleared.

Fixed Issues

$ #87029
$ #87051
PROPOSAL:

Tests

Scenario A — Replace receipt ($ #87029: old receipt persists after replace)

Open the Expensify app on any platform
Go to a workspace chat and create a scan expense
Navigate to the expense details page
Tap the receipt thumbnail to open it
Tap the Replace button and upload a different image
Navigate away (tap the back arrow) and return to the expense detail
Verify the new receipt thumbnail is shown everywhere — expense list, expense details, report preview
Tap the receipt to open the full modal and verify it also shows the new receipt

Scenario B — Rotate/Crop receipt ($ #87051: thumbnail not updated after rotate/crop)

Open a scan expense with a receipt
Tap the receipt preview
Tap Rotate or Crop, make a change, and save
Navigate back and verify the updated receipt thumbnail is displayed immediately on all screens: expense detail, expense list row, and report preview — not just in the full receipt modal

Scenario C — No blank image during optimistic update (fixes Codex-identified regression)

Set your device to a throttled/slow network connection (or enable airplane mode briefly after tapping save)
Perform a Rotate or Crop on a receipt and save
Verify the receipt image does not go blank during the moment between saving and the server response arriving — the UI should continue showing an image throughout

Offline tests

Go offline (airplane mode)
Perform a Replace, Rotate, or Crop on a scan expense receipt
Verify the updated receipt thumbnail is visible immediately after saving — no blank/missing image — and that the correct image is shown when you come back online

QA Steps

Deploy blocker #87029 — Replace receipt:

On staging, create a scan expense in a workspace chat
Open the expense, tap the receipt, tap Replace, and upload a new image
Navigate away and back
Verify the new receipt shows in the expense thumbnail — not the old one

Deploy blocker #87051 — Rotate/Crop thumbnail:

On staging, open a scan expense with a receipt
Tap the receipt preview, tap Rotate or Crop, save
Navigate back through the expense detail and report preview
Verify the updated thumbnail appears immediately on all screens

Regression check — no blank image:

On a slow connection, perform a Rotate or Crop and save
Verify the receipt image does not go blank between saving and the server response

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

When replaceReceipt runs, it sets localSource: null in the optimistic data to clear the stale local URI (correct Onyx semantics - explicit null is required to clear a key on merge). However, ReportActionItemImage computed effectiveImage using a strict !== undefined check, so null was treated as a defined local source and used directly, producing a blank image during the optimistic update: // null !== undefined → true → effectiveImage = null (bug) const effectiveImage = localSource !== undefined && typeof image === 'string' ? localSource : image; Fixed by using loose != null, which treats both null and undefined as "no local source", matching the intended semantic. Also updates localSource type to string | null to reflect that it can be explicitly cleared via Onyx merge. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

melvin-bot · 2026-04-03T13:53:09Z

@shubham1206agra Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

github-actions · 2026-04-03T13:54:15Z

🚧 @Beamanator has triggered a test Expensify/App build. You can view the workflow run here.

situchan · 2026-04-03T14:15:41Z

    const effectiveIsLocalFile = isLocalFile || !!localSource;
    const effectiveThumbnail = localSource ?? thumbnail;
-    const effectiveImage = localSource !== undefined && typeof image === 'string' ? localSource : image;
+    const effectiveImage = localSource != null && typeof image === 'string' ? localSource : image;


@MelvinBot find any regressions caused by this change.

I just learned 😅

When !== null. Loading forever

MelvinBot · 2026-04-03T14:18:44Z

Regression Analysis

Verdict: No production regressions found. The three changes are well-scoped and safe.

Evidence

Every production consumer of transaction.receipt.localSource lives in ReportActionItemImage.tsx:137-140. All three reads are null-safe:

Line 138: !!localSource — !!null is false, same as !!undefined ✅
Line 139: localSource ?? thumbnail — null ?? thumbnail falls through, same as undefined ✅
Line 140: Updated by this PR from !== undefined to != null ✅

The localSource references in Report/index.ts and Attachment/index.native.ts are from the separate Attachment Onyx collection, not transaction.receipt — unaffected.

Onyx merge behavior: Setting localSource: null in receiptOptimistic correctly overwrites the stale string during Onyx.METHOD.MERGE. JSON serialization preserves null (unlike undefined which would be omitted), so the clear is durable across persistence. This is the right approach.

One minor note (non-blocking)

DebugUtils.ts:799,1147 validates localSource as strictly type 'string'. After replaceReceipt sets it to null, inspecting that transaction in the debug console would flag a validation error (typeof null is 'object'). This only affects the developer debug tool — not user-facing — so it's cosmetic, but could be cleaned up by updating the validation to accept null.

situchan · 2026-04-03T14:39:12Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified there are no new alerts related to the canBeMissing param for useOnyx
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Android: mWeb Chrome

iOS: HybridApp

ios.mov

iOS: mWeb Safari

MacOS: Chrome / Safari

web1.mov

web2.mov

melvin-bot · 2026-04-03T14:40:45Z

@carlosmiceli Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

MelvinBot · 2026-04-03T14:41:41Z

Code Review

Verdict: LGTM. The changes are minimal, well-targeted, and the PR description is excellent.

Change-by-change

File	Change	Assessment
`IOU/index.ts:11688`	`localSource: null` in `receiptOptimistic`	Correct. Onyx merge preserves `null` (unlike `undefined` which is omitted), so this explicitly clears the stale local URI. The `failureData` at line 11727 restores `oldReceipt` on failure, which will re-set the original `localSource` — rollback is handled.
`ReportActionItemImage.tsx:140`	`!== undefined` → `!= null`	Correct. Loose equality treats both `null` and `undefined` as "no local source", preventing the blank-image regression during optimistic update. Consistent with the `??` on line 139 and `!!` on line 138, which already handle `null` the same as `undefined`.
`Transaction.ts:222`	`string` → `string \| null`	Correct type widening to match the new runtime behavior.

No issues found

All other consumers of localSource use truthiness (!!) or nullish coalescing (??), which are null-safe
DebugUtils.ts validates localSource as strictly 'string' (lines 799, 1147), but that's debug-only — cosmetic, non-blocking

chatgpt-codex-connector · 2026-04-03T14:48:12Z

Codex Review: Didn't find any major issues. 🎉

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

NikkiWines

OSBotify · 2026-04-03T15:28:01Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

…eipt-replace Fix receipt thumbnail disappearing after rotate/crop (cherry picked from commit ec32a1a) (cherry-picked to staging by jasperhuangg)

github-actions · 2026-04-03T15:38:35Z

🚧 @NikkiWines has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-04-03T15:43:14Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #87091.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-ec32a1a-4bec987-156bbc0e5d8e4a51965652628a3efe496e266de2/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-ec32a1a-4bec987-8d8ef47c7dc51c723f76b246908f1289902b7942/index.html

Web 🕸️
https://87091.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-04-03T16:08:10Z

🚀 Cherry-picked to staging by https://github.com/jasperhuangg in version: 9.3.52-3 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

MelvinBot · 2026-04-03T16:09:36Z

No help site changes are required for this PR.

Why: This PR is a pure bug fix — it corrects stale localSource persisting after receipt replace/rotate/crop, causing thumbnails to show the old image. No user-facing workflows, button labels, settings, or features were added or changed.

The existing help article docs/articles/new-expensify/reports-and-expenses/Attach-and-edit-receipts-on-expenses.md already accurately documents:

How to replace a receipt (lines 43–47)
How to crop a receipt (lines 49–58)
FAQ on crop/rotate availability for eReceipts (lines 114–115)

All of that documentation remains correct after this fix.

OSBotify · 2026-04-07T01:14:19Z

🚀 Deployed to production by https://github.com/roryabraham in version: 9.3.52-9 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2026-04-07T01:26:42Z

🚀 Cherry-picked to staging by https://github.com/jasperhuangg in version: 9.3.53-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	failure ❌
🍎 iOS 🍎	failure ❌

Bundle Size Analysis (Sentry):

Android

MelvinBot · 2026-04-07T01:28:03Z

No help site changes are required for this PR.

The changes are internal bug fixes to receipt thumbnail rendering (localSource cleanup on replace, null-guard fix in ReportActionItemImage, type widening in Transaction.ts). They restore existing behavior — receipt thumbnails updating correctly after Replace, Rotate, and Crop — without introducing new features, changing UI labels, or altering user-facing workflows.

OSBotify · 2026-04-07T01:37:38Z

🚀 Cherry-picked to staging by https://github.com/jasperhuangg in version: 9.3.53-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	failure ❌
🍎 iOS 🍎	failure ❌

Bundle Size Analysis (Sentry):

Android

OSBotify · 2026-04-07T23:55:17Z

🚀 Deployed to production by https://github.com/roryabraham in version: 9.3.53-7 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Beamanator requested review from a team as code owners April 3, 2026 13:53

melvin-bot Bot assigned Beamanator Apr 3, 2026

melvin-bot Bot requested review from shubham1206agra and removed request for a team April 3, 2026 13:53

melvin-bot Bot requested review from joekaufmanexpensify and removed request for a team April 3, 2026 13:53

This comment has been minimized.

Sign in to view

sosek108 approved these changes Apr 3, 2026

View reviewed changes

sosek108 mentioned this pull request Apr 3, 2026

Update Thumbnails in expense details and report preview #87056

Closed

50 tasks

Beamanator requested review from situchan and removed request for shubham1206agra April 3, 2026 14:03

situchan reviewed Apr 3, 2026

View reviewed changes

situchan approved these changes Apr 3, 2026

View reviewed changes

melvin-bot Bot requested a review from carlosmiceli April 3, 2026 14:40

NikkiWines approved these changes Apr 3, 2026

View reviewed changes

NikkiWines merged commit ec32a1a into main Apr 3, 2026
44 of 47 checks passed

NikkiWines deleted the alex/fix-thumbnail-after-receipt-replace branch April 3, 2026 15:19

OSBotify added the CP Staging marks PRs that have been CP'd to staging label Apr 3, 2026

OSBotify mentioned this pull request Apr 3, 2026

Deploy Checklist: New Expensify 2026-04-02 #86989

Closed

MelvinBot mentioned this pull request Apr 14, 2026

Steph's chat with Melvin #87829

Closed

Conversation

Beamanator commented Apr 3, 2026 • edited by melvin-bot Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Apr 3, 2026

Uh oh!

github-actions Bot commented Apr 3, 2026

Uh oh!

This comment has been minimized.

situchan Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

situchan Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot commented Apr 3, 2026

Regression Analysis

Evidence

Uh oh!

situchan commented Apr 3, 2026

Reviewer Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Apr 3, 2026

Uh oh!

MelvinBot commented Apr 3, 2026

Code Review

Change-by-change

No issues found

Uh oh!

chatgpt-codex-connector Bot commented Apr 3, 2026

Uh oh!

NikkiWines left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

OSBotify commented Apr 3, 2026

Uh oh!

github-actions Bot commented Apr 3, 2026

Uh oh!

github-actions Bot commented Apr 3, 2026

Uh oh!

OSBotify commented Apr 3, 2026

Uh oh!

MelvinBot commented Apr 3, 2026

Uh oh!

OSBotify commented Apr 7, 2026

Uh oh!

OSBotify commented Apr 7, 2026

Uh oh!

MelvinBot commented Apr 7, 2026

Uh oh!

OSBotify commented Apr 7, 2026

Uh oh!

OSBotify commented Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Beamanator commented Apr 3, 2026 •

edited by melvin-bot Bot

Loading