From 990932d49607b97105ea7873674d57f5032b1e1f Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Thu, 17 Aug 2023 21:37:38 +0800
Subject: [PATCH 01/16] sort group member avatar icons correctly

---
 src/libs/ReportUtils.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 1baf6eacb9da..a2663c0cf30d 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -874,8 +874,14 @@ function getIconsForParticipants(participants, personalDetails) {
         ]);
     }
 
-    // Sort all logins by first name (which is the second element in the array)
-    const sortedParticipantDetails = participantDetails.sort((a, b) => a[2] - b[2]);
+    // Sort all logins by first name (position 2 element in array)
+    // if multiple participants have the same first name, sub-sort them by login/displayName (position 1 element in array)
+    // if that still clashes, sub-sort by accountID (position 0 element in array)
+    const sortedParticipantDetails = _.chain(participantDetails)
+        .sortBy((detail) => detail[0])
+        .sortBy((detail) => detail[1])
+        .sortBy((detail) => detail[2])
+        .value();
 
     // Now that things are sorted, gather only the avatars (third element in the array) and return those
     const avatars = [];

From fd1f6595d9032c8d506d7958195548b8472e5842 Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Wed, 23 Aug 2023 23:18:47 +0800
Subject: [PATCH 02/16] sort avatar icons by user displayName/login followed by
 accountID efficiently

add unit tests
---
 src/libs/ReportUtils.js       | 27 ++++++-------
 tests/unit/ReportUtilsTest.js | 72 +++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index f64221f74e6b..028d88d4260c 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -884,21 +884,22 @@ function getIconsForParticipants(participants, personalDetails) {
     for (let i = 0; i < participantsList.length; i++) {
         const accountID = participantsList[i];
         const avatarSource = UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar'], ''), accountID);
-        participantDetails.push([
-            accountID,
-            lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], ''),
-            lodashGet(personalDetails, [accountID, 'firstName'], ''),
-            avatarSource,
-        ]);
+        participantDetails.push([accountID, lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], ''), avatarSource]);
     }
 
-    // Sort all logins by first name (position 2 element in array)
-    // if multiple participants have the same first name, sub-sort them by login/displayName (position 1 element in array)
-    // if that still clashes, sub-sort by accountID (position 0 element in array)
     const sortedParticipantDetails = _.chain(participantDetails)
-        .sortBy((detail) => detail[0])
-        .sortBy((detail) => detail[1])
-        .sortBy((detail) => detail[2])
+        .sort((first, second) => {
+            // First sort by displayName/login
+            const displayNameLoginOrder = first[1].localeCompare(second[1]);
+            if (displayNameLoginOrder !== 0) {
+                return displayNameLoginOrder;
+            }
+
+            // Then fallback on accountID as the final sorting criteria.
+            // This will ensure that the order of avatars with same login/displayName
+            // stay consistent across all users and devices
+            return first[0] > second[0];
+        })
         .value();
 
     // Now that things are sorted, gather only the avatars (third element in the array) and return those
@@ -906,7 +907,7 @@ function getIconsForParticipants(participants, personalDetails) {
     for (let i = 0; i < sortedParticipantDetails.length; i++) {
         const userIcon = {
             id: sortedParticipantDetails[i][0],
-            source: sortedParticipantDetails[i][3],
+            source: sortedParticipantDetails[i][2],
             type: CONST.ICON_TYPE_AVATAR,
             name: sortedParticipantDetails[i][1],
         };
diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js
index e97e9147c328..015121a203a0 100644
--- a/tests/unit/ReportUtilsTest.js
+++ b/tests/unit/ReportUtilsTest.js
@@ -35,6 +35,13 @@ const participantsPersonalDetails = {
         login: '+18332403627@expensify.sms',
         displayName: '(833) 240-3627',
     },
+    5: {
+        accountID: 5,
+        displayName: 'Lagertha Lothbrok',
+        firstName: 'Lagertha',
+        login: 'lagertha2@vikings.net',
+        pronouns: 'She/her',
+    },
 };
 const policy = {
     policyID: 1,
@@ -55,6 +62,53 @@ describe('ReportUtils', () => {
     });
     beforeEach(() => Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.DEFAULT).then(waitForPromisesToResolve));
 
+    describe('getIconsForParticipants', () => {
+        it('returns sorted avatar source by name, then accountID', () => {
+            expect(ReportUtils.getIconsForParticipants([1, 2, 3, 4, 5], participantsPersonalDetails)).toEqual([
+                {
+                    id: 4,
+                    name: '(833) 240-3627',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_5.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 2,
+                    name: 'floki@vikings.net',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_3.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 3,
+                    name: 'Lagertha Lothbrok',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_4.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 5,
+                    name: 'Lagertha Lothbrok',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_6.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 1,
+                    name: 'Ragnar Lothbrok',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_2.svg',
+                    },
+                    type: 'avatar',
+                },
+            ]);
+        });
+    });
+
     describe('getDisplayNamesWithTooltips', () => {
         test('withSingleParticipantReport', () => {
             expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false)).toStrictEqual([
@@ -94,6 +148,15 @@ describe('ReportUtils', () => {
                     accountID: 4,
                     pronouns: undefined,
                 },
+                {
+                    displayName: 'Lagertha Lothbrok',
+                    avatar: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_6.svg',
+                    },
+                    login: 'lagertha2@vikings.net',
+                    accountID: 5,
+                    pronouns: 'She/her',
+                },
             ]);
         });
 
@@ -135,6 +198,15 @@ describe('ReportUtils', () => {
                     accountID: 4,
                     pronouns: undefined,
                 },
+                {
+                    displayName: 'Lagertha',
+                    avatar: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_6.svg',
+                    },
+                    login: 'lagertha2@vikings.net',
+                    accountID: 5,
+                    pronouns: 'She/her',
+                },
             ]);
         });
     });

From e70c1e9d723ec348bf86dcbd2b99dbd25bb8629b Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Wed, 23 Aug 2023 23:29:10 +0800
Subject: [PATCH 03/16] update comment

---
 src/libs/ReportUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 028d88d4260c..53a0b69b54f2 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -902,7 +902,7 @@ function getIconsForParticipants(participants, personalDetails) {
         })
         .value();
 
-    // Now that things are sorted, gather only the avatars (third element in the array) and return those
+    // Now that things are sorted, gather only the avatars (second element in the array) and return those
     const avatars = [];
     for (let i = 0; i < sortedParticipantDetails.length; i++) {
         const userIcon = {

From da5635cb42d6982ad82a5fb6b12fb9213b4829d3 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 19 Sep 2023 07:49:15 +0100
Subject: [PATCH 04/16] consolidate 'I am a Teacher' and 'Intro to School
 Principal' pages

---
 src/ROUTES.ts                                 |  2 +-
 .../AppNavigator/ModalStackNavigators.js      |  2 +-
 src/pages/TeachersUnite/ImTeacherPage.js      | 70 +++++++------------
 .../TeachersUnite/ImTeacherUpdateEmailPage.js | 54 ++++++++++++++
 .../TeachersUnite/IntroSchoolPrincipalPage.js |  1 +
 src/pages/TeachersUnite/SaveTheWorldPage.js   | 23 +-----
 6 files changed, 84 insertions(+), 68 deletions(-)
 create mode 100644 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 2c37116db395..feead4890114 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -139,8 +139,8 @@ export default {
     SEARCH: 'search',
     TEACHERS_UNITE: 'teachersunite',
     I_KNOW_A_TEACHER: 'teachersunite/i-know-a-teacher',
-    INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal',
     I_AM_A_TEACHER: 'teachersunite/i-am-a-teacher',
+    INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal',
     DETAILS: 'details',
     getDetailsRoute: (login: string) => `details?login=${encodeURIComponent(login)}`,
     PROFILE: 'a/:accountID',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 392781a777db..16d2e0733224 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -345,7 +345,7 @@ const NewTeachersUniteNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/IntroSchoolPrincipalPage').default;
+            const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/ImTeacherPage').default;
             return IntroSchoolPrincipalPage;
         },
         name: 'Intro_School_Principal',
diff --git a/src/pages/TeachersUnite/ImTeacherPage.js b/src/pages/TeachersUnite/ImTeacherPage.js
index dbeba700d208..a938abf81b79 100644
--- a/src/pages/TeachersUnite/ImTeacherPage.js
+++ b/src/pages/TeachersUnite/ImTeacherPage.js
@@ -1,54 +1,36 @@
 import React from 'react';
-import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithBackButton from '../../components/HeaderWithBackButton';
-import ROUTES from '../../ROUTES';
-import Navigation from '../../libs/Navigation/Navigation';
-import FixedFooter from '../../components/FixedFooter';
-import styles from '../../styles/styles';
-import Button from '../../components/Button';
-import * as Illustrations from '../../components/Icon/Illustrations';
-import variables from '../../styles/variables';
-import useLocalize from '../../hooks/useLocalize';
-import BlockingView from '../../components/BlockingViews/BlockingView';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import * as LoginUtils from '../../libs/LoginUtils';
+import ImTeacherUpdateEmailPage from './ImTeacherUpdateEmailPage';
+import IntroSchoolPrincipalPage from './IntroSchoolPrincipalPage';
 
-const propTypes = {};
+const propTypes = {
+    /** Current user session */
+    session: PropTypes.shape({
+        /** Current user primary login */
+        email: PropTypes.string.isRequired,
+    }),
+};
 
-const defaultProps = {};
+const defaultProps = {
+    session: {
+        email: null,
+    },
+};
 
-function ImTeacherPage() {
-    const {translate} = useLocalize();
-
-    return (
-        <ScreenWrapper>
-            <HeaderWithBackButton
-                title={translate('teachersUnitePage.iAmATeacher')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
-            />
-            <BlockingView
-                shouldShowLink
-                shouldEmbedLinkWithSubtitle
-                icon={Illustrations.EmailAddress}
-                title={translate('teachersUnitePage.updateYourEmail')}
-                subtitle={translate('teachersUnitePage.schoolMailAsDefault')}
-                linkKey="teachersUnitePage.contactMethods"
-                onLinkPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
-                iconWidth={variables.signInLogoWidthLargeScreen}
-                iconHeight={variables.lhnLogoWidth}
-            />
-            <FixedFooter style={[styles.flexGrow0]}>
-                <Button
-                    success
-                    accessibilityLabel={translate('teachersUnitePage.updateEmail')}
-                    text={translate('teachersUnitePage.updateEmail')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
-                />
-            </FixedFooter>
-        </ScreenWrapper>
-    );
+function ImTeacherPage(props) {
+    const isLoggedInEmailPublicDomain = LoginUtils.isEmailPublicDomain(props.session.email);
+    return isLoggedInEmailPublicDomain ? <ImTeacherUpdateEmailPage /> : <IntroSchoolPrincipalPage />;
 }
 
 ImTeacherPage.propTypes = propTypes;
 ImTeacherPage.defaultProps = defaultProps;
 ImTeacherPage.displayName = 'ImTeacherPage';
 
-export default ImTeacherPage;
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(ImTeacherPage);
diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
new file mode 100644
index 000000000000..1ab0b7f40dc7
--- /dev/null
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import ROUTES from '../../ROUTES';
+import Navigation from '../../libs/Navigation/Navigation';
+import FixedFooter from '../../components/FixedFooter';
+import styles from '../../styles/styles';
+import Button from '../../components/Button';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import variables from '../../styles/variables';
+import useLocalize from '../../hooks/useLocalize';
+import BlockingView from '../../components/BlockingViews/BlockingView';
+
+const propTypes = {};
+
+const defaultProps = {};
+
+function ImTeacherUpdateEmailPage() {
+    const {translate} = useLocalize();
+
+    return (
+        <ScreenWrapper>
+            <HeaderWithBackButton
+                title={translate('teachersUnitePage.iAmATeacher')}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
+            />
+            <BlockingView
+                shouldShowLink
+                shouldEmbedLinkWithSubtitle
+                icon={Illustrations.EmailAddress}
+                title={translate('teachersUnitePage.updateYourEmail')}
+                subtitle={translate('teachersUnitePage.schoolMailAsDefault')}
+                linkKey="teachersUnitePage.contactMethods"
+                onLinkPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
+                iconWidth={variables.signInLogoWidthLargeScreen}
+                iconHeight={variables.lhnLogoWidth}
+            />
+            <FixedFooter style={[styles.flexGrow0]}>
+                <Button
+                    success
+                    accessibilityLabel={translate('teachersUnitePage.updateEmail')}
+                    text={translate('teachersUnitePage.updateEmail')}
+                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
+}
+
+ImTeacherUpdateEmailPage.propTypes = propTypes;
+ImTeacherUpdateEmailPage.defaultProps = defaultProps;
+ImTeacherUpdateEmailPage.displayName = 'ImTeacherUpdateEmailPage';
+
+export default ImTeacherUpdateEmailPage;
diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
index fe25c54cb8cc..f36a67da7c56 100644
--- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
+++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
@@ -34,6 +34,7 @@ const defaultProps = {
 
 function IntroSchoolPrincipalPage(props) {
     const {translate} = useLocalize();
+
     /**
      * @param {Object} values
      * @param {String} values.firstName
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index 47c441ad934c..36c142710164 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -13,15 +13,9 @@ import Text from '../../components/Text';
 import MenuItem from '../../components/MenuItem';
 import IllustratedHeaderPageLayout from '../../components/IllustratedHeaderPageLayout';
 import * as LottieAnimations from '../../components/LottieAnimations';
-import * as LoginUtils from '../../libs/LoginUtils';
 import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
-    /** Current user session */
-    session: PropTypes.shape({
-        /** Current user primary login */
-        email: PropTypes.string.isRequired,
-    }),
     /** The list of this user's policies */
     policy: PropTypes.shape({
         /** The user's role in the policy */
@@ -30,25 +24,13 @@ const propTypes = {
 };
 
 const defaultProps = {
-    session: {
-        email: null,
-    },
     policy: {},
 };
 
 function SaveTheWorldPage(props) {
     const {translate} = useLocalize();
-    const isLoggedInEmailPublicDomain = LoginUtils.isEmailPublicDomain(props.session.email);
     const isTeacherAlreadyInvited = !_.isUndefined(props.policy) && props.policy.role === CONST.POLICY.ROLE.USER;
 
-    const handleNavigation = () => {
-        if (isLoggedInEmailPublicDomain) {
-            Navigation.navigate(ROUTES.I_AM_A_TEACHER);
-        } else {
-            Navigation.navigate(ROUTES.INTRO_SCHOOL_PRINCIPAL);
-        }
-    };
-
     return (
         <IllustratedHeaderPageLayout
             shouldShowBackButton
@@ -72,7 +54,7 @@ function SaveTheWorldPage(props) {
                 <MenuItem
                     shouldShowRightIcon
                     title={translate('teachersUnitePage.iAmATeacher')}
-                    onPress={handleNavigation}
+                    onPress={() => Navigation.navigate(ROUTES.I_AM_A_TEACHER)}
                 />
             )}
         </IllustratedHeaderPageLayout>
@@ -84,9 +66,6 @@ SaveTheWorldPage.defaultProps = defaultProps;
 SaveTheWorldPage.displayName = 'SaveTheWorldPage';
 
 export default withOnyx({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
     policy: {
         key: () => `${ONYXKEYS.COLLECTION.POLICY}${CONST.TEACHERS_UNITE.POLICY_ID}`,
     },

From d903534925e7317cc03da0f989d87dc5bb24a090 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 16:19:38 +0530
Subject: [PATCH 05/16] created platform based files

---
 src/components/MenuItem.js                    | 20 ++++------------
 .../MenuItemRenderHTMLTitle/index.js          | 23 +++++++++++++++++++
 .../MenuItemRenderHTMLTitle/index.native.js   | 17 ++++++++++++++
 .../MenuItemRenderHTMLTitle/propTypes.js      |  8 +++++++
 4 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/components/MenuItemRenderHTMLTitle/index.js
 create mode 100644 src/components/MenuItemRenderHTMLTitle/index.native.js
 create mode 100644 src/components/MenuItemRenderHTMLTitle/propTypes.js

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index bb4eeb7a18ac..268351699567 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -24,11 +24,7 @@ import variables from '../styles/variables';
 import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
-import RenderHTML from './RenderHTML';
-import getPlatform from '../libs/getPlatform';
-
-const platform = getPlatform();
-const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
+import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
 
 const propTypes = menuItemPropTypes;
 
@@ -251,16 +247,10 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) &&
-                                                (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) &&
-                                                (isNative ? (
-                                                    <RenderHTML html={getProcessedTitle} />
-                                                ) : (
-                                                    <View style={styles.chatItemMessage}>
-                                                        <RenderHTML html={getProcessedTitle} />
-                                                    </View>
-                                                ))}
-                                            {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
+                                            {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                            )}
+                                            {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}
                                                     numberOfLines={props.numberOfLinesTitle || undefined}
diff --git a/src/components/MenuItemRenderHTMLTitle/index.js b/src/components/MenuItemRenderHTMLTitle/index.js
new file mode 100644
index 000000000000..e4f0b27c4f09
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return (
+        <View style={styles.chatItemMessage}>
+            <RenderHTML html={props.title} />
+        </View>
+    );
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/index.native.js b/src/components/MenuItemRenderHTMLTitle/index.native.js
new file mode 100644
index 000000000000..b3dff8d77eff
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/index.native.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return <RenderHTML html={props.title} />;
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/propTypes.js b/src/components/MenuItemRenderHTMLTitle/propTypes.js
new file mode 100644
index 000000000000..68e279eb28c3
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/propTypes.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Processed title to display for the MenuItem */
+    title: PropTypes.string.isRequired,
+};
+
+export default propTypes;

From 83e24ec882a668ee71b6664a2354c301dd9bc108 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 21:59:53 +0530
Subject: [PATCH 06/16] Fixed Overflow

---
 src/components/MenuItem.js | 6 ++++--
 src/styles/styles.js       | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 268351699567..824b23c84898 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useEffect, useMemo} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
 import styles from '../styles/styles';
@@ -248,7 +248,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                <ScrollView style={styles.menuItemHtmlRendererScrollView}>
+                                                    <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                </ScrollView>
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a748a0fb353b..2e411e7e63df 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3988,6 +3988,10 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
+
+    menuItemHtmlRendererScrollView: {
+        maxHeight: 115,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

From 0ad4fbaaea7f80d38914b8ab0c3f4f8e4a31faff Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 22:12:38 +0530
Subject: [PATCH 07/16] Fixed app not scrolling

---
 src/components/MenuItem.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 824b23c84898..c435d6330c15 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -25,6 +25,7 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
+import {PressableWithoutFeedback} from './Pressable';
 
 const propTypes = menuItemPropTypes;
 
@@ -249,7 +250,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
                                                 <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                    <PressableWithoutFeedback>
+                                                        <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                    </PressableWithoutFeedback>
                                                 </ScrollView>
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (

From 120eb74916bdd35ce88225d463dd27cff773ede9 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 22:23:38 +0530
Subject: [PATCH 08/16] fixed eslint

---
 src/components/MenuItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index c435d6330c15..12dbbf1e4903 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -25,7 +25,7 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
-import {PressableWithoutFeedback} from './Pressable';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 const propTypes = menuItemPropTypes;
 
@@ -250,7 +250,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
                                                 <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <PressableWithoutFeedback>
+                                                    <PressableWithoutFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}>
                                                         <MenuItemRenderHTMLTitle title={getProcessedTitle} />
                                                     </PressableWithoutFeedback>
                                                 </ScrollView>

From 4d939236c41fcedc127824e44872b77d03c111ab Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Wed, 20 Sep 2023 21:12:11 +0800
Subject: [PATCH 09/16] refactor lodashGet usages to const

---
 src/libs/ReportUtils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 8bd9cedcf535..9d3dac5a6e33 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -943,7 +943,8 @@ function getIconsForParticipants(participants, personalDetails) {
     for (let i = 0; i < participantsList.length; i++) {
         const accountID = participantsList[i];
         const avatarSource = UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar'], ''), accountID);
-        participantDetails.push([accountID, lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], ''), avatarSource]);
+        const displayNameLogin = lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], '');
+        participantDetails.push([accountID, displayNameLogin, avatarSource]);
     }
 
     const sortedParticipantDetails = _.chain(participantDetails)

From 00df2fcca20a0824f8ad9578ef99312fa43631f6 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:39:54 +0530
Subject: [PATCH 10/16] fix: cursor issue

---
 src/components/MenuItemRenderHTMLTitle/index.js |  2 +-
 src/styles/styles.js                            | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItemRenderHTMLTitle/index.js b/src/components/MenuItemRenderHTMLTitle/index.js
index e4f0b27c4f09..f91e70dc1249 100644
--- a/src/components/MenuItemRenderHTMLTitle/index.js
+++ b/src/components/MenuItemRenderHTMLTitle/index.js
@@ -10,7 +10,7 @@ const defaultProps = {};
 
 function MenuItemRenderHTMLTitle(props) {
     return (
-        <View style={styles.chatItemMessage}>
+        <View style={styles.renderHTMLTitle}>
             <RenderHTML html={props.title} />
         </View>
     );
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2e411e7e63df..b218a2eb435b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1661,6 +1661,16 @@ const styles = (theme) => ({
         ...wordBreak.breakWord,
     },
 
+    renderHTMLTitle: {
+        color: theme.text,
+        fontSize: variables.fontSizeNormal,
+        fontFamily: fontFamily.EXP_NEUE,
+        lineHeight: variables.lineHeightXLarge,
+        maxWidth: '100%',
+        ...whiteSpace.preWrap,
+        ...wordBreak.breakWord,
+    },
+
     chatItemComposeWithFirstRow: {
         minHeight: 90,
     },

From 1e1b83ce51f2b75d768cf78a234d05d04d373927 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:41:43 +0530
Subject: [PATCH 11/16] Removed extra scrollview and style

---
 src/components/MenuItem.js | 9 ++-------
 src/styles/styles.js       | 4 ----
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 12dbbf1e4903..268351699567 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useEffect, useMemo} from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
 import styles from '../styles/styles';
@@ -25,7 +25,6 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 const propTypes = menuItemPropTypes;
 
@@ -249,11 +248,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-                                                <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <PressableWithoutFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}>
-                                                        <MenuItemRenderHTMLTitle title={getProcessedTitle} />
-                                                    </PressableWithoutFeedback>
-                                                </ScrollView>
+                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b218a2eb435b..54df5b331690 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3998,10 +3998,6 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
-
-    menuItemHtmlRendererScrollView: {
-        maxHeight: 115,
-    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

From 04c6a9733505bc735abb5088f10cd7267ee504d9 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:48:14 +0530
Subject: [PATCH 12/16] fix scroll at new task page

---
 src/pages/tasks/NewTaskPage.js | 88 +++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 9fb600e40753..1696961764ca 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -149,50 +149,52 @@ function NewTaskPage(props) {
                         Navigation.goBack(ROUTES.NEW_TASK_DETAILS);
                     }}
                 />
-                <View style={[styles.containerWithSpaceBetween]}>
-                    <View style={styles.mb5}>
-                        <MenuItemWithTopDescription
-                            description={props.translate('task.title')}
-                            title={title}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
-                            shouldShowRightIcon
-                        />
-                        <MenuItemWithTopDescription
-                            description={props.translate('task.description')}
-                            title={description}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
-                            shouldShowRightIcon
-                            shouldParseTitle
-                            numberOfLinesTitle={2}
-                            titleStyle={styles.flex1}
-                        />
-                        <MenuItem
-                            label={assignee.displayName ? props.translate('task.assignee') : ''}
-                            title={assignee.displayName || ''}
-                            description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
-                            icon={assignee.icons}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
-                            shouldShowRightIcon
-                        />
-                        <MenuItem
-                            label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
-                            title={shareDestination.displayName || ''}
-                            description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
-                            icon={shareDestination.icons}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
-                            interactive={!props.task.parentReportID}
-                            shouldShowRightIcon={!props.task.parentReportID}
+                <ScrollView>
+                    <View style={[styles.containerWithSpaceBetween]}>
+                        <View style={styles.mb5}>
+                            <MenuItemWithTopDescription
+                                description={props.translate('task.title')}
+                                title={title}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
+                                shouldShowRightIcon
+                            />
+                            <MenuItemWithTopDescription
+                                description={props.translate('task.description')}
+                                title={description}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
+                                shouldShowRightIcon
+                                shouldParseTitle
+                                numberOfLinesTitle={2}
+                                titleStyle={styles.flex1}
+                            />
+                            <MenuItem
+                                label={assignee.displayName ? props.translate('task.assignee') : ''}
+                                title={assignee.displayName || ''}
+                                description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
+                                icon={assignee.icons}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
+                                shouldShowRightIcon
+                            />
+                            <MenuItem
+                                label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
+                                title={shareDestination.displayName || ''}
+                                description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
+                                icon={shareDestination.icons}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
+                                interactive={!props.task.parentReportID}
+                                shouldShowRightIcon={!props.task.parentReportID}
+                            />
+                        </View>
+                        <FormAlertWithSubmitButton
+                            isAlertVisible={!_.isEmpty(errorMessage)}
+                            message={errorMessage}
+                            onSubmit={() => onSubmit()}
+                            enabledWhenOffline
+                            buttonText={props.translate('newTaskPage.confirmTask')}
+                            containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
                         />
                     </View>
-                    <FormAlertWithSubmitButton
-                        isAlertVisible={!_.isEmpty(errorMessage)}
-                        message={errorMessage}
-                        onSubmit={() => onSubmit()}
-                        enabledWhenOffline
-                        buttonText={props.translate('newTaskPage.confirmTask')}
-                        containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
-                    />
-                </View>
+                </ScrollView>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

From c1e89eeaacbfdbd208bfd350812de5fda26c81fe Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 18:07:22 +0530
Subject: [PATCH 13/16] fixed styling for scroll view in NewTaskPage

---
 src/pages/tasks/NewTaskPage.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 1696961764ca..db63e01c4ce6 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -149,8 +149,8 @@ function NewTaskPage(props) {
                         Navigation.goBack(ROUTES.NEW_TASK_DETAILS);
                     }}
                 />
-                <ScrollView>
-                    <View style={[styles.containerWithSpaceBetween]}>
+                <ScrollView contentContainerStyle={styles.flexGrow1}>
+                    <View style={[styles.flex1]}>
                         <View style={styles.mb5}>
                             <MenuItemWithTopDescription
                                 description={props.translate('task.title')}
@@ -185,6 +185,8 @@ function NewTaskPage(props) {
                                 shouldShowRightIcon={!props.task.parentReportID}
                             />
                         </View>
+                    </View>
+                    <View style={[styles.flexShrink0]}>
                         <FormAlertWithSubmitButton
                             isAlertVisible={!_.isEmpty(errorMessage)}
                             message={errorMessage}

From 4b4498154180a60a275b922d0d04db0194b87079 Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 11:55:54 +0800
Subject: [PATCH 14/16] Use displayName for testID

---
 src/components/AvatarCropModal/AvatarCropModal.js             | 2 +-
 src/components/CountryPicker/CountrySelectorModal.js          | 2 +-
 src/components/DistanceRequest.js                             | 2 +-
 src/components/HeaderPageLayout.js                            | 2 +-
 .../NewDatePicker/CalendarPicker/YearPickerModal.js           | 2 +-
 src/components/ReimbursementAccountLoadingIndicator.js        | 2 +-
 src/components/StatePicker/StateSelectorModal.js              | 2 +-
 src/pages/AddPersonalBankAccountPage.js                       | 2 +-
 src/pages/DetailsPage.js                                      | 2 +-
 src/pages/EditRequestAmountPage.js                            | 2 +-
 src/pages/EditRequestCategoryPage.js                          | 2 +-
 src/pages/EditRequestCreatedPage.js                           | 2 +-
 src/pages/EditRequestDescriptionPage.js                       | 2 +-
 src/pages/EditRequestMerchantPage.js                          | 2 +-
 src/pages/EditRequestReceiptPage.js                           | 2 +-
 src/pages/EnablePayments/AdditionalDetailsStep.js             | 2 +-
 src/pages/EnablePayments/EnablePaymentsPage.js                | 2 +-
 src/pages/ErrorPage/NotFoundPage.js                           | 2 +-
 src/pages/FlagCommentPage.js                                  | 2 +-
 src/pages/GetAssistancePage.js                                | 2 +-
 src/pages/NewChatPage.js                                      | 2 +-
 src/pages/NewChatSelectorPage.js                              | 2 +-
 src/pages/PrivateNotes/PrivateNotesEditPage.js                | 2 +-
 src/pages/PrivateNotes/PrivateNotesListPage.js                | 2 +-
 src/pages/PrivateNotes/PrivateNotesViewPage.js                | 2 +-
 src/pages/ProfilePage.js                                      | 2 +-
 src/pages/ReimbursementAccount/ACHContractStep.js             | 2 +-
 src/pages/ReimbursementAccount/BankAccountManualStep.js       | 2 +-
 src/pages/ReimbursementAccount/BankAccountPlaidStep.js        | 2 +-
 src/pages/ReimbursementAccount/BankAccountStep.js             | 2 +-
 src/pages/ReimbursementAccount/CompanyStep.js                 | 2 +-
 src/pages/ReimbursementAccount/ContinueBankAccountSetup.js    | 2 +-
 src/pages/ReimbursementAccount/EnableStep.js                  | 2 +-
 src/pages/ReimbursementAccount/ReimbursementAccountPage.js    | 4 ++--
 src/pages/ReimbursementAccount/RequestorOnfidoStep.js         | 2 +-
 src/pages/ReimbursementAccount/RequestorStep.js               | 2 +-
 src/pages/ReimbursementAccount/ValidationStep.js              | 2 +-
 src/pages/ReportDetailsPage.js                                | 2 +-
 src/pages/ReportParticipantsPage.js                           | 2 +-
 src/pages/ReportWelcomeMessagePage.js                         | 2 +-
 src/pages/SearchPage.js                                       | 2 +-
 src/pages/ShareCodePage.js                                    | 2 +-
 src/pages/TeachersUnite/ImTeacherPage.js                      | 2 +-
 src/pages/TeachersUnite/IntroSchoolPrincipalPage.js           | 2 +-
 src/pages/TeachersUnite/KnowATeacherPage.js                   | 2 +-
 src/pages/home/ReportScreen.js                                | 2 +-
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js     | 2 +-
 src/pages/iou/IOUCurrencySelection.js                         | 2 +-
 src/pages/iou/MoneyRequestCategoryPage.js                     | 2 +-
 src/pages/iou/MoneyRequestDatePage.js                         | 2 +-
 src/pages/iou/MoneyRequestDescriptionPage.js                  | 2 +-
 src/pages/iou/MoneyRequestMerchantPage.js                     | 2 +-
 src/pages/iou/MoneyRequestSelectorPage.js                     | 2 +-
 src/pages/iou/MoneyRequestTagPage.js                          | 2 +-
 src/pages/iou/SplitBillDetailsPage.js                         | 2 +-
 src/pages/iou/WaypointEditor.js                               | 2 +-
 src/pages/iou/steps/MoneyRequestConfirmPage.js                | 2 +-
 .../MoneyRequestParticipantsPage.js                           | 2 +-
 src/pages/iou/steps/NewRequestAmountPage.js                   | 2 +-
 src/pages/settings/AboutPage/AboutPage.js                     | 2 +-
 src/pages/settings/AppDownloadLinks.js                        | 2 +-
 src/pages/settings/Preferences/LanguagePage.js                | 2 +-
 src/pages/settings/Preferences/PriorityModePage.js            | 2 +-
 src/pages/settings/Preferences/ThemePage.js                   | 2 +-
 .../settings/Profile/Contacts/ContactMethodDetailsPage.js     | 4 ++--
 src/pages/settings/Profile/Contacts/ContactMethodsPage.js     | 2 +-
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js   | 2 +-
 src/pages/settings/Profile/CustomStatus/StatusSetPage.js      | 2 +-
 src/pages/settings/Profile/DisplayNamePage.js                 | 2 +-
 src/pages/settings/Profile/PersonalDetails/AddressPage.js     | 2 +-
 src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js | 2 +-
 src/pages/settings/Profile/PersonalDetails/LegalNamePage.js   | 2 +-
 .../Profile/PersonalDetails/PersonalDetailsInitialPage.js     | 2 +-
 src/pages/settings/Profile/ProfilePage.js                     | 2 +-
 src/pages/settings/Profile/PronounsPage.js                    | 2 +-
 src/pages/settings/Profile/TimezoneInitialPage.js             | 2 +-
 src/pages/settings/Profile/TimezoneSelectPage.js              | 2 +-
 src/pages/settings/Report/NotificationPreferencePage.js       | 2 +-
 src/pages/settings/Report/ReportSettingsPage.js               | 2 +-
 src/pages/settings/Report/RoomNamePage.js                     | 2 +-
 src/pages/settings/Report/WriteCapabilityPage.js              | 2 +-
 src/pages/settings/Security/CloseAccountPage.js               | 2 +-
 .../Security/TwoFactorAuth/StepWrapper/StepWrapper.js         | 2 +-
 src/pages/settings/Wallet/AddDebitCardPage.js                 | 2 +-
 src/pages/settings/Wallet/ChooseTransferAccountPage.js        | 2 +-
 src/pages/settings/Wallet/TransferBalancePage.js              | 4 ++--
 src/pages/settings/Wallet/WalletPage/BaseWalletPage.js        | 2 +-
 src/pages/signin/SignInModal.js                               | 2 +-
 src/pages/tasks/NewTaskDescriptionPage.js                     | 2 +-
 src/pages/tasks/NewTaskDetailsPage.js                         | 2 +-
 src/pages/tasks/NewTaskPage.js                                | 2 +-
 src/pages/tasks/NewTaskTitlePage.js                           | 2 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js                  | 2 +-
 src/pages/tasks/TaskDescriptionPage.js                        | 2 +-
 src/pages/tasks/TaskShareDestinationSelectorModal.js          | 2 +-
 src/pages/tasks/TaskTitlePage.js                              | 2 +-
 src/pages/wallet/WalletStatementPage.js                       | 2 +-
 src/pages/workspace/WorkspaceInitialPage.js                   | 2 +-
 src/pages/workspace/WorkspaceInviteMessagePage.js             | 2 +-
 src/pages/workspace/WorkspaceInvitePage.js                    | 2 +-
 src/pages/workspace/WorkspaceMembersPage.js                   | 2 +-
 src/pages/workspace/WorkspaceNewRoomPage.js                   | 2 +-
 src/pages/workspace/WorkspacePageWithSections.js              | 2 +-
 103 files changed, 106 insertions(+), 106 deletions(-)

diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index d16ba1364b71..10e8a76f756d 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -366,7 +366,7 @@ function AvatarCropModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="AvatarCropModal"
+                testID={AvatarCropModal.displayName}
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton
diff --git a/src/components/CountryPicker/CountrySelectorModal.js b/src/components/CountryPicker/CountrySelectorModal.js
index ba8c369d7b96..6c6cd19af0c7 100644
--- a/src/components/CountryPicker/CountrySelectorModal.js
+++ b/src/components/CountryPicker/CountrySelectorModal.js
@@ -78,7 +78,7 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="CountrySelectorModal"
+                testID={CountrySelectorModal.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('common.country')}
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 51cd47a339dc..4ac49a5889a8 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -311,7 +311,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
-            testID="DistanceRequest"
+            testID={DistanceRequest.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index b57a5bc85e82..17c2255593e9 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -58,7 +58,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
-            testID="HeaderPageLayout"
+            testID={HeaderPageLayout.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
index d0d52daa9206..9825109fbb63 100644
--- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
+++ b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
@@ -64,7 +64,7 @@ function YearPickerModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="YearPickerModal"
+                testID={YearPickerModal.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('yearPickerPage.year')}
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index 0aefa0649ce8..21aac35f4005 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -25,7 +25,7 @@ function ReimbursementAccountLoadingIndicator(props) {
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}
-            testID="ReimbursementAccountLoadingIndicator"
+            testID={ReimbursementAccountLoadingIndicator.displayName}
         >
             <HeaderWithBackButton
                 title={translate('reimbursementAccountLoadingAnimation.oneMoment')}
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index a5e20470977e..378dcc4ebc8b 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -84,7 +84,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="StateSelectorModal"
+                testID={StateSelectorModal.displayName}
             >
                 <HeaderWithBackButton
                     title={label || translate('common.state')}
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index cc50f927d428..7c04970c3980 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -103,7 +103,7 @@ class AddPersonalBankAccountPage extends React.Component {
                 includeSafeAreaPaddingBottom={shouldShowSuccess}
                 shouldEnablePickerAvoiding={false}
                 shouldShowOfflineIndicator={false}
-                testID="AddPersonalBankAccountPage"
+                testID={AddPersonalBankAccountPage.displayName}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('bankAccount.addBankAccount')}
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index cd4e95333ae1..058ceef16b4c 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -126,7 +126,7 @@ function DetailsPage(props) {
     const isCurrentUser = _.keys(props.loginList).includes(details.login);
 
     return (
-        <ScreenWrapper testID="DetailsPage">
+        <ScreenWrapper testID={DetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View
diff --git a/src/pages/EditRequestAmountPage.js b/src/pages/EditRequestAmountPage.js
index 2f691afe4d5e..b24275cbdfc0 100644
--- a/src/pages/EditRequestAmountPage.js
+++ b/src/pages/EditRequestAmountPage.js
@@ -56,7 +56,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, report
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestAmountPage"
+            testID={EditRequestAmountPage.displayName}
         >
             <HeaderWithBackButton title={translate('iou.amount')} />
             <MoneyRequestAmountForm
diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js
index 1f5b01680d34..e47935dd9df1 100644
--- a/src/pages/EditRequestCategoryPage.js
+++ b/src/pages/EditRequestCategoryPage.js
@@ -30,7 +30,7 @@ function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestCategoryPage"
+            testID={EditRequestCategoryPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.category')}
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index 344e767a69ca..9edce7350400 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -23,7 +23,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestCreatedPage"
+            testID={EditRequestCreatedPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.date')} />
             <Form
diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js
index c497ed38402f..0b4858b0bacb 100644
--- a/src/pages/EditRequestDescriptionPage.js
+++ b/src/pages/EditRequestDescriptionPage.js
@@ -27,7 +27,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => descriptionInputRef.current && descriptionInputRef.current.focus()}
-            testID="EditRequestDescriptionPage"
+            testID={EditRequestDescriptionPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.description')} />
             <Form
diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js
index 02ed65d0f856..7e15a88a3ab4 100644
--- a/src/pages/EditRequestMerchantPage.js
+++ b/src/pages/EditRequestMerchantPage.js
@@ -38,7 +38,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => merchantInputRef.current && merchantInputRef.current.focus()}
-            testID="EditRequestMerchantPage"
+            testID={EditRequestMerchantPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.merchant')} />
             <Form
diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index ea6e85a9b9d3..2ef33a72423b 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -31,7 +31,7 @@ function EditRequestReceiptPage({route, transactionID}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestReceiptPage"
+            testID={EditRequestReceiptPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.receipt')}
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index c4c35d0d453f..cf18fc6d7303 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -149,7 +149,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
             <ScreenWrapper
                 style={[styles.flex1]}
                 keyboardAvoidingViewBehavior="height"
-                testID="AdditionalDetailsStep"
+                testID={AdditionalDetailsStep.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('additionalDetailsStep.headerTitle')}
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
index ef0f4d17912e..064f9371e46a 100644
--- a/src/pages/EnablePayments/EnablePaymentsPage.js
+++ b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -57,7 +57,7 @@ class EnablePaymentsPage extends React.Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="EnablePaymentsPage"
+                testID={EnablePaymentsPage.displayName}
             >
                 {() => {
                     if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
diff --git a/src/pages/ErrorPage/NotFoundPage.js b/src/pages/ErrorPage/NotFoundPage.js
index bcf0da3ae9a2..445e81296566 100644
--- a/src/pages/ErrorPage/NotFoundPage.js
+++ b/src/pages/ErrorPage/NotFoundPage.js
@@ -5,7 +5,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 // eslint-disable-next-line rulesdir/no-negated-variables
 function NotFoundPage() {
     return (
-        <ScreenWrapper testID="NotFoundPage">
+        <ScreenWrapper testID={NotFoundPage.displayName}>
             <FullPageNotFoundView shouldShow />
         </ScreenWrapper>
     );
diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 6af38c84b582..53da810007ea 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -156,7 +156,7 @@ function FlagCommentPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="FlagCommentPage"
+            testID={FlagCommentPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(getActionToFlag(), props.report)}>
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index d5b790a3b5ca..97b498d758b7 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -78,7 +78,7 @@ function GetAssistancePage(props) {
     }
 
     return (
-        <ScreenWrapper testID="GetAssistancePage">
+        <ScreenWrapper testID={GetAssistancePage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('getAssistancePage.title')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index a90ae3030ba2..c3b66910face 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -173,7 +173,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
             includeSafeAreaPaddingBottom={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
-            testID="NewChatPage"
+            testID={NewChatPage.displayName}
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
                 <KeyboardAvoidingView
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index f2097ce0c62d..42b56256da20 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -32,7 +32,7 @@ function NewChatSelectorPage(props) {
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewChatSelectorPage"
+            testID={NewChatSelectorPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('sidebarScreen.fabNewChat')}
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index 81c96c4aa199..5f12d8087a93 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -80,7 +80,7 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(privateNotesInput.current)}
-            testID="PrivateNotesEditPage"
+            testID={PrivateNotesEditPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note']) || !isCurrentUserNote}
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index 945b0dbdf793..fdfaa4c60e33 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -119,7 +119,7 @@ function PrivateNotesListPage({report, personalDetailsList, network, session}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PrivateNotesListPage"
+            testID={PrivateNotesListPage.displayName}
         >
             <FullPageNotFoundView shouldShow={_.isEmpty(report.reportID) || (!report.isLoadingPrivateNotes && network.isOffline && _.isEmpty(lodashGet(report, 'privateNotes', {})))}>
                 <HeaderWithBackButton
diff --git a/src/pages/PrivateNotes/PrivateNotesViewPage.js b/src/pages/PrivateNotes/PrivateNotesViewPage.js
index 92967795a756..4c6d960d5d9a 100644
--- a/src/pages/PrivateNotes/PrivateNotesViewPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesViewPage.js
@@ -58,7 +58,7 @@ function PrivateNotesViewPage({route, personalDetailsList, session, report}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PrivateNotesViewPage"
+            testID={PrivateNotesViewPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note'])}
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 645de1fc7d80..f9b92e2dec06 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -144,7 +144,7 @@ function ProfilePage(props) {
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
     return (
-        <ScreenWrapper testID="ProfilePage">
+        <ScreenWrapper testID={ProfilePage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index 38604f0bf2b9..761be71d864a 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -147,7 +147,7 @@ function ACHContractStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ACHContractStep"
+            testID={ACHContractStep.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('beneficialOwnersStep.additionalInformation')}
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 5ed03a7badab..9d0b0c1f5bed 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -75,7 +75,7 @@ function BankAccountManualStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="BankAccountManualStep"
+            testID={BankAccountManualStep.displayName}
         >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 849bb809883e..3fbf2a138384 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -89,7 +89,7 @@ function BankAccountPlaidStep(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldShowOfflineIndicator={false}
-            testID="BankAccountPlaidStep"
+            testID={BankAccountPlaidStep.displayName}
         >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 81b43764ad68..e6d508da4392 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -93,7 +93,7 @@ function BankAccountStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="BankAccountStep"
+            testID={BankAccountStep.displayName}
         >
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithBackButton
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 1c6115f2b465..0ca9b1b7ea92 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -142,7 +142,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="CompanyStep"
+            testID={CompanyStep.displayName}
         >
             <HeaderWithBackButton
                 title={translate('companyStep.headerTitle')}
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index 611586ce89fa..5bde2884be51 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -43,7 +43,7 @@ function ContinueBankAccountSetup(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ContinueBankAccountSetup"
+            testID={ContinueBankAccountSetup.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index a539b3125d0c..f0cd826f4c43 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -56,7 +56,7 @@ function EnableStep(props) {
         <ScreenWrapper
             style={[styles.flex1, styles.justifyContentBetween]}
             includeSafeAreaPaddingBottom={false}
-            testID="EnableStep"
+            testID={EnableStep.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 788d56f266cb..e24e12c639bd 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -339,7 +339,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)) {
             return (
-                <ScreenWrapper testID="ReimbursementAccountPage">
+                <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
                     <FullPageNotFoundView
                         shouldShow
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
@@ -385,7 +385,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (errorText) {
             return (
-                <ScreenWrapper testID="ReimbursementAccountPage">
+                <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
                     <HeaderWithBackButton
                         title={this.props.translate('workspace.common.connectBankAccount')}
                         subtitle={policyName}
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
index 2b043bd31087..72e3850aabd0 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -44,7 +44,7 @@ class RequestorOnfidoStep extends React.Component {
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
                 shouldShowOfflineIndicator={false}
-                testID="RequestorOnfidoStep"
+                testID={RequestorOnfidoStep.displayName}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index df55f3566518..cb1d306eebb6 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -92,7 +92,7 @@ class RequestorStep extends React.Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="RequestorStep"
+                testID={RequestorStep.displayName}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index bfae630557b2..851c4a4b2496 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -131,7 +131,7 @@ class ValidationStep extends React.Component {
             <ScreenWrapper
                 style={[styles.flex1, styles.justifyContentBetween]}
                 includeSafeAreaPaddingBottom={false}
-                testID="ValidationStep"
+                testID={ValidationStep.displayName}
             >
                 <HeaderWithBackButton
                     title={isVerifying ? this.props.translate('validationStep.headerTitle') : this.props.translate('workspace.common.testTransactions')}
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 8be8cc225899..4cc3c2b1a5ba 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -152,7 +152,7 @@ function ReportDetailsPage(props) {
     ) : null;
 
     return (
-        <ScreenWrapper testID="ReportDetailsPage">
+        <ScreenWrapper testID={ReportDetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <ScrollView style={[styles.flex1]}>
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index fe68a5d7ed2b..c10401fb90db 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -101,7 +101,7 @@ function ReportParticipantsPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ReportParticipantsPage"
+            testID={ReportParticipantsPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={_.isEmpty(props.report) || ReportUtils.isArchivedRoom(props.report)}>
diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js
index 918735bad5e1..a9c09d870574 100644
--- a/src/pages/ReportWelcomeMessagePage.js
+++ b/src/pages/ReportWelcomeMessagePage.js
@@ -62,7 +62,7 @@ function ReportWelcomeMessagePage(props) {
                 }
                 focusAndUpdateMultilineInputRange(welcomeMessageInputRef.current);
             }}
-            testID="ReportWelcomeMessagePage"
+            testID={ReportWelcomeMessagePage.displayName}
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={!PolicyUtils.isPolicyAdmin(props.policy)}>
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index ce43b757428a..141f4e841853 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -171,7 +171,7 @@ class SearchPage extends Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="SearchPage"
+                testID={SearchPage.displayName}
             >
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 6f35bf1b3600..f19c79db5459 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -54,7 +54,7 @@ class ShareCodePage extends React.Component {
         const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 
         return (
-            <ScreenWrapper testID="ShareCodePage">
+            <ScreenWrapper testID={ShareCodePage.displayName}>
                 <HeaderWithBackButton
                     title={this.props.translate('common.shareCode')}
                     onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.getReportDetailsRoute(this.props.report.reportID) : ROUTES.SETTINGS)}
diff --git a/src/pages/TeachersUnite/ImTeacherPage.js b/src/pages/TeachersUnite/ImTeacherPage.js
index d4e69dd5dd3b..cc35e40b10de 100644
--- a/src/pages/TeachersUnite/ImTeacherPage.js
+++ b/src/pages/TeachersUnite/ImTeacherPage.js
@@ -19,7 +19,7 @@ function ImTeacherPage() {
     const {translate} = useLocalize();
 
     return (
-        <ScreenWrapper testID="ImTeacherPage">
+        <ScreenWrapper testID={ImTeacherPage.displayName}>
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iAmATeacher')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
index 10bc47c00556..73b7a2ba8dc9 100644
--- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
+++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
@@ -82,7 +82,7 @@ function IntroSchoolPrincipalPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="IntroSchoolPrincipalPage"
+            testID={IntroSchoolPrincipalPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.introSchoolPrincipal')}
diff --git a/src/pages/TeachersUnite/KnowATeacherPage.js b/src/pages/TeachersUnite/KnowATeacherPage.js
index 774217899ce4..f6506b96d3f2 100644
--- a/src/pages/TeachersUnite/KnowATeacherPage.js
+++ b/src/pages/TeachersUnite/KnowATeacherPage.js
@@ -93,7 +93,7 @@ function KnowATeacherPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="KnowATeacherPage"
+            testID={KnowATeacherPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iKnowATeacher')}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index f2b0875dbc53..922b74d3b6a3 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -360,7 +360,7 @@ function ReportScreen({
             <ScreenWrapper
                 style={screenWrapperStyle}
                 shouldEnableKeyboardAvoidingView={isTopMostReportId}
-                testID="ReportScreen"
+                testID={ReportScreen.displayName}
             >
                 <FullPageNotFoundView
                     shouldShow={shouldShowNotFoundPage}
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 6697aa793f7e..2c7e9e0e1274 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -34,7 +34,7 @@ function BaseSidebarScreen(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
-            testID="SidebarScreen"
+            testID={SidebarScreen.displayName}
         >
             {({insets}) => (
                 <>
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index fa0cb3e9da36..966cd2f87af6 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -132,7 +132,7 @@ function IOUCurrencySelection(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
-            testID="IOUCurrencySelection"
+            testID={IOUCurrencySelection.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index 63eb35d3d4a1..6e99fbfe4164 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -63,7 +63,7 @@ function MoneyRequestCategoryPage({route, report, iou}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="MoneyRequestCategoryPage"
+            testID={MoneyRequestCategoryPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.category')}
diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js
index 1f14eac17603..2d2f9c519c50 100644
--- a/src/pages/iou/MoneyRequestDatePage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -85,7 +85,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="MoneyRequestDatePage"
+            testID={MoneyRequestDatePage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.date')}
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index b17c638af2e3..ab206218e103 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -90,7 +90,7 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
-            testID="MoneyRequestDescriptionPage"
+            testID={MoneyRequestDescriptionPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.description')}
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index 53b4e0131f69..dddf63a49673 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -93,7 +93,7 @@ function MoneyRequestMerchantPage({iou, route}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
-            testID="MoneyRequestMerchantPage"
+            testID={MoneyRequestMerchantPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.merchant')}
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 7a035dd3a0b5..990ffd4bb590 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -82,7 +82,7 @@ function MoneyRequestSelectorPage(props) {
                       ]
                     : []
             }
-            testID="MoneyRequestSelectorPage"
+            testID={MoneyRequestSelectorPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index b00643f65f4d..fcd2b412fbe8 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -80,7 +80,7 @@ function MoneyRequestTagPage({route, report, policyTags, iou}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="MoneyRequestTagPage"
+            testID={MoneyRequestTagPage.displayName}
         >
             <HeaderWithBackButton
                 title={tagListName}
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index 67fb489a43f1..23da92bcc9e7 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -72,7 +72,7 @@ function SplitBillDetailsPage(props) {
     const {amount: splitAmount, currency: splitCurrency, comment: splitComment} = ReportUtils.getTransactionDetails(transaction);
 
     return (
-        <ScreenWrapper testID="SplitBillDetailsPage">
+        <ScreenWrapper testID={SplitBillDetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report) || _.isEmpty(reportAction)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 0328c23fdc82..11459cca3aa8 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -180,7 +180,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => textInput.current && textInput.current.focus()}
             shouldEnableMaxHeight
-            testID="WaypointEditor"
+            testID={WaypointEditor.displayName}
         >
             <FullPageNotFoundView shouldShow={(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount) && isFocused}>
                 <HeaderWithBackButton
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 83716374720f..82b3c4a4909d 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -279,7 +279,7 @@ function MoneyRequestConfirmPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="MoneyRequestConfirmPage"
+            testID={MoneyRequestConfirmPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 0f08e591324b..b737e40b8e4b 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -114,7 +114,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
-            testID="MoneyRequestParticipantsPage"
+            testID={MoneyRequestParticipantsPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={styles.flex1}>
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index c3b581cec642..9746fd602eb6 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -176,7 +176,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             onEntryTransitionEnd={focusTextInput}
-            testID="NewRequestAmountPage"
+            testID={NewRequestAmountPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 105ea79637bb..78a300a38057 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -83,7 +83,7 @@ function AboutPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="AboutPage"
+            testID={AboutPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 73d5c8fca67b..57417dca5a30 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -55,7 +55,7 @@ function AppDownloadLinksPage(props) {
     ];
 
     return (
-        <ScreenWrapper testID="AppDownloadLinks">
+        <ScreenWrapper testID={AppDownloadLinks.displayName}>
             <HeaderWithBackButton
                 title={props.translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js
index 5004b85312f3..f55e49eb561e 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.js
@@ -28,7 +28,7 @@ function LanguagePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="LanguagePage"
+            testID={LanguagePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('languagePage.language')}
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index 76791640f9bf..38f856825dcc 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -48,7 +48,7 @@ function PriorityModePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PriorityModePage"
+            testID={PriorityModePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('priorityModePage.priorityMode')}
diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js
index a901ee8d350a..0dd6115e74e8 100644
--- a/src/pages/settings/Preferences/ThemePage.js
+++ b/src/pages/settings/Preferences/ThemePage.js
@@ -37,7 +37,7 @@ function ThemePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ThemePage"
+            testID={ThemePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('themePage.theme')}
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index 321db65b116b..b8c817350a38 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -216,7 +216,7 @@ class ContactMethodDetailsPage extends Component {
         const loginData = this.props.loginList[contactMethod];
         if (!contactMethod || !loginData) {
             return (
-                <ScreenWrapper testID="ContactMethodDetailsPage">
+                <ScreenWrapper testID={ContactMethodDetailsPage.displayName}>
                     <FullPageNotFoundView
                         shouldShow
                         linkKey="contacts.goBackContactMethods"
@@ -234,7 +234,7 @@ class ContactMethodDetailsPage extends Component {
         return (
             <ScreenWrapper
                 onEntryTransitionEnd={() => this.validateCodeFormRef.current && this.validateCodeFormRef.current.focus()}
-                testID="ContactMethodDetailsPage"
+                testID={ContactMethodDetailsPage.displayName}
             >
                 <HeaderWithBackButton
                     title={formattedContactMethod}
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 41b44e5b6339..b5e05cf017df 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -113,7 +113,7 @@ function ContactMethodsPage(props) {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            testID="ContactMethodsPage"
+            testID={ContactMethodsPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('contacts.contactMethods')}
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 0de9c34e14b6..1880ef694b40 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -98,7 +98,7 @@ function NewContactMethodPage(props) {
             }}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewContactMethodPage"
+            testID={NewContactMethodPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('contacts.newContactMethod')}
diff --git a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
index 5cb5704d56fd..189ec3e5f2f3 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
@@ -47,7 +47,7 @@ function StatusSetPage({draftStatus, currentUserPersonalDetails}) {
     };
 
     return (
-        <ScreenWrapper testID="StatusSetPage">
+        <ScreenWrapper testID={StatusSetPage.displayName}>
             <HeaderWithBackButton
                 title={translate('statusPage.status')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_STATUS)}
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index d4924636acbc..af98a0317a77 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -69,7 +69,7 @@ function DisplayNamePage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="DisplayNamePage"
+            testID={DisplayNamePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('displayNamePage.headerTitle')}
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index 2268aa08a7bd..a50d9e7e23c3 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -131,7 +131,7 @@ function AddressPage({privatePersonalDetails}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="AddressPage"
+            testID={AddressPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('privatePersonalDetails.homeAddress')}
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 8fbd27a59d48..8b4406329616 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -63,7 +63,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="DateOfBirthPage"
+            testID={DateOfBirthPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.dob')}
diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
index 4fb538ac59b6..fc55893169dc 100644
--- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
+++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
@@ -71,7 +71,7 @@ function LegalNamePage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="LegalNamePage"
+            testID={LegalNamePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.legalName')}
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index eb6b7a5ba8bf..faac43e52656 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -85,7 +85,7 @@ function PersonalDetailsInitialPage(props) {
     };
 
     return (
-        <ScreenWrapper testID="PersonalDetailsInitialPage">
+        <ScreenWrapper testID={PersonalDetailsInitialPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.personalDetails')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index edc6e29b58a6..881937213c9b 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -109,7 +109,7 @@ function ProfilePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ProfilePage"
+            testID={ProfilePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 4f8fb7cdb0df..dbfd067de4bb 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -67,7 +67,7 @@ function PronounsPage({currentUserPersonalDetails}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PronounsPage"
+            testID={PronounsPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('pronounsPage.pronouns')}
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 101d5b2cf77b..5fd5e1bd7661 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -41,7 +41,7 @@ function TimezoneInitialPage(props) {
     };
 
     return (
-        <ScreenWrapper testID="TimezoneInitialPage">
+        <ScreenWrapper testID={TimezoneInitialPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('timezonePage.timezone')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
index 05de3657e0ac..ee34f24788bb 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -80,7 +80,7 @@ function TimezoneSelectPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="TimezoneSelectPage"
+            testID={TimezoneSelectPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('timezonePage.timezone')}
diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
index 5fdb07ceddfa..57619bc3659f 100644
--- a/src/pages/settings/Report/NotificationPreferencePage.js
+++ b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -45,7 +45,7 @@ function NotificationPreferencePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="NotificationPreferencePage"
+            testID={NotificationPreferencePage.displayName}
         >
             <FullPageNotFoundView shouldShow={shouldDisableNotificationPreferences}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
index f50b5dcd3882..1a2960ac3c48 100644
--- a/src/pages/settings/Report/ReportSettingsPage.js
+++ b/src/pages/settings/Report/ReportSettingsPage.js
@@ -75,7 +75,7 @@ function ReportSettingsPage(props) {
     const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(report);
 
     return (
-        <ScreenWrapper testID="ReportSettingsPage">
+        <ScreenWrapper testID={ReportSettingsPage.displayName}>
             <FullPageNotFoundView shouldShow={shouldDisableSettings}>
                 <HeaderWithBackButton
                     title={translate('common.settings')}
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index dd2ab947b4e8..b8844a39c38b 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -81,7 +81,7 @@ function RoomNamePage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => roomNameInputRef.current && roomNameInputRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
-            testID="RoomNamePage"
+            testID={RoomNamePage.displayName}
         >
             <FullPageNotFoundView shouldShow={ReportUtils.shouldDisableRename(report, policy)}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js
index ce9a9db725fb..4399c757dede 100644
--- a/src/pages/settings/Report/WriteCapabilityPage.js
+++ b/src/pages/settings/Report/WriteCapabilityPage.js
@@ -53,7 +53,7 @@ function WriteCapabilityPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="WriteCapabilityPage"
+            testID={WriteCapabilityPage.displayName}
         >
             <FullPageNotFoundView shouldShow={!isAbleToEdit}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index a5a961705585..ae015e3cda8a 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -78,7 +78,7 @@ function CloseAccountPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="CloseAccountPage"
+            testID={CloseAccountPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('closeAccountPage.closeAccount')}
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 817bd9e5fb5b..07714fb3c49b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -24,7 +24,7 @@ function StepWrapper({
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
-            testID="StepWrapper"
+            testID={StepWrapper.displayName}
         >
             <AnimatedStep
                 style={[styles.flex1]}
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index e41f833941ad..9cdaf82e3802 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -108,7 +108,7 @@ function DebitCardPage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
-            testID="AddDebitCardPage"
+            testID={AddDebitCardPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('addDebitCardPage.addADebitCard')}
diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.js b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
index 19bfcf3e4b8c..78a9e92326bc 100644
--- a/src/pages/settings/Wallet/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
@@ -52,7 +52,7 @@ function ChooseTransferAccountPage(props) {
     };
 
     return (
-        <ScreenWrapper testID="ChooseTransferAccountPage">
+        <ScreenWrapper testID={ChooseTransferAccountPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('chooseTransferAccountPage.chooseAccount')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)}
diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js
index 10e591e5945b..f33c92bea02b 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.js
@@ -137,7 +137,7 @@ function TransferBalancePage(props) {
 
     if (props.walletTransfer.shouldShowSuccess && !props.walletTransfer.loading) {
         return (
-            <ScreenWrapper testID="TransferBalancePage">
+            <ScreenWrapper testID={TransferBalancePage.displayName}>
                 <HeaderWithBackButton
                     title={props.translate('common.transferBalance')}
                     onBackButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
@@ -170,7 +170,7 @@ function TransferBalancePage(props) {
     const shouldShowTransferView = PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, props.bankAccountList) && props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
 
     return (
-        <ScreenWrapper testID="TransferBalancePage">
+        <ScreenWrapper testID={TransferBalancePage.displayName}>
             <FullPageNotFoundView
                 shouldShow={!shouldShowTransferView}
                 titleKey="notFound.pageNotFound"
diff --git a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
index 40c7bde7d1f5..4ffd4cf9a744 100644
--- a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
@@ -348,7 +348,7 @@ function BaseWalletPage(props) {
     const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || isSmallScreenWidth;
 
     return (
-        <ScreenWrapper testID="BaseWalletPage">
+        <ScreenWrapper testID={BaseWalletPage.displayName}>
             <HeaderWithBackButton
                 title={translate('common.wallet')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 03788298debf..f1ce09def084 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -22,7 +22,7 @@ function SignInModal() {
             style={[styles.highlightBG]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="SignInModal"
+            testID={SignInModal.displayName}
         >
             <HeaderWithBackButton />
             <SignInPage isInModal />
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index 008e31a96c1d..ac38f3aa19a2 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -57,7 +57,7 @@ function NewTaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
             shouldEnableMaxHeight
-            testID="NewTaskDescriptionPage"
+            testID={NewTaskDescriptionPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('task.description')}
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index d6b8c04e60ad..b7fd3900e1f3 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -77,7 +77,7 @@ function NewTaskDetailsPage(props) {
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewTaskDetailsPage"
+            testID={NewTaskDetailsPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('newTaskPage.assignTask')}
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index a82f199ca2d2..7fd9bcd9b897 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -145,7 +145,7 @@ function NewTaskPage(props) {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            testID="NewTaskPage"
+            testID={NewTaskPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={!isAllowedToCreateTask}
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 8b7401cc3023..62eb1da4872a 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -77,7 +77,7 @@ function NewTaskTitlePage(props) {
             }}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewTaskTitlePage"
+            testID={NewTaskTitlePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('task.title')}
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 18918b8c9db1..b1519a7502b4 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -209,7 +209,7 @@ function TaskAssigneeSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
-            testID="TaskAssigneeeSelectorModal"
+            testID={TaskAssigneeeSelectorModal.displayName}
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 3a336486dbfd..d5e826a45032 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -67,7 +67,7 @@ function TaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
             shouldEnableMaxHeight
-            testID="TaskDescriptionPage"
+            testID={TaskDescriptionPage.displayName}
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index 45694492aaca..2fc8f0eab014 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -116,7 +116,7 @@ function TaskShareDestinationSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
-            testID="TaskShareDestinationSelectorModal"
+            testID={TaskShareDestinationSelectorModal.displayName}
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index 71da6462b118..5bfc94467e3e 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -79,7 +79,7 @@ function TaskTitlePage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             shouldEnableMaxHeight
-            testID="TaskTitlePage"
+            testID={TaskTitlePage.displayName}
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js
index 336f2cdda0aa..91563a44ddd5 100644
--- a/src/pages/wallet/WalletStatementPage.js
+++ b/src/pages/wallet/WalletStatementPage.js
@@ -94,7 +94,7 @@ function WalletStatementPage(props) {
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             includeSafeAreaPaddingBottom={false}
-            testID="WalletStatementPage"
+            testID={WalletStatementPage.displayName}
         >
             <HeaderWithBackButton
                 title={Str.recapitalize(title)}
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 20c94d9e2c07..c012af2434fb 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -184,7 +184,7 @@ function WorkspaceInitialPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="WorkspaceInitialPage"
+            testID={WorkspaceInitialPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index b72e71f18cc5..e62d46ecf092 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -160,7 +160,7 @@ class WorkspaceInviteMessagePage extends React.Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="WorkspaceInviteMessagePage"
+                testID={WorkspaceInviteMessagePage.displayName}
             >
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 7ec10e33debb..39013dd650e4 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -199,7 +199,7 @@ function WorkspaceInvitePage(props) {
     return (
         <ScreenWrapper
             shouldEnableMaxHeight
-            testID="WorkspaceInvitePage"
+            testID={WorkspaceInvitePage.displayName}
         >
             {({didScreenTransitionEnd}) => {
                 const sections = didScreenTransitionEnd ? getSections() : [];
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 669b0e41b08d..42c2e61b75ea 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -344,7 +344,7 @@ function WorkspaceMembersPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             style={[styles.defaultModalContainer]}
-            testID="WorkspaceMembersPage"
+            testID={WorkspaceMembersPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 89a3e854578d..5e4aeda6262e 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -150,7 +150,7 @@ function WorkspaceNewRoomPage(props) {
                 includeSafeAreaPaddingBottom={false}
                 includePaddingTop={false}
                 shouldEnablePickerAvoiding={false}
-                testID="WorkspaceNewRoomPage"
+                testID={WorkspaceNewRoomPage.displayName}
             >
                 {({insets}) => (
                     <KeyboardAvoidingView
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 95f5ff334474..314644262db7 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -102,7 +102,7 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
-            testID="WorkspacePageWithSections"
+            testID={WorkspacePageWithSections.displayName}
         >
             <FullPageNotFoundView
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}

From 4429827e16ae3952d2d6208fa6c0ce9ffc0c480e Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 13:05:24 +0800
Subject: [PATCH 15/16] Fix lint

---
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 2 +-
 src/pages/settings/AppDownloadLinks.js                    | 2 +-
 src/pages/settings/Wallet/AddDebitCardPage.js             | 2 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 2c7e9e0e1274..bc4d28fdf09f 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -34,7 +34,7 @@ function BaseSidebarScreen(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
-            testID={SidebarScreen.displayName}
+            testID={BaseSidebarScreen.displayName}
         >
             {({insets}) => (
                 <>
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 57417dca5a30..957120846f3b 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -55,7 +55,7 @@ function AppDownloadLinksPage(props) {
     ];
 
     return (
-        <ScreenWrapper testID={AppDownloadLinks.displayName}>
+        <ScreenWrapper testID={AppDownloadLinksPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index 9cdaf82e3802..f74fc050738f 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -108,7 +108,7 @@ function DebitCardPage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
-            testID={AddDebitCardPage.displayName}
+            testID={DebitCardPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('addDebitCardPage.addADebitCard')}
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index b1519a7502b4..4ec00df0661c 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -209,7 +209,7 @@ function TaskAssigneeSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
-            testID={TaskAssigneeeSelectorModal.displayName}
+            testID={TaskAssigneeSelectorModal.displayName}
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>

From f940339db87755111bdc96c495f09102025aaad9 Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 13:22:45 +0800
Subject: [PATCH 16/16] Another one after conflicts

---
 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
index a686fc479548..de83c71a01c7 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -19,7 +19,7 @@ function ImTeacherUpdateEmailPage() {
     const {translate} = useLocalize();
 
     return (
-        <ScreenWrapper testID="ImTeacherPage">
+        <ScreenWrapper testID={ImTeacherUpdateEmailPage.displayName}>
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iAmATeacher')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}