Onboarding - Onboarding background is showing solid

[jponikarchuk]

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.3.60-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #87176
Email or phone of affected tester (no customers): Any new email account
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Macbook Pro 2023 / Tahoe 26.4.1
App Component: Chat Report View

Action Performed:

1. Access staging.new.expensify.com on a normal browser (NOT incognito)
2. Enter an email that has never had an account before and start the onboarding flow
3. Observe the background

Expected Result:

The background behind the onboarding module should show the homepage

Actual Result:

The background is a solid color

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

[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: #87176 - "fix: checkbox alignment and the padding of last item in onboarding interested features page" by @samranahm (Medium confidence)
Related Issues: #82910 (original issue that #87176 fixed)

Recommendation: REVERT

PR #87176 is the most recent App PR touching the onboarding flow and was auto-assigned by melvin-bot to this issue. The bug is staging-only and not reproducible in production, which is consistent with a newly merged staging PR being the cause.

Assigned: @samranahm (PR author), @abzokhattab (approving reviewer), @Julesssss (approving reviewer)
Labels: No label changes made. DeployBlockerCash is kept since this is a frontend (web) bug affecting the App deploy.

Detailed Analysis

Evidence

• The bug was reported at version v9.3.60-0 and is reproducible on staging only, not production.
• Melvin-bot auto-assigned PR fix: checkbox alignment and the padding of last item in onboarding interested features page  #87176 to this issue as the most recent onboarding-related PR.
• PR fix: checkbox alignment and the padding of last item in onboarding interested features page  #87176 was merged on 2026-04-15 and appears in the StagingDeployCash checklist.
• The affected area is the onboarding flow on web (macOS Chrome/Safari).

Verification

• PR fix: checkbox alignment and the padding of last item in onboarding interested features page  #87176 modifies two files: src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx and src/styles/index.ts.
• The PR touches the onboarding code path that runs when a new user goes through the onboarding flow.

Root Cause

PR #87176 made layout changes to BaseOnboardingInterestedFeatures: it removed the onLayout callback from the ScrollView (which was used to measure container width), removed flexBasis: '35%' from the onboardingInterestedFeaturesItem style, and switched from a calculated maxWidth to a percentage-based flexBasis: '48.5%' for each item.

The connection between these layout changes and the "solid color background behind the onboarding module" symptom is not immediately obvious from the diff alone. The background rendering is controlled by the Overlay component, navigation card styles (basicModalNavigator uses backgroundColor: transparent and position: fixed), and the OnboardingNavigatorInnerView style. None of these were directly modified by the PR.

However, it is possible that a side effect of the ScrollView layout changes or the style modification causes an unexpected rendering behavior on web that affects how the background content is displayed. Given the staging-only reproduction and the timing of the merge, this PR is the most likely candidate.

If reverting #87176 does not resolve the issue, further investigation into other recently merged PRs affecting the navigation or modal rendering would be warranted.

[MelvinBot]

Proposal

What is the root cause of that problem?

PR #87176 is not the root cause. Its changes (removing flexBasis: '35%' from onboardingInterestedFeaturesItem and adjusting list item layout) only affect items inside the onboarding modal — the inline styles at BaseOnboardingInterestedFeatures.tsx:339-341 already override flexBasis with 48.5% or 100%, making the removal a no-op for the background.

The real issue is that the HOME screen renders behind the onboarding modal (via getAdaptedStateFromPath.ts:316), but for a brand-new user during onboarding, the HOME screen has virtually no visible content:

1. ForYouSection shows a skeleton loader or empty state (ForYouSection/index.tsx:127-134) because isLoadingApp defaults to true and the user has no todos
2. Most other sections (GettingStartedSection, AssignedCardsSection, SpendOverTimeSection, UpcomingTravelSection, FreeTrialSection, TimeSensitiveSection) return null for new users with no policies, cards, or data
3. DiscoverSection returns null when onboarding data is still undefined

This mostly-empty HOME screen (just appBG = dark green #061B09) is then covered by the Overlay component (BaseOverlay.tsx:36) at 72% opacity with theme.overlay color. Dark green background + dark overlay = appears as a solid color.

This is the same code in both production (9.3.59-4) and staging — the getAdaptedStateFromPath, OnboardingModalNavigator, Overlay, and HomePage are identical. The "solid background" is likely a pre-existing behavior for new accounts that became more noticeable during regression testing, or there may be a subtle rendering timing difference from one of the other PRs in this release (e.g., PR #83899 TransitionTracker V2 or PR #88014 onboarding navigation guard).

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

Add a visually meaningful background state to the HOME screen when viewed behind the onboarding modal, so new users see homepage chrome instead of a solid color. Two options:

1. Quick fix: In OnboardingNavigatorInnerView style (styles/index.ts:6044), set backgroundColor: theme.appBG on the inner view and reduce the overlay opacity slightly, so the distinction between the modal and the background is clearer even when the homepage has minimal content.

2. Better fix: Ensure the HOME screen renders its structural chrome (TopBar, NavigationTabBar, section headers/skeletons) even during the initial loading state for new users. The TopBar already renders, but the ForYouSkeleton is subtle. Making the skeleton more visually prominent or ensuring at least the section containers render with card backgrounds would make the homepage content visible through the overlay.

What alternative solutions did you explore? (Optional)

• Replacing SCREENS.HOME with NAVIGATORS.REPORTS_SPLIT_NAVIGATOR in getAdaptedStateFromPath.ts:316 to show the inbox behind onboarding instead — but this would be inconsistent with the app's current HOME-first navigation model.
• Making the overlay fully opaque — but this defeats the purpose of the transparent modal design.

Investigation details

Evidence chain:

• getAdaptedStateFromPath.ts:316: Navigation state during onboarding is [{name: SCREENS.HOME}, adaptedOnboardingNavigator]
• useRootNavigatorScreenOptions.ts:87-101: Onboarding modal uses TRANSPARENT_MODAL presentation with backgroundColor: 'transparent' and position: 'fixed'
• AuthScreens.tsx:190-196: HOME is in persistentScreens, preventing detachment — confirmed to render via display: flex
• BaseOverlay.tsx:36: Overlay uses overlayBackground style (theme.overlay) with animated opacity 0→0.72
• variables.ts:130: overlayOpacity: 0.72
• HomePage.tsx:35: isLoadingApp defaults to true, keeping ForYouSection in skeleton state
• Production tag 9.3.59-4 has identical code for all these files — confirmed via GitHub API content comparison

PRs investigated and ruled out as root cause:

• PR fix: checkbox alignment and the padding of last item in onboarding interested features page  #87176: Only changes list item flexBasis inside the modal, inline styles override it
• PR Migration navigation from InteractionManager to TransitionTracker V2 #83899 (TransitionTracker V2): Only adds transition event listeners, no rendering changes
• PR Fix infinite onboarding navigation loop crash on iOS #88014: Adds idempotency guard to prevent double-redirect, doesn't affect background rendering
• PR Add trackExpensesWithConcierge onboarding RHP variant #85762: Modifies post-onboarding navigation, not the modal background
• PR Migrate main chat to FlashList with inverted flag #85114 (FlashList): Migrates chat list, doesn't affect HomePage sections

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.