[HOLD for payment 2023-10-27] [$500] IOS- Receipt border radius is not round

[kbecciv]

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: 1.3.80.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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696931354301509

Action Performed:

1. Go to any chat
2. Click on + icon and select request money option
3. Request money manually
4. Go to transaction thread
5. Click on three dots and add receipt
6. Go back to previous screen
7. Verify the receipt border radius

Expected Result:

receipt border radius should be round

Actual Result:

receipt border radius not round

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

RPReplay_Final1696921036.1.MP4

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c9f60635e933b6e7
• Upwork Job ID: 1711836727727636480
• Last Price Increase: 2023-10-10
• Automatic offers:
• eh2077 | Contributor | 27239377
• gadhiyamanan | Reporter | 27239379

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[vadymbokatov]

Proposal

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

Receipt border radius is not round

What is the root cause of that problem?

App/src/components/ReportActionItem/ReportActionItemImage.js

Lines 41 to 48 in b5445bd

	const receiptImageComponent = thumbnail ? (
	<ThumbnailImage
	previewSourceURL={thumbnailSource}
	style={[styles.w100, styles.h100]}
	isAuthTokenRequired
	shouldDynamicallyResize={false}
	/>
	) : (

It seems that the styles.reportContainerBorderRadius which is responsible for Border radius is not. assigned to ThumbnailImage.

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

assign styles.reportContainerBorderRadius

[Krishna2323]

Proposal

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

IOS- Receipt border radius is not round

What is the root cause of that problem?

We are not applying the border radius properties to the inner container of the images.

App/src/components/ReportActionItem/ReportActionItemImages.js

Lines 54 to 78 in 11acdc2

	<View style={[styles.reportActionItemImages, hoverStyle]}>
	{_.map(shownImages, ({thumbnail, image}, index) => {
	const isLastImage = index === numberOfShownImages - 1;
	// Show a border to separate multiple images. Shown to the right for each except the last.
	const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1;
	const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {};
	return (
	<View
	key={`${index}-${image}`}
	style={[styles.reportActionItemImage, borderStyle, hoverStyle]}
	>
	<ReportActionItemImage
	thumbnail={thumbnail}
	image={image}
	/>
	{isLastImage && remaining > 0 && (
	<View style={[styles.reportActionItemImagesMore, hoverStyle]}>
	<Text>+{remaining}</Text>
	</View>
	)}
	</View>
	);
	})}
	</View>

App/src/styles/styles.js

Lines 3600 to 3607 in b5445bd

	reportActionItemImage: {
	flex: 1,
	width: '100%',
	height: '100%',
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	},

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

Border radius and overflow style should also be added to reportActionItemImage.

Styles to be added:

App/src/styles/styles.js

Lines 3592 to 3596 in b5445bd

	borderTopLeftRadius: variables.componentBorderRadiusLarge,
	borderTopRightRadius: variables.componentBorderRadiusLarge,
	borderBottomLeftRadius: variables.componentBorderRadiusLarge,
	borderBottomRightRadius: variables.componentBorderRadiusLarge,
	overflow: 'hidden',

Optional:

We may want to subtract 4 from componentBorderRadiusLarge because the images container has borderWidth of 4 and if we don't subtract that then our images border radius will look a little more rounded.

borderRadius: variables.componentBorderRadiusLarge - 4

Result

[ikevin127]

Proposal

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

Receipt border radius should be rounded.

What is the root cause of that problem?

The problem comes from the fact that ThumbnailImage and Image rendered components from within the ReportActionItemImage.js component do not have borderRadius styles applied:

App/src/components/ReportActionItem/ReportActionItemImage.js

Lines 41 to 53 in 11acdc2

	const receiptImageComponent = thumbnail ? (
	<ThumbnailImage
	previewSourceURL={thumbnailSource}
	style={[styles.w100, styles.h100]}
	isAuthTokenRequired
	shouldDynamicallyResize={false}
	/>
	) : (
	<Image
	source={{uri: image}}
	style={[styles.w100, styles.h100]}
	/>
	);

This causes both receipt and receipt placeholder pictures to not have rounded borders since currently both only have style={[styles.w100, styles.h100]} styles applied.

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

Add styles.reportContainerBorderRadius to both rendered components which will match the same borderRadius as the card has, like so:

    const receiptImageComponent = thumbnail ? (
        <ThumbnailImage
            previewSourceURL={thumbnailSource}
-            style={[styles.w100, styles.h100]}
+            style={[styles.w100, styles.h100, styles.reportContainerBorderRadius]}
            isAuthTokenRequired
            shouldDynamicallyResize={false}
        />
    ) : (
        <Image
            source={{uri: image}}
 -         style={[styles.w100, styles.h100]}
+            style={[styles.w100, styles.h100, styles.reportContainerBorderRadius]}
        />
    );

What alternative solutions did you explore? (Optional)

N/A

Videos

iOS

ios.mov

[yh-0218]

Proposal

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

Receipt border radius should be rounded.

What is the root cause of that problem?

We don't have borderRadius to wrapper of ReportActionItemImage

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

We need to add borerRadius and overflow: hidden to wrapper.

App/src/components/ReportActionItem/ReportActionItemImages.js

Line 64 in 562f9d8

style={[styles.reportActionItemImage, borderStyle, hoverStyle]}

Need to add reportActionItemImage

        borderRadius: variables.componentBorderRadiusLarge - 4,
        overflow: 'hidden',

App/src/styles/styles.js

Line 3588 in 562f9d8

reportActionItemImages: {

What alternative solutions did you explore? (Optional)