[Due for payment 2025-08-13] [$250] iOS - Wrong horizontal padding when opening a receipt while creating expenses with Multi-Scan

[cristipaval]

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:
Reproducible in staging?:
Reproducible in production?: New feature, not in prod yet
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dubielzyk-expensify
Slack conversation (hyperlinked to channel name):

Action Performed:

1. Global Create -> Create expense
2. On the Scan tab, enable the Multi-Scan
3. Take a few pictures in a row
4. Tap on a receipt from the bottom carousel with the receipt previews

Expected Result:

No horizontal padding should be there

Actual Result:

There is a horizontal padding

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

Triggered auto assignment to @slafortune (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]

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

[melvin-bot]

Current assignee @dukenv0307 is eligible for the External assigner, not assigning anyone new.

[MobileMage]

Proposal

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

When using Multi-Scan to create expenses on iOS, opening a receipt from the bottom carousel shows incorrect horizontal padding. The first carousel item displays correctly, but after swiping to other items and returning, the images appear smaller with unwanted horizontal padding. This only affects the carousel version of the lightbox - the confirmation screen displays correctly.

What is the root cause of that problem?

The issue is in the Lightbox component's contentSize caching mechanism. When images become invisible during carousel navigation, their cached dimensions get corrupted with undefined values. Here's the problematic sequence:

1. Initial load: Image loads with correct dimensions (525x700)
2. Swipe: Image becomes invisible, cache gets poisoned with undefined
3. Return: Image loads again but gets wrong dimensions from cache corruption
4. Result: Wrong contentSize causes incorrect scaling and horizontal padding

The cache is being shared across different images, and when one image's lightbox becomes invisible, it overwrites the cache with undefined values that then affect other images.

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

Fix the contentSize caching logic in src/components/Lightbox/index.tsx to prevent cache corruption:

// Clear cache when component unmounts
useEffect(() => {
    return () => {
        cachedImageDimensions.delete(uri);
    };
}, [uri]);

// When lightbox becomes invisible, only reset local state, not cache
useEffect(() => {
    if (isLightboxVisible) {
        return;
    }
    setLightboxImageLoaded(false);
    setInternalContentSize(cachedImageDimensions.get(uri));
}, [isLightboxVisible, uri]);

// Don't cache undefined values
const setContentSize = useCallback(
    (newDimensions: ContentSize | undefined) => {
        setInternalContentSize(newDimensions);
        if (newDimensions !== undefined) {
            cachedImageDimensions.set(uri, newDimensions);
        }
    },
    [uri],
);

// Always update with actual loaded dimensions
const updateContentSize = useCallback(
    ({nativeEvent: {width, height}}: ImageOnLoadEvent) => {
        const newDimensions = {width, height};
        setContentSize(newDimensions);
    },
    [setContentSize, uri],
);

Result

Kapture.2025-07-06.at.17.28.57.mp4

The key changes are: stop caching undefined values, preserve cached dimensions when lightbox becomes invisible, and always update with actual loaded dimensions instead of conditionally skipping updates.

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

Test carousel navigation with multiple images to ensure contentSize consistency is maintained after swiping between items.

What alternative solutions did you explore? (Optional)

N/A

[MobileMage]

Proposal

Updated here