From 1b027c5fa0334c92711a6dd829570480eb980b57 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 13 Jul 2026 15:20:00 +0100
Subject: [PATCH 1/3] hide behind beta

---
 src/CONST/index.ts                |  1 +
 src/components/AvatarSelector.tsx | 47 ++++++++++++++++---------------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 2014a105b4d1..2e240e9bbb26 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -986,6 +986,7 @@ const CONST = {
         RILLET: 'rillet',
         RULES_REVAMP: 'rulesRevamp',
         COMMUTER_EXCLUSIONS: 'commuterExclusions',
+        DEFAULT_LETTER_AVATARS: 'defaultLetterAvatars',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',
diff --git a/src/components/AvatarSelector.tsx b/src/components/AvatarSelector.tsx
index 58b47ea2c330..4489718037e0 100644
--- a/src/components/AvatarSelector.tsx
+++ b/src/components/AvatarSelector.tsx
@@ -1,5 +1,6 @@
 import useLetterAvatars from '@hooks/useLetterAvatars';
 import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 
@@ -43,6 +44,7 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {avatarList} = useLetterAvatars(name, size);
+    const {isBetaEnabled} = usePermissions();
 
     const iconSize = StyleUtils.getAvatarSize(size);
 
@@ -74,28 +76,29 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
                         </PressableWithFeedback>
                     );
                 })}
-                {avatarList.map(({id, StyledLetterAvatar}) => {
-                    const isSelected = selectedID === id;
-
-                    return (
-                        <PressableWithFeedback
-                            key={id}
-                            accessible
-                            accessibilityRole="button"
-                            accessibilityLabel={translate('avatarPage.selectAvatar')}
-                            onPress={() => onSelect(id)}
-                            style={[styles.avatarSelectorWrapper, isSelected && styles.avatarSelected]}
-                        >
-                            <Avatar
-                                type={CONST.ICON_TYPE_AVATAR}
-                                source={StyledLetterAvatar}
-                                size={size}
-                                containerStyles={styles.avatarSelectorContainer}
-                                testID={`AvatarSelector_${id}`}
-                            />
-                        </PressableWithFeedback>
-                    );
-                })}
+                {isBetaEnabled(CONST.BETAS.DEFAULT_LETTER_AVATARS) &&
+                    avatarList.map(({id, StyledLetterAvatar}) => {
+                        const isSelected = selectedID === id;
+
+                        return (
+                            <PressableWithFeedback
+                                key={id}
+                                accessible
+                                accessibilityRole="button"
+                                accessibilityLabel={translate('avatarPage.selectAvatar')}
+                                onPress={() => onSelect(id)}
+                                style={[styles.avatarSelectorWrapper, isSelected && styles.avatarSelected]}
+                            >
+                                <Avatar
+                                    type={CONST.ICON_TYPE_AVATAR}
+                                    source={StyledLetterAvatar}
+                                    size={size}
+                                    containerStyles={styles.avatarSelectorContainer}
+                                    testID={`AvatarSelector_${id}`}
+                                />
+                            </PressableWithFeedback>
+                        );
+                    })}
                 {/* We need to add several invisible items at the end of the avatar list to guarantee that the last row avatars are aligned properly */}
                 {[...Array(SPACER_SIZE).keys()].map((i) => (
                     <View

From a4e0428fbdc5ab904c6e6ab078e1b448a78e17b2 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 13 Jul 2026 15:21:27 +0100
Subject: [PATCH 2/3] fix spacing


From caa0d3e43f71b5c853119e0dde538a4d8498ca82 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Mon, 13 Jul 2026 15:43:09 +0100
Subject: [PATCH 3/3] disable test for now

---
 tests/ui/AvatarSelector.test.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/tests/ui/AvatarSelector.test.tsx b/tests/ui/AvatarSelector.test.tsx
index 88cfe293cbc2..5a8f2d03da54 100644
--- a/tests/ui/AvatarSelector.test.tsx
+++ b/tests/ui/AvatarSelector.test.tsx
@@ -39,6 +39,13 @@ jest.mock('@hooks/useLetterAvatars', () => ({
         return {avatarList, avatarMap: {}};
     },
 }));
+
+const mockIsBetaEnabled = jest.fn<boolean, [string]>();
+jest.mock('@hooks/usePermissions', () => ({
+    __esModule: true,
+    default: () => ({isBetaEnabled: mockIsBetaEnabled}),
+}));
+
 const mockName = 'Alice';
 
 describe('AvatarSelector', () => {
@@ -50,6 +57,7 @@ describe('AvatarSelector', () => {
 
     beforeEach(() => {
         jest.clearAllMocks();
+        mockIsBetaEnabled.mockReturnValue(false);
     });
 
     const renderAvatarSelector = (props = {}) => {
@@ -130,6 +138,10 @@ describe('AvatarSelector', () => {
     describe('avatarList (letter avatars)', () => {
         const firstChar = getFirstAlphaNumericCharacter(mockName).toLowerCase();
 
+        beforeEach(() => {
+            mockIsBetaEnabled.mockReturnValue(true);
+        });
+
         it('letter avatars have correct ID format when they are rendered', async () => {
             renderAvatarSelector({name: mockName});
             await waitForBatchedUpdates();
@@ -207,4 +219,15 @@ describe('AvatarSelector', () => {
             expect(letterAvatars.at(0)?.props.testID).toMatch(/^AvatarSelector_letter-avatar-/);
         });
     });
+
+    describe('when LETTER_AVATARS beta is disabled', () => {
+        it('does not render any letter avatars even with a name', async () => {
+            renderAvatarSelector({name: mockName});
+            await waitForBatchedUpdates();
+
+            const letterAvatars = screen.queryAllByTestId(/^AvatarSelector_letter-avatar/);
+
+            expect(letterAvatars).toHaveLength(0);
+        });
+    });
 });