Merge pull request Expensify#61111 from ChavdaSachin/fix-61030/AccountSwitcher-emojis-cut-off

Account Switcher fix emojis cut-off

Author: MariaHCD

src/components/AccountSwitcher.tsx

@@ -13,6 +13,7 @@ import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate'
 import {close} from '@libs/actions/Modal';
 import {getLatestError} from '@libs/ErrorUtils';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
+import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragment';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -53,6 +54,8 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
 
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate;
     const canSwitchAccounts = delegators.length > 0 || isActingAsDelegate;
+    const displayName = currentUserPersonalDetails?.displayName ?? '';
+    const doesDisplayNameContainEmojis = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g')).test(displayName);
 
     const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.ACCOUNT_SWITCHER,
@@ -189,12 +192,21 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
                         />
                         <View style={[styles.flex1, styles.flexShrink1, styles.flexBasis0, styles.justifyContentCenter, styles.gap1]}>
                             <View style={[styles.flexRow, styles.gap1]}>
-                                <Text
-                                    numberOfLines={1}
-                                    style={[styles.textBold, styles.textLarge, styles.flexShrink1, styles.lineHeightXLarge]}
-                                >
-                                    {currentUserPersonalDetails?.displayName}
-                                </Text>
+                                {doesDisplayNameContainEmojis ? (
+                                    <Text numberOfLines={1}>
+                                        <TextWithEmojiFragment
+                                            message={displayName}
+                                            style={[styles.textBold, styles.textLarge, styles.flexShrink1, styles.lineHeightXLarge]}
+                                        />
+                                    </Text>
+                                ) : (
+                                    <Text
+                                        numberOfLines={1}
+                                        style={[styles.textBold, styles.textLarge, styles.flexShrink1, styles.lineHeightXLarge]}
+                                    >
+                                        {displayName}
+                                    </Text>
+                                )}
                                 {!!canSwitchAccounts && (
                                     <View style={styles.justifyContentCenter}>
                                         <Icon