[Due for payment 2026-03-30] Inconsistent hover behavior on narrow screens (Account tab shows hover, Workspace does not)

[m-natarajan]

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.22-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @linhvovan29546
Slack conversation (hyperlinked to channel name): #Expensify bugs

Action Performed:

1. Resize the browser window to a narrow width (small screen breakpoint)
2. Hover over the Account button
3. Observe background and icon color change
4. Hover over the Workspace button
5. Observe no background change and no icon color update.

Expected Result:

No hover effects should appear on small screens for any tabs.

Actual Result:

Account tab shows hover background + icon color change.
Workspace tab does not show hover styling.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Screen.Recording.2026-02-18.at.19.38.07.mov

Recording.2411.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[daledah]

Proposal

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

Account tab shows hover background + icon color change on small screens, while other tabs do not.

What is the root cause of that problem?

In NavigationTabBarAvatar.tsx, the hover effects are always applied regardless of screen size:

App/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx

Line 79 in e66823b

style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}

App/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx

Line 84 in e66823b

{renderAvatar(isSelected || hovered)}

On narrow layout, the other tabs (Home, Inbox, Reports, Workspaces) in NavigationTabBar use static styles without hover callbacks, so they correctly show no hover effects. However, NavigationTabBarAvatar doesn't check for narrow layout and always applies styles.navigationTabBarItemHovered on hover and passes hovered to renderAvatar, causing the Account tab to inconsistently show hover styling on small screens.

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

Use useResponsiveLayout inside NavigationTabBarAvatar to conditionally apply hover effects only on wide layout.

--- a/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx
+++ b/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx
@@ -7,6 +7,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -27,6 +28,7 @@ function NavigationTabBarAvatar({onPress, isSelected = false, style}: Navigation
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false});
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const delegateEmail = account?.delegatedAccess?.delegate ?? '';
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
@@ -76,12 +78,12 @@ function NavigationTabBarAvatar({onPress, isSelected = false, style}: Navigation
             wrapperStyle={styles.flex1}
             accessibilityState={accountAccessibilityState}
             aria-selected={accountAccessibilityState.selected}
-            style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}
+            style={({hovered}) => [style, !shouldUseNarrowLayout && hovered && styles.navigationTabBarItemHovered]}
             sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT}
         >
             {({hovered}) => (
                 <>
-                    {renderAvatar(isSelected || hovered)}
+                    {renderAvatar(isSelected || (!shouldUseNarrowLayout && hovered))}
                     <Text style={[styles.textSmall, styles.textAlignCenter, isSelected ? styles.textBold : styles.textSupporting, styles.mt0Half, styles.navigationTabBarLabel]}>
                         {translate('initialSettingsPage.account')}
                     </Text>

What alternative solutions did you explore? (Optional)

An alternative would be to pass a prop like shouldShowHoverEffect from the parent NavigationTabBar component, since it already knows whether it's rendering the narrow or wide layout. However, using useResponsiveLayout directly inside NavigationTabBarAvatar is simpler and keeps the component self-contained without requiring changes to its props interface.

[twilight2294]

Proposal

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

On narrow screens, the Account tab in the bottom navigation bar incorrectly shows hover effects (background highlight and avatar ring change), while all other tabs (Home, Inbox, Reports, Workspace) correctly show no hover styling. The behavior should be consistent — no hover effects on narrow layouts.

What is the root cause of that problem?

The NavigationTabBar component renders two distinct layouts depending on screen width. In the wide layout (desktop), all tabs intentionally apply hover styling via ({hovered}) => style callbacks with navigationTabBarItemHovered. In the narrow layout (mobile-like bottom bar), all tabs use a static style={styles.navigationTabBarItem} with no hover handler — which is correct since hover doesn't make sense on small screens.

The problem is that the NavigationTabBarAvatar component (which renders the Account tab) unconditionally applies hover styling internally. At line 79, it uses style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}, and at line 84, it passes the hovered state to the avatar ring via renderAvatar(isSelected || hovered).

Because NavigationTabBarAvatar encapsulates its own PressableWithFeedback with built-in hover logic, it always shows hover effects regardless of whether it's rendered in the wide or narrow layout. Every other tab in the narrow layout uses an inline PressableWithFeedback with a static style, so they correctly have no hover behavior. The Account tab is the only one that breaks this pattern.

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

Add a shouldShowHoverEffect prop to NavigationTabBarAvatar and use it to conditionally apply hover styling:

In NavigationTabBarAvatar:

type NavigationTabBarAvatarProps = {
    isSelected?: boolean;
    onPress: () => void;
    style?: StyleProp<ViewStyle>;
    shouldShowHoverEffect?: boolean;
};

function NavigationTabBarAvatar({onPress, isSelected = false, style, shouldShowHoverEffect = true}: NavigationTabBarAvatarProps) {
    // ...
    return (
        <PressableWithFeedback
            // ...existing props...
            style={({hovered}) => [style, shouldShowHoverEffect && hovered && styles.navigationTabBarItemHovered]}
        >
            {({hovered}) => (
                <>
                    {renderAvatar(isSelected || (shouldShowHoverEffect && hovered))}
                    {/* ...rest unchanged... */}
                </>
            )}
        </PressableWithFeedback>
    );
}

Then in NavigationTabBar, pass shouldShowHoverEffect={false} for the narrow layout call and shouldShowHoverEffect (or omit it, defaulting to true) for the wide layout call.

What alternative solutions did you explore? (Optional)

An alternative would be to use useResponsiveLayout directly inside NavigationTabBarAvatar to detect narrow screens and suppress hover internally. However, passing a prop from the parent is cleaner since the parent already knows which layout it's rendering, and it avoids coupling the avatar component to layout detection logic.

[MelvinBot]

Proposal

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

On narrow/small screen widths, the Account tab in the bottom navigation bar shows hover effects (background color change + avatar active state), while the other tabs (Home, Inbox, Reports, Workspaces) correctly show no hover effects. The expected behavior is that no tabs show hover effects on narrow screens.

What is the root cause of that problem?

NavigationTabBar/index.tsx has two separate render paths split at line 289 based on shouldUseNarrowLayout:

• Wide layout (lines 289-477): All four icon tabs use function-style style props with ({hovered}) => [styles.leftNavigationTabBarItem, hovered && styles.navigationTabBarItemHovered] and pass hovered to icon fill functions.
• Narrow layout (lines 480-637): All four icon tabs use static style={styles.navigationTabBarItem} with no hover callbacks — intentionally omitting hover effects.

However, the Account tab is rendered via a separate component — NavigationTabBarAvatar.tsx. This component always applies hover effects unconditionally at line 79:

style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]}

and at lines 82-84:

{({hovered}) => (
    <>
        {renderAvatar(isSelected || hovered)}

Since NavigationTabBarAvatar has no awareness of shouldUseNarrowLayout, it applies hover background and avatar ring changes on both wide and narrow layouts, while the other tabs correctly skip hover effects on narrow layouts.

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

Use useResponsiveLayout inside NavigationTabBarAvatar and conditionally apply hover effects only when NOT on narrow layout:

1. Import useResponsiveLayout and get shouldUseNarrowLayout
2. At line 79, change the style to: style={({hovered}) => [style, !shouldUseNarrowLayout && hovered && styles.navigationTabBarItemHovered]}
3. At line 84, change the render to: {renderAvatar(isSelected || (!shouldUseNarrowLayout && hovered))}

This matches the existing pattern in NavigationTabBar/index.tsx where the narrow layout branch already omits hover effects for all other tabs.

What alternative solutions did you explore? (Optional)

An alternative would be to pass a shouldShowHoverEffect prop from the parent NavigationTabBar component (which already knows the layout mode). However, using useResponsiveLayout directly inside NavigationTabBarAvatar is simpler and keeps the component self-contained.

---

Note: This analysis validates the existing proposal from @daledah — the root cause identification and proposed fix are correct.

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, or @MelvinBot <your feedback> to refine this analysis.

[melvin-bot]

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

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[lorretheboy]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @lorretheboy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.