[ON HOLD for #56219] [$250] android-distance-Distance receipt is overlapping with navigation bar.

[mitarachim]

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.0.96-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): N
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: Money Requests

Action Performed:

1. Launch app
2. Open workspace chat
3. Create a distance expense
4. Open the expense created
5. Open the receipt
6. Note receipt is not overlapping with navigation bar.
7. Tap distance and add a stop & save
8. Tap distance receipt

Note: if bug cannot be reproduced, please add one more stop and check.

Expected Result:

Distance receipt must not overlap with navigation bar.

Actual Result:

Distance receipt is overlapping with navigation bar.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6739324_1739265126693.Screenrecorder-2025-02-11-14-41-07-323.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021892312402645549520
• Upwork Job ID: 1892312402645549520
• Last Price Increase: 2025-05-28

Issue Owner

Current Issue Owner: @rayane-d

[melvin-bot]

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

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-11 10:22:15 UTC.

Proposal

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

android-distance-Distance receipt is overlapping with navigation bar.

What is the root cause of that problem?

The height of the Distance E-Receipt exceeds the height of the view if we have three waypoints in this OP and we don't have a safe area padding bottom as well

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

We can add safeAreaPaddingBottomStyle to the DistanceEReceipt component similar to how we handled it beforehttps://github.com//pull/54776.

App/src/components/DistanceEReceipt.tsx

Line 45 in 48520ec

<View style={[styles.flex1, styles.alignItemsCenter]}>

    const { safeAreaPaddingBottomStyle } = useStyledSafeAreaInsets();
....
        <View style={[styles.flex1, styles.alignItemsCenter, safeAreaPaddingBottomStyle]}>

Note: Updating from createModalStyleUtils will cause a regression.

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

N/A UI bug

What alternative solutions did you explore? (Optional)

N/A
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[linhvovan29546]

Note: This bug also occurs on iOS

[thelullabyy]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-24 04:48:45 UTC.

Proposal

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

• The distance receipt is overlapping with the navigation bar.

What is the root cause of that problem?

• The distance receipt is displayed in a modal with the type centered_unswipeable and the shouldUseModalPaddingStyle set to true. This modal is defined here:

  App/src/components/AttachmentModal.tsx

  Lines 495 to 496 in 5b05237

  	<Modal
  	type={modalType}

• In theory, the safe are padding should be applied because we already set shouldUseModalPaddingStyle to true, so this bug does not appear but when calculating the padding-bottom value for the modal:

  1. The shouldAddTopSafeAreaPadding value in the following line is 0 because, for the centered_unswipeable modal type, this value is false:

     App/src/components/Modal/BaseModal.tsx

     Line 163 in 5b05237

     shouldAddTopSafeAreaPadding,

     This is determined here:

     App/src/styles/utils/generators/ModalStyleUtils.ts

     Line 172 in 5b05237

     shouldAddBottomSafeAreaPadding = false;

  2. Similarly, the shouldAddBottomSafeAreaPadding value in the following line is also 0:

     App/src/components/Modal/BaseModal.tsx

     Line 197 in 5b05237

     shouldAddBottomSafeAreaPadding: (!avoidKeyboard || !keyboardStateContextValue?.isKeyboardShown) && shouldAddBottomSafeAreaPadding,

  3. As a result, the padding-bottom value applied to the modal content is 0 and if the content is too long, it will overlap the navigation bar as mentioned in the bug:

     App/src/components/Modal/BaseModal.tsx

     Line 275 in 5b05237

     style={[styles.defaultModalContainer, modalPaddingStyles, modalContainerStyle, !isVisible && styles.pointerEventsNone]}

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

• We can update the value in the following line from false to true:

  App/src/styles/utils/generators/ModalStyleUtils.ts

  Line 172 in 5b05237

  shouldAddBottomSafeAreaPadding = false;

  This will ensure that the modal receives the appropriate padding and prevents the overlap issue in all cases, not only the distance receipt.

• We need create the flag so that the above change is only applied when with the modal in:

App/src/components/AttachmentModal.tsx

Line 495 in 5b05237

<Modal

• Since the app already has already applied the safeAreaPaddingBottomStyle style to:

App/src/components/Attachments/AttachmentView/index.tsx

Line 291 in 5b05237

<View style={safeAreaPaddingBottomStyle}>{isHighResolution && <HighResolutionInfo isUploaded={isUploaded} />}</View>

we need to remove that style to prevent duplicate safe area padding bottom are applied.

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

• Since this is a UI issue, automated tests should focus on verifying that the modal content does not overlap with the navigation bar when the modal type is centered_unswipeable and shouldUseModalPaddingStyle is true.

What alternative solutions did you explore? (Optional)

• We can update this style:

App/src/components/AttachmentModal.tsx

Line 522 in 5b05237

<GestureHandlerRootView style={styles.flex1}>

                <GestureHandlerRootView style={[styles.flex1, safeAreaPaddingBottomStyle]}>

so the safe area padding bottom is applied to all types of attachments.

• Since the app already has already applied the safeAreaPaddingBottomStyle style to:

App/src/components/Attachments/AttachmentView/index.tsx

Line 291 in 5b05237

<View style={safeAreaPaddingBottomStyle}>{isHighResolution && <HighResolutionInfo isUploaded={isUploaded} />}</View>

[CortneyOfstad]

Working with an Android user to get this tested. Will update soon!

[melvin-bot]

@CortneyOfstad Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

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