[C+ Checklist Needs Completion] [$500] Android - Task - Background image in task report appears cropped after cancelling the task

[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: 1.4.21-2
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to 1:1 DM > + > Assign task
2. Create a task
3. Open the task report
4. Tap 3-dot menu > Cancel
5. Cancel the task

Expected Result:

The background image in task report will not appear cropped after cancelling the task

Actual Result:

The background image in task report appears cropped after cancelling the task

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

Add any screenshot/video evidence

Bug6331783_1704328677391.Screen_Recording_20240103_170106_New_Expensify__1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f32de82628d0256b
• Upwork Job ID: 1742715497820069888
• Last Price Increase: 2024-01-25
• Automatic offers:
• aimane-chnaif | Contributor | 28124230
• aswin-s | Contributor | 28143615

[melvin-bot]

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

[melvin-bot]

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

[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 - @alitoshmatov (External)

[aswin-s]

Withdrawing my first proposal as it seems to break on web.

[aswin-s]

Proposal

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

The EmptyStateBackground image on deleted task page looks clipped

What is the root cause of that problem?

Animated background image used to be an SVG image. Recently that was replaced with a PNG. Earlier we used to set the container width to 200% to make the SVG image appear covering the screen on small screens.

App/src/styles/utils/index.ts

Line 704 in d4c3e63

width: '200%',

Now this is not required as PNG images properly apply the resizeMode within the container.

The PNG image height is set to 300px for small screen devices and it is positioned 'absolutely' with in it's parent container. Parent container of the AnimatedBackground image has a much smaller height. Being the first item in the inverted Flatlist the absolutely positioned image goes out of the contentContainer bounds. On Android anything outside the content container of Flatlist gets clipped even if we provide overflow:'visible'. That's why the image gets clipped only on Android.

Below image shows contentContainer with red border applied around it on iOS and Android.

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

Set BackgroundImage container width to 100%

if (isSmallScreenWidth) {
        return {
            height: emptyStateBackground.SMALL_SCREEN.IMAGE_HEIGHT,
            width: '100%',
            position: 'absolute',
        };
}

Now the image translation logic needs to be adjusted as width is now set to 100%

App/src/pages/home/report/AnimatedEmptyStateBackground.tsx

Line 16 in d4c3e63

const IMAGE_OFFSET_X = windowWidth / 2;

to

const IMAGE_OFFSET_X = 0;

Also replace the fragment wrapper here with a View

App/src/pages/home/report/ReportActionItem.js

Lines 586 to 598 in d4c3e63

	<>
	<AnimatedEmptyStateBackground />
	<View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
	<ReportActionItemSingle
	action={parentReportAction}
	showHeader={_.isUndefined(props.draftMessage)}
	report={props.report}
	>
	<RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
	</ReportActionItemSingle>
	<View style={styles.reportHorizontalRule} />
	</View>
	</>

<View >
  <AnimatedEmptyStateBackground />
  <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
    <ReportActionItemSingle
      action={parentReportAction}
      showHeader={_.isUndefined(props.draftMessage)}
      report={props.report}
    >
        <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
    </ReportActionItemSingle>
    <View style={styles.reportHorizontalRule} />
  </View>
</View

Result

Before	After

What alternative solutions did you explore? (Optional)

None (edited)

[bernhardoj]

Proposal

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

The report background image is cut off on a canceled task report.

What is the root cause of that problem?

In short, the view container height is smaller than the background height.

The image height is defined by IMAGE_HEIGHT.

App/src/CONST.ts

Lines 134 to 143 in d800d60

	SMALL_SCREEN: {
	IMAGE_HEIGHT: 300,
	CONTAINER_MINHEIGHT: 200,
	VIEW_HEIGHT: 185,
	},
	WIDE_SCREEN: {
	IMAGE_HEIGHT: 450,
	CONTAINER_MINHEIGHT: 500,
	VIEW_HEIGHT: 275,
	},

On a small screen, the height is 300. When the task is canceled, we render a simple [Deleted task] message.

App/src/pages/home/report/ReportActionItem.js

Lines 584 to 599 in d800d60

	if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
	return (
	<>
	<AnimatedEmptyStateBackground />
	<View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
	<ReportActionItemSingle
	action={parentReportAction}
	showHeader={_.isUndefined(props.draftMessage)}
	report={props.report}
	>
	<RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
	</ReportActionItemSingle>
	<View style={styles.reportHorizontalRule} />
	</View>
	</>
	);

The height is around 70 and we have a margin-top style from getReportWelcomeTopMarginStyle. It's defined by VIEW_HEIGHT above and the value is 185. So, the total height is around 255 and it's smaller than 300.

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

1. Update the min-height (defined by CONTAINER_MINHEIGHT) at least to 300.
2. Then, we will update the task view in ReportActionItem by wrapping it with a View following the same pattern in ReportActionItemParentAction
   

   App/src/pages/home/report/ReportActionItemParentAction.js

   Lines 65 to 69 in 6e5a5a2

   	<View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
   	<AnimatedEmptyStateBackground />
   	<View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]} />
   	{parentReportAction && (
   	<ReportActionItem

<View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
    <AnimatedEmptyStateBackground />
    <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}/>
    <View>
        <ReportActionItemSingle
            action={parentReportAction}
            showHeader={_.isUndefined(props.draftMessage)}
            report={props.report}
        >
            <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
        </ReportActionItemSingle>
        <View style={styles.reportHorizontalRule} />
    </View>
</View>

(do the same for non-canceled task)

[Pujan92]

Proposal

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

For android, an empty state image in the task report clipped and doesn't looks correct

What is the root cause of that problem?

Currently, Parent of the absolute image have flex-direction: column-reverse; and due to that absolute position starting points will be incorrect. Due to that it overflows in the empty area which will be the unalloted area and in android it clipped to the boundary which creates this issue.

Problem arises after this PR where the parent View gets removed which we had earlier here.
https://github.com/Expensify/App/pull/30815/files#diff-e6bee90bf18ae0cad1bb445ed9a9c0d989476874f1005810c0f8e93f1f39b99cL635

Issue

Screen.Recording.2024-01-04.at.23.51.59.mp4

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

We should re-add parent by replacing fragment with View below places which corrects the starting position of an absolute image.

App/src/pages/home/report/ReportActionItem.js

Lines 586 to 587 in 1752bc5

	<>
	<AnimatedEmptyStateBackground />

App/src/pages/home/report/ReportActionItem.js

Lines 602 to 603 in 1752bc5

	<>
	<AnimatedEmptyStateBackground />