Fix area around bottom tab avatar isn't clickable

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

@@ -86,9 +86,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
             </PressableWithFeedback>
 
             <BottomTabBarFloatingActionButton />
-            <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
-                <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
-            </View>
+            <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
         </View>
     );
 }

src/pages/home/sidebar/AvatarWithOptionalStatus.tsx

@@ -1,46 +1,31 @@
 import React from 'react';
 import {View} from 'react-native';
-import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
-import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import CONST from '@src/CONST';
-import PressableAvatarWithIndicator from './PressableAvatarWithIndicator';
+import ProfileAvatarWithIndicator from './ProfileAvatarWithIndicator';
 
 type AvatarWithOptionalStatusProps = {
     /** Emoji status */
     emojiStatus?: string;
 
     /** Whether the avatar is selected */
     isSelected?: boolean;
-
-    /** Callback called when the avatar or status icon is pressed */
-    onPress?: () => void;
 };
 
-function AvatarWithOptionalStatus({emojiStatus = '', isSelected = false, onPress}: AvatarWithOptionalStatusProps) {
+function AvatarWithOptionalStatus({emojiStatus = '', isSelected = false}: AvatarWithOptionalStatusProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
 
     return (
         <View style={styles.sidebarStatusAvatarContainer}>
-            <PressableAvatarWithIndicator
-                isSelected={isSelected}
-                onPress={onPress}
-            />
-            <PressableWithoutFeedback
-                accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
-                role={CONST.ROLE.BUTTON}
-                onPress={onPress}
-                style={[styles.sidebarStatusAvatar]}
-            >
+            <ProfileAvatarWithIndicator isSelected={isSelected} />
+            <View style={[styles.sidebarStatusAvatar]}>
                 <Text
                     style={styles.emojiStatusLHN}
                     numberOfLines={1}
                 >
                     {emojiStatus}
                 </Text>
-            </PressableWithoutFeedback>
+            </View>
         </View>
     );
 }

src/pages/home/sidebar/BottomTabAvatar.tsx

@@ -1,11 +1,15 @@
 /* eslint-disable rulesdir/onyx-props-must-have-default */
 import React, {useCallback} from 'react';
+import {PressableWithFeedback} from '@components/Pressable';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
 import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import AvatarWithOptionalStatus from './AvatarWithOptionalStatus';
-import PressableAvatarWithIndicator from './PressableAvatarWithIndicator';
+import ProfileAvatarWithIndicator from './ProfileAvatarWithIndicator';
 
 type BottomTabAvatarProps = {
     /** Whether the create menu is open or not */
@@ -16,6 +20,8 @@ type BottomTabAvatarProps = {
 };
 
 function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomTabAvatarProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const emojiStatus = currentUserPersonalDetails?.status?.emojiCode ?? '';
 
@@ -28,20 +34,29 @@ function BottomTabAvatar({isCreateMenuOpen = false, isSelected = false}: BottomT
         interceptAnonymousUser(() => Navigation.navigate(ROUTES.SETTINGS));
     }, [isCreateMenuOpen]);
 
+    let children;
+
     if (emojiStatus) {
-        return (
+        children = (
             <AvatarWithOptionalStatus
                 emojiStatus={emojiStatus}
                 isSelected={isSelected}
-                onPress={showSettingsPage}
             />
         );
+    } else {
+        children = <ProfileAvatarWithIndicator isSelected={isSelected} />;
     }
+
     return (
-        <PressableAvatarWithIndicator
-            isSelected={isSelected}
+        <PressableWithFeedback
             onPress={showSettingsPage}
-        />
+            role={CONST.ROLE.BUTTON}
+            accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
+            wrapperStyle={styles.flex1}
+            style={styles.bottomTabBarItem}
+        >
+            {children}
+        </PressableWithFeedback>
     );
 }
 

src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import AvatarWithIndicator from '@components/AvatarWithIndicator';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as UserUtils from '@libs/UserUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type ProfileAvatarWithIndicatorOnyxProps = {
+    /** Indicates whether the app is loading initial data */
+    isLoading: OnyxEntry<boolean>;
+};
+
+type ProfileAvatarWithIndicatorProps = ProfileAvatarWithIndicatorOnyxProps & {
+    /** Whether the avatar is selected */
+    isSelected: boolean;
+};
+
+function ProfileAvatarWithIndicator({isLoading = true, isSelected = false}: ProfileAvatarWithIndicatorProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+
+    return (
+        <OfflineWithFeedback pendingAction={currentUserPersonalDetails.pendingFields?.avatar ?? null}>
+            <View style={[isSelected && styles.selectedAvatarBorder]}>
+                <AvatarWithIndicator
+                    source={UserUtils.getAvatar(currentUserPersonalDetails.avatar, currentUserPersonalDetails.accountID)}
+                    tooltipText={translate('profilePage.profile')}
+                    fallbackIcon={currentUserPersonalDetails.fallbackIcon}
+                    isLoading={!!isLoading && !currentUserPersonalDetails.avatar}
+                />
+            </View>
+        </OfflineWithFeedback>
+    );
+}
+
+ProfileAvatarWithIndicator.displayName = 'PressableAvatarWithIndicator';
+
+export default withOnyx<ProfileAvatarWithIndicatorProps, ProfileAvatarWithIndicatorOnyxProps>({
+    isLoading: {
+        key: ONYXKEYS.IS_LOADING_APP,
+    },
+})(ProfileAvatarWithIndicator);