[Due for payment 2025-11-19] [$175] - Android - Second broken image preview is blank

@VictoriaExpensify

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: v9.2.24-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13176710/test-cases/41236964
Email or phone of affected tester (no customers): sintayewhaylu01@gmail.comi
Issue reported by: Applause Internal Team
Device used: Samsung A16/ Android 15
App Component: Other

Action Performed:

Open Hybrid app
Send the broken image link: ![AltText](https://invalid-url/image.jpg) to any chat.
Preview the broken image.
Send the broken image link again.
Attempt to view the preview..

Expected Result:

When the broken image is sent for the second time and its preview is opened, the preview should display a message such as "Attachment not found",

Actual Result:

After sending the broken image a second time and attempting to preview it, the preview page opens but remains completely blank with no visible content.

Workaround:

Unknown

Platforms:

Screenshots/Videos

11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021977972797478496567
Upwork Job ID: 1977972797478496567
Last Price Increase: 2025-11-26

Issue Owner

Current Issue Owner: @VictoriaExpensify

@VictoriaExpensify

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

Proposal

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

Android - Second broken image preview is blank

What is the root cause of that problem?

When duplicate sources exist, foundPage is incorrectly set to an index of the first attachment

App/src/components/Lightbox/index.tsx

Line 88 in 33ce24b

    
           const foundPage = attachmentCarouselPagerContext.pagerItems.findIndex((item) => item.source === uri || item.previewSource === uri);

As a result, indexOutOfRange becomes true and isLightboxVisible becomes false

App/src/components/Lightbox/index.tsx

Lines 135 to 143 in 33ce24b

    
           const isLightboxVisible = useMemo(() => { 
        
               if (!hasSiblingCarouselItems || NUMBER_OF_CONCURRENT_LIGHTBOXES === 'UNLIMITED') { 
        
                   return true; 
        
               } 
        
               const indexCanvasOffset = Math.floor((NUMBER_OF_CONCURRENT_LIGHTBOXES - 1) / 2) || 0; 
        
               const indexOutOfRange = page > activePage + indexCanvasOffset || page < activePage - indexCanvasOffset; 
        
               return !indexOutOfRange; 
        
           }, [activePage, hasSiblingCarouselItems, page]);

Because isLightboxVisible is false, the image is not rendered

App/src/components/Lightbox/index.tsx

Line 217 in 33ce24b

{isLightboxVisible && (

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

Modify the foundPage logic to also verify that the attachment is active by adding item.isActive to the condition. This ensures that only the currently active attachment is matched, preventing incorrect indexing when duplicate sources exist.

const foundPage = attachmentCarouselPagerContext.pagerItems.findIndex((item) => (item.source === uri || item.previewSource === uri) && item.isActive);

Proposal

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

The 2nd broken image is blank in preview.

What is the root cause of that problem?

In this case, isLightboxVisible is false.

App/src/components/Lightbox/index.tsx

Lines 217 to 219 in c350599

    
           {isLightboxVisible && ( 
        
               <View style={[StyleUtils.getFullscreenCenteredContentStyles(), StyleUtils.getOpacityStyle(Number(shouldShowLightbox))]}> 
        
                   <MultiGestureCanvas

It's because the page is smaller than the activePage.

App/src/components/Lightbox/index.tsx

Lines 141 to 142 in c350599

    
           const indexOutOfRange = page > activePage + indexCanvasOffset || page < activePage - indexCanvasOffset; 
        
           return !indexOutOfRange;

Let's say we have 2 images only, and we open the 2nd image. The activePage will be 1, but the page is 0. The page is found by finding the first attachment with the same source. But since the 1st broken image has the same source, 0 (index) is returned.

App/src/components/Lightbox/index.tsx

Lines 88 to 93 in c350599

    
           const foundPage = attachmentCarouselPagerContext.pagerItems.findIndex((item) => item.source === uri || item.previewSource === uri); 
        
           return { 
        
               ...attachmentCarouselPagerContext, 
        
               isUsedInCarousel: !!attachmentCarouselPagerContext.pagerRef, 
        
               isSingleCarouselItem: attachmentCarouselPagerContext.pagerItems.length === 1, 
        
               page: foundPage,

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

We should compare the attachment with its attachmentID instead. The attachmentID is attached from here.

App/src/libs/ReportActionsUtils.ts

Lines 178 to 184 in c350599

    
           function getHtmlWithAttachmentID(html: string, reportActionID: string | undefined) { 
        
               if (!reportActionID) { 
        
                   return html; 
        
               } 
        
               let attachmentID = 0; 
        
               return html.replace(/<img |<video /g, (m) => m.concat(`${CONST.ATTACHMENT_ID_ATTRIBUTE}="${reportActionID}_${++attachmentID}" `));

const foundPage = attachmentCarouselPagerContext.pagerItems.findIndex((item) => item.attachmentID === attachmentID);

First, we need to include the attachmentID when mapping the pager items here.

App/src/components/Attachments/AttachmentCarousel/Pager/index.tsx

Lines 78 to 82 in c350599

    
           /** The `pagerItems` object that passed down to the context. Later used to detect current page, whether it's a single image gallery etc. */ 
        
           const pagerItems = useMemo( 
        
               () => items.map((item, index) => ({source: item.source, previewSource: item.previewSource, index, isActive: index === activePageIndex})), 
        
               [activePageIndex, items], 
        
           );

Then, pass down the attachmentID props from CarouselItem > AttachmentView > AttachmentViewImage > ImageView (native) > Lightbox

Yeah ok, I think we should fix this. But I don't think this is a very high priority because it doesn't really impact the customers overall experience. I also think it's a somewhat easy fix (although please correct me if I'm wrong about that) so I'm going to reduce the bounty.

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

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

@Pujan92

Hey @Pujan92 did something change with the scope of it, or did it end up being more complex than first anticipated?

@neil-marcellini - what are your thoughts?

@VictoriaExpensify

@VictoriaExpensify according to me, we usually reduce the bounty for very straightforward and minimalistic change. But I think that is not the case here and I believe the default price looks fair here. Still looking forward to knowing @neil-marcellini's thoughts.

@Pujan92

Hey @Pujan92 - typically, that would be brought up when the bounty is adjusted, which was back on 14 October #71971 (comment) - it was reduced before the issue was assigned and before we started accepting proposals.

At the time of adjusting the bounty, I stated:

Yeah ok, I think we should fix this. But I don't think this is a very high priority because it doesn't really impact the customer's overall experience. I also think it's a somewhat easy fix (although please correct me if I'm wrong about that) so I'm going to reduce the bounty.

Oh, ok. No issues then. It might be my side fault. 👍

All good! I'm not an engineer and I might not always fully understand the effort required, so do feel free to speak up if you ever think me (or anyone else) has this wrong.

In this instance, let's meet in the middle and I'll bump up to $175.

Upwork job price has been updated to $175

Created GH to add reg. test to browserstack - https://github.com/Expensify/Expensify/issues/572371

@bernhardoj

Payment summary:
C: @bernhardoj owed $175 via ND
C+: @Pujan92 owed $175 via ND

Requested in ND.

@Pujan92

approved $175 for @Pujan92.

@bernhardoj

$175 approved for @bernhardoj

Navigation Menu

Repository navigation

[Due for payment 2025-11-19] [$175] - Android - Second broken image preview is blank #71971

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

40 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const isLightboxVisible = useMemo(() => {
	if (!hasSiblingCarouselItems \|\| NUMBER_OF_CONCURRENT_LIGHTBOXES === 'UNLIMITED') {
	return true;
	}

	const indexCanvasOffset = Math.floor((NUMBER_OF_CONCURRENT_LIGHTBOXES - 1) / 2) \|\| 0;
	const indexOutOfRange = page > activePage + indexCanvasOffset \|\| page < activePage - indexCanvasOffset;
	return !indexOutOfRange;
	}, [activePage, hasSiblingCarouselItems, page]);

	{isLightboxVisible && (
	<View style={[StyleUtils.getFullscreenCenteredContentStyles(), StyleUtils.getOpacityStyle(Number(shouldShowLightbox))]}>
	<MultiGestureCanvas

	const foundPage = attachmentCarouselPagerContext.pagerItems.findIndex((item) => item.source === uri \|\| item.previewSource === uri);
	return {
	...attachmentCarouselPagerContext,
	isUsedInCarousel: !!attachmentCarouselPagerContext.pagerRef,
	isSingleCarouselItem: attachmentCarouselPagerContext.pagerItems.length === 1,
	page: foundPage,

	function getHtmlWithAttachmentID(html: string, reportActionID: string \| undefined) {
	if (!reportActionID) {
	return html;
	}

	let attachmentID = 0;
	return html.replace(/<img \|<video /g, (m) => m.concat(`${CONST.ATTACHMENT_ID_ATTRIBUTE}="${reportActionID}_${++attachmentID}" `));

	/** The `pagerItems` object that passed down to the context. Later used to detect current page, whether it's a single image gallery etc. */
	const pagerItems = useMemo(
	() => items.map((item, index) => ({source: item.source, previewSource: item.previewSource, index, isActive: index === activePageIndex})),
	[activePageIndex, items],
	);

[Due for payment 2025-11-19] [$175] - Android - Second broken image preview is blank #71971

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Oct 7, 2025

andriivitiv commented on Oct 7, 2025

Proposal

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

What is the root cause of that problem?

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

bernhardoj commented on Oct 10, 2025

Proposal

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

What is the root cause of that problem?

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

VictoriaExpensify commented on Oct 14, 2025

melvin-bot commented on Oct 14, 2025

melvin-bot commented on Oct 14, 2025

40 remaining items

VictoriaExpensify commented on Nov 23, 2025

Pujan92 commented on Nov 25, 2025

VictoriaExpensify commented on Nov 26, 2025

Pujan92 commented on Nov 26, 2025

VictoriaExpensify commented on Nov 26, 2025

melvin-bot commented on Nov 26, 2025

VictoriaExpensify commented on Nov 26, 2025

VictoriaExpensify commented on Nov 26, 2025

bernhardoj commented on Nov 27, 2025

trjExpensify commented on Nov 27, 2025

garrettmknight commented on Dec 1, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions