[HOLD for payment 2024-03-26] [$500] [Wave Collect] [Ideal Nav] Area around `account avatar` icon is not actionable like `chat` icon

[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: 1.4.52-6
Reproducible in staging?: y
Reproducible in production?: new feature
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @mountiny
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1710430323502599

Action Performed:

1. Open URL and sign in
2. Hover over the area surrounding the account avatar icon
3. Repeat the same with chat icon

Expected Result:

The area around the account icon should be pressable

Actual Result:

No area around the icon is pressable unlike chat icon

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.2852.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0159d68ee4dad5dcf1
• Upwork Job ID: 1768571011952791552
• Last Price Increase: 2024-03-18
• Automatic offers:
• paultsimura | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[bernhardoj]

Proposal

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

The are around the user profile avatar isn't clickable like the chat button.

What is the root cause of that problem?

The profile avatar button is wrapped with a View that has a center styling.

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 89 to 91 in f1f22c7

	<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
	<BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
	</View>

So, the clickable area is just the centered pressable.

If we look at the chat button, we also have the center style, but we apply it to the pressable itself, so the children are centered, but the whole element is still clickable.

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 64 to 86 in f1f22c7

	<PressableWithFeedback
	onPress={() => {
	Navigation.navigate(ROUTES.HOME);
	}}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('common.chats')}
	wrapperStyle={styles.flex1}
	style={styles.bottomTabBarItem}
	>
	<Tooltip text={translate('common.chats')}>
	<View>
	<Icon
	src={Expensicons.ChatBubble}
	fill={currentTabName === SCREENS.HOME ? theme.iconMenu : theme.icon}
	width={variables.iconBottomBar}
	height={variables.iconBottomBar}
	/>
	{chatTabBrickRoad && (
	<View style={styles.bottomTabStatusIndicator(chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger)} />
	)}
	</View>
	</Tooltip>
	</PressableWithFeedback>

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

1. Remove the BottomTabAvatar View wrapper
2. In BottomTabAvatar, wrap the children with a pressable. The pressable with have the center style (the same style we have for the chat button).

let children;
if (emojiStatus) children = <AvatarWithOptionalStatus .../>
else children = <PressableAvatarWithIndicator .../>

return <PressableWithFeedback>{children}</PressableWithFeedback>

3. Remove the pressable from PressableAvatarWithIndicator (we will rename it to AvatarWithIndicator)
4. Replace the pressable in AvatarWithOptionalStatus with a View.

Proposal

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

Area around account avatar icon is not actionable like chat icon

What is the root cause of that problem?

The root cause of this issue is that here :

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 89 to 91 in f1f22c7

	<View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
	<BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
	</View>

The account avatar is wrapped in a view because of which the area around the account avatar is not actionable like the area around the chat icon.

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

To make the area around the account avatar actionable like the chat icon we need to wrap it with PressableWithFeedback in the same was as chat icon i.e. like this -

<PressableWithFeedback
                onPress={() => {
                    Navigation.navigate(ROUTES.HOME);
                }}
                role={CONST.ROLE.BUTTON}
                accessibilityLabel={translate('common.chats')}
                wrapperStyle={styles.flex1}
                style={styles.bottomTabBarItem}
            >
                <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
                    <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
                </View>
            </PressableWithFeedback>

What alternative solutions did you explore? (Optional)

N/A

Result :

Screen.Recording.2024-03-15.at.9.16.28.AM.mp4

Updated Proposal

[melvin-bot]

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

[melvin-bot]

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