[Due for payment 2026-01-21] Android - Xero - Connect to Xero overlaps with device navigation bar

[nlemma]

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: 9.3.0-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #78586
Email or phone of affected tester (no customers): jsoidnjsoijosjnoisj2d@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Workspace Settings

Action Performed:

Precondition:

• Device navigation style is navigation bar.

1. Launch Expensify app.
2. Go to workspace settings > Accounting (enable in More features).
3. Tap Offer available! on Xero row.

Expected Result:

Connect to Xero will not overlap with device navigation bar

Actual Result:

Connect to Xero overlaps with device navigation bar.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7047647_1768287910674.Screen_Recording_20260113_150222_Expensify.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #78586

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #78586 - "feat: Add promo offer to Xero on Accounting page" by @nkdengineer (High confidence)
Related Issues: Original feature request #77750

Recommendation: REVERT

The PR introduced a new ClaimOfferPage component with incorrect safe area padding configuration, causing the footer buttons to overlap with the Android navigation bar. The fix is straightforward but requires code changes, making revert the safest option to unblock the deploy.

📋 Detailed Analysis

Evidence

• The issue describes overlapping with the device navigation bar on Android, which is a classic safe area padding issue
• The PR feat: Add promo offer to Xero on Accounting page #78586 added a new ClaimOfferPage.tsx component for the Xero promo offer feature
• This is a new feature that does not exist in production (confirmed in issue description: "N/A - new feature, doesn't exist in prod")
• The bug is reproducible on staging where this PR was deployed
• Melvin-bot automatically identified this PR as the likely cause

Root Cause

The ClaimOfferPage component has a configuration mismatch between ScreenWrapper and FixedFooter:

Current (buggy) code:

<ScreenWrapper
    enableEdgeToEdgeBottomSafeAreaPadding
    includeSafeAreaPaddingBottom
    shouldEnableMaxHeight
    testID={ClaimOfferPage.displayName}
>
    {/* content */}
    <FixedFooter style={[styles.mtAuto, styles.gap3]}>
        {/* buttons */}
    </FixedFooter>
</ScreenWrapper>

The problem: When enableEdgeToEdgeBottomSafeAreaPadding is set on ScreenWrapper, it enables edge-to-edge mode which disables the legacy bottom safe area padding. The FixedFooter then needs addBottomSafeAreaPadding={true} to add the proper padding for the navigation bar.

Comparison with working code: Other pages like RequireQuickBooksDesktopPage.tsx that use the same enableEdgeToEdgeBottomSafeAreaPadding pattern correctly include addBottomSafeAreaPadding on their FixedFooter:

<FixedFooter addBottomSafeAreaPadding>

This missing prop causes the footer buttons ("Claim offer" and "Connect to Xero") to overlap with the Android navigation bar instead of respecting the safe area insets.