[Due for payment 2026-05-22] Android - Device management - Missing "Manage all the devices that you have.." sentence

[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: 9.3.67-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: #87948
Email or phone of affected tester (no customers): josdjnosdjionjsdonjisod@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:

1. Launch Expensify app.
2. Go to Account > Security > Device Management

Expected Result:

"Manage all the devices that you have logged into with your Expensify Account." will be shown on Device management page.

Actual Result:

"Manage all the devices that you have logged into with your Expensify Account." is missing on Device management page.

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

Issue Owner

Current Issue Owner: @bernhardoj

[melvin-bot]

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

[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: #87948 - "Add device management feature" by @bernhardoj (High confidence)
Related Issues: #86580 (original feature issue)

Recommendation: REVERT

PR #87948 introduced the new Device Management page as a brand-new feature. The page is missing the description sentence on Android, indicating a rendering defect in the newly created DeviceManagementPage.tsx. Since this feature does not exist in production and has a clear regression on Android, reverting the PR is the safest path.

Assigned: @bernhardoj (PR author), @arosiclair (approving reviewer) from highest-confidence causing PR only
Labels: DeployBlockerCash kept (frontend/App PR caused the issue); no label changes made

Detailed Analysis

Evidence

• PR Add device management feature #87948 merged on 2026-05-05 introduced src/pages/settings/Security/DeviceManagementPage.tsx as a new file — this is the page where the bug is observed.
• The issue title and reproduction steps precisely match the new Device Management feature added by this PR.
• The melvin-bot auto-assigned this PR as the cause based on its merge timing and matching area.
• The bug is staging-only (new feature not in production), which aligns with the PR being in the current 9.3.67-0 staging deploy cycle.
• The issue is marked "Exploratory - Significant User Experience Deterioration" and the reference link in the bug report directly points to PR Add device management feature #87948.

Verification

• The affected file is src/pages/settings/Security/DeviceManagementPage.tsx, created entirely by PR Add device management feature #87948 (72 lines added, no prior version).
• PR Add device management feature #87948 also modified src/pages/settings/Security/SecuritySettingsPage.tsx (adding the Device Management menu item) and src/libs/UserUtils.ts (adding getDeviceLogins, getLastLogin, hasDeviceManagementError helpers).
• The description text is provided by translate('deviceManagementPage.description') and the key is present in src/languages/en.ts with the correct string: "Manage all the devices that you have logged into with your Expensify Account."

Root Cause

The DeviceManagementPage renders the description text using the RenderHTML component (passing plain text as HTML) inside a standalone View above a FlashList. On Android, the FlashList with maintainVisibleContentPosition={{disabled: true}} may be expanding to fill the available vertical space and overlapping or visually hiding the sibling description View, since both the View and FlashList are children of ScreenWrapper without explicit flex constraints between them. This is an Android-specific layout behavior not reproduced on iOS or web. The fix would require either adjusting the layout (e.g., wrapping in a flex container with proper flex values) or using a ListHeaderComponent in the FlashList to include the description text, but reverting the PR is the safest immediate action for unblocking the deploy.

[MelvinBot]

Proposal

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

On Android, the Device Management page is missing the description text "Manage all the devices that you have logged into with your Expensify Account." The text is visible on iOS and Web but not on Android.

What is the root cause of that problem?

In DeviceManagementPage.tsx:58-67, the description View and the FlashList are rendered as sibling elements inside ScreenWrapper. FlashList internally applies flex: 1 and uses absolute positioning for its RecyclerListView on Android. This causes the FlashList to expand and overlap the description View above it, making the text invisible. On iOS and Web, the layout engine handles this differently so the overlap doesn't occur.

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

Move the description from a sibling View into the FlashList's ListHeaderComponent prop. This way, the description renders inside the FlashList's scroll content and cannot be overlapped by its internal absolute positioning.

This is the established pattern in the codebase — for example, PaymentMethodList.tsx uses ListHeaderComponent for content above a FlashList.

Proposed code change

In src/pages/settings/Security/DeviceManagementPage.tsx, remove the standalone description View (lines 58-60) and add a ListHeaderComponent to the FlashList:

const listHeader = useMemo(() => (
    <View style={[styles.pv3]}>
        <RenderHTML html={translate('deviceManagementPage.description')} />
    </View>
), [styles.pv3, translate]);

// In return, replace the sibling View + FlashList with:
<FlashList
    data={logins}
    renderItem={renderItem}
    keyExtractor={getLoginKey}
    maintainVisibleContentPosition={{disabled: true}}
    contentContainerStyle={[styles.ph5]}
    ListHeaderComponent={listHeader}
/>

What alternative solutions did you explore?

Wrapping the description View and FlashList in a flex container with explicit flex values (e.g., flex: 0 on the description, flex: 1 on the FlashList). However, ListHeaderComponent is the cleaner, established pattern in this codebase and avoids fighting FlashList's internal layout behavior.

---

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.