From 65edf96b211f0b3a238161bc7732ee1f99e4004c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 11:40:59 +0200
Subject: [PATCH 01/49] English and spanish translations

---
 src/languages/en.js | 15 +++++++++++----
 src/languages/es.js | 16 +++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 19dbd9c63187..c0ed7b27a071 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -353,19 +353,23 @@ export default {
         },
     },
     sidebarScreen: {
-        fabAction: 'New chat',
+        chat: 'Chat',
+        room: 'Room',
         newChat: 'New chat',
         newGroup: 'New group',
         newRoom: 'New room',
         buttonSearch: 'Search',
         buttonMySettings: 'My settings',
-        fabNewChat: 'New chat (Floating action)',
+        fabNewChat: 'Send message',
+        fabNewChatExplained: 'Send message (Floating action)',
         chatPinned: 'Chat pinned',
         draftedMessage: 'Drafted message',
         listOfChatMessages: 'List of chat messages',
         listOfChats: 'List of chats',
     },
     tabSelector: {
+        chat: 'Chat',
+        room: 'Room',
         manual: 'Manual',
         scan: 'Scan',
         distance: 'Distance',
@@ -391,9 +395,10 @@ export default {
         amount: 'Amount',
         cash: 'Cash',
         split: 'Split',
+        addToSplit: 'Add to split',
+        splitBill: 'Split bill',
         request: 'Request',
         participants: 'Participants',
-        splitBill: 'Split bill',
         requestMoney: 'Request money',
         sendMoney: 'Send money',
         pay: 'Pay',
@@ -862,7 +867,9 @@ export default {
         localTime: 'Local time',
     },
     newChatPage: {
+        createChat: 'Create chat',
         createGroup: 'Create group',
+        addToGroup: 'Add to group',
     },
     yearPickerPage: {
         year: 'Year',
@@ -1410,7 +1417,7 @@ export default {
             openShortcutDialog: 'Opens the keyboard shortcuts dialog',
             escape: 'Escape dialogs',
             search: 'Open search dialog',
-            newGroup: 'New group screen',
+            newChat: 'New chat screen',
             copy: 'Copy comment',
         },
     },
diff --git a/src/languages/es.js b/src/languages/es.js
index bb3306417e17..605e6c3c5760 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -352,19 +352,22 @@ export default {
         },
     },
     sidebarScreen: {
-        fabAction: 'Nuevo chat',
-        newChat: 'Nuevo chat',
+        chat: 'Chat',
+        room: 'Sala',
         newGroup: 'Nuevo grupo',
         newRoom: 'Nueva sala de chat',
         buttonSearch: 'Buscar',
         buttonMySettings: 'Mi configuración',
-        fabNewChat: 'Nuevo chat',
+        fabNewChat: 'Enviar mensaje',
+        fabNewChatExplained: 'Enviar mensaje',
         chatPinned: 'Chat fijado',
         draftedMessage: 'Mensaje borrador',
         listOfChatMessages: 'Lista de mensajes del chat',
         listOfChats: 'lista de chats',
     },
     tabSelector: {
+        chat: 'Chat',
+        room: 'Sala',
         manual: 'Manual',
         scan: 'Escanear',
         distance: 'Distancia',
@@ -390,9 +393,10 @@ export default {
         amount: 'Importe',
         cash: 'Efectivo',
         split: 'Dividir',
+        addToSplit: 'Añadir para dividir',
+        splitBill: 'Dividir factura',
         request: 'Solicitar',
         participants: 'Participantes',
-        splitBill: 'Dividir factura',
         requestMoney: 'Pedir dinero',
         sendMoney: 'Enviar dinero',
         pay: 'Pagar',
@@ -866,7 +870,9 @@ export default {
         localTime: 'Hora local',
     },
     newChatPage: {
+        createChat: 'Crear chat',
         createGroup: 'Crear grupo',
+        addToGroup: 'Añadir al grupo',
     },
     yearPickerPage: {
         year: 'Año',
@@ -1437,7 +1443,7 @@ export default {
             openShortcutDialog: 'Abre el cuadro de diálogo de métodos abreviados de teclado',
             escape: 'Diálogos de escape',
             search: 'Abrir diálogo de búsqueda',
-            newGroup: 'Nueva pantalla de grupo',
+            newChat: 'Nueva pantalla de chat',
             copy: 'Copiar comentario',
         },
     },

From d0ef97a5a3354cf25a2629325ba24a679f1b435a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 11:45:41 +0200
Subject: [PATCH 02/49] Assign icons to new tabs

---
 src/components/TabSelector/TabSelector.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 3e0ff7eb4e99..2d3901a237fe 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -29,12 +29,18 @@ const defaultProps = {
 
 const getIcon = (route) => {
     switch (route) {
+        case CONST.TAB.MANUAL:
+            return Expensicons.Pencil;
         case CONST.TAB.SCAN:
             return Expensicons.Receipt;
+        case CONST.TAB.NEW_CHAT:
+            return Expensicons.User;
+        case CONST.TAB.NEW_ROOM:
+            return Expensicons.Hashtag;
         case CONST.TAB.DISTANCE:
             return Expensicons.Car;
         default:
-            return Expensicons.Pencil;
+            throw new Error(`Route ${route} has no icon set.`);
     }
 };
 

From 3e61212d2bc8a441dfb872be6c446fbb32cd947d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 11:57:31 +0200
Subject: [PATCH 03/49] Checkbox can become a button

---
 src/components/OptionRow.js                   | 29 ++++++++++++++++++-
 src/components/OptionsList/BaseOptionsList.js |  3 ++
 .../OptionsSelector/BaseOptionsSelector.js    |  3 ++
 .../optionsSelectorPropTypes.js               |  9 ++++++
 4 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index adaa4457bbd9..e65b2cf5eda8 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -8,6 +8,7 @@ import * as StyleUtils from '../styles/StyleUtils';
 import optionPropTypes from './optionPropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import Button from './Button';
 import MultipleAvatars from './MultipleAvatars';
 import Hoverable from './Hoverable';
 import DisplayNames from './DisplayNames';
@@ -39,6 +40,15 @@ const propTypes = {
     /** Whether we should show the selected state */
     showSelectedState: PropTypes.bool,
 
+    /** Whether to show a button pill instead of a tickbox */
+    shouldShowSelectedStateAsButton: PropTypes.bool,
+
+    /** Text for button pill */
+    selectedStateButtonText: PropTypes.string,
+
+    /** Callback to fire when the multiple selector (tickbox or button) is clicked */
+    onSelectedStatePressed: PropTypes.func,
+
     /** Whether this item is selected */
     isSelected: PropTypes.bool,
 
@@ -65,6 +75,9 @@ const propTypes = {
 const defaultProps = {
     hoverStyle: styles.sidebarLinkHover,
     showSelectedState: false,
+    shouldShowSelectedStateAsButton: false,
+    selectedStateButtonText: 'Select',
+    onSelectedStatePressed: undefined,
     isSelected: false,
     boldStyle: false,
     showTitleTooltip: false,
@@ -248,7 +261,21 @@ class OptionRow extends Component {
                                             />
                                         </View>
                                     )}
-                                    {this.props.showSelectedState && <SelectCircle isChecked={this.props.isSelected} />}
+                                    {this.props.showSelectedState && (
+                                        <>
+                                            {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? (
+                                                <Button text={this.props.selectedStateButtonText} onPress={() => this.props.onSelectedStatePressed(this.props.option)} small />
+                                            ) : (
+                                                <PressableWithFeedback
+                                                    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
+                                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                    accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                >
+                                                    <SelectCircle isChecked={this.props.isSelected} />
+                                                </PressableWithFeedback>
+                                            )}
+                                        </>
+                                    )}
                                 </View>
                             </View>
                             {Boolean(this.props.option.customIcon) && (
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index e417234bb14a..e1647850de1f 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -170,6 +170,9 @@ class BaseOptionsList extends Component {
                 onSelectRow={this.props.onSelectRow}
                 isSelected={Boolean(_.find(this.props.selectedOptions, (option) => option.accountID === item.accountID))}
                 showSelectedState={this.props.canSelectMultipleOptions}
+                shouldShowSelectedStateAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
+                selectedStateButtonText={this.props.multipleOptionSelectorButtonText}
+                onSelectedStatePressed={this.props.onAddToSelection}
                 boldStyle={this.props.boldStyle}
                 isDisabled={isDisabled}
                 shouldHaveOptionSeparator={index > 0 && this.props.shouldHaveOptionSeparator}
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 7273616ea57e..c89edfe79473 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -340,6 +340,9 @@ class BaseOptionsSelector extends Component {
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
+                multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText}
+                onAddToSelection={this.props.onAddToSelection}
                 hideSectionHeaders={this.props.hideSectionHeaders}
                 headerMessage={this.props.headerMessage}
                 boldStyle={this.props.boldStyle}
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index 02b807bf66c1..55bcda743855 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -53,6 +53,15 @@ const propTypes = {
     /** Whether we can select multiple options */
     canSelectMultipleOptions: PropTypes.bool,
 
+    /** Whether to show a button pill instead of a standard tickbox */
+    shouldShowMultipleOptionSelectorAsButton: PropTypes.bool,
+
+    /** Text for button pill */
+    multipleOptionSelectorButtonText: PropTypes.string,
+
+    /** Callback to fire when the multiple selector (tickbox or button) is clicked */
+    onAddToSelection: PropTypes.func,
+
     /** Whether any section headers should be visible */
     hideSectionHeaders: PropTypes.bool,
 

From 31ba2188e5f77ddff42a83805b66f7945ae180d2 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 11:57:51 +0200
Subject: [PATCH 04/49] Routes and consts

---
 src/CONST.js                                        | 4 ++--
 src/ROUTES.js                                       | 6 ++----
 src/components/WalletStatementModal/index.js        | 2 +-
 src/components/WalletStatementModal/index.native.js | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index e7d2fa6f4d03..cf82df137662 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -279,8 +279,8 @@ const CONST = {
             },
             type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
         },
-        NEW_GROUP: {
-            descriptionKey: 'newGroup',
+        NEW_CHAT: {
+            descriptionKey: 'newChat',
             shortcutKey: 'K',
             modifiers: ['CTRL', 'SHIFT'],
             trigger: {
diff --git a/src/ROUTES.js b/src/ROUTES.js
index 9063cd275d68..1bc5ad98b206 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -7,7 +7,6 @@ import * as Url from './libs/Url';
 
 const REPORT = 'r';
 const IOU_REQUEST = 'request/new';
-const IOU_BILL = 'split/new';
 const IOU_SEND = 'send/new';
 const NEW_TASK = 'new/task';
 const SETTINGS_PERSONAL_DETAILS = 'settings/profile/personal-details';
@@ -62,8 +61,9 @@ export default {
     SETTINGS_2FA: 'settings/security/two-factor-auth',
     SETTINGS_STATUS,
     SETTINGS_STATUS_SET,
-    NEW_GROUP: 'new/group',
+    NEW: 'new',
     NEW_CHAT: 'new/chat',
+    NEW_ROOM: 'new/room',
     NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID?',
@@ -81,7 +81,6 @@ export default {
     CONCIERGE: 'concierge',
 
     IOU_REQUEST,
-    IOU_BILL,
     IOU_SEND,
 
     // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE
@@ -169,7 +168,6 @@ export default {
     WORKSPACE_INVOICES: 'workspace/:policyID/invoices',
     WORKSPACE_TRAVEL: 'workspace/:policyID/travel',
     WORKSPACE_MEMBERS: 'workspace/:policyID/members',
-    WORKSPACE_NEW_ROOM: 'workspace/new-room',
     getWorkspaceInitialRoute: (policyID) => `workspace/${policyID}`,
     getWorkspaceInviteRoute: (policyID) => `workspace/${policyID}/invite`,
     getWorkspaceInviteMessageRoute: (policyID) => `workspace/${policyID}/invite-message`,
diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index cd6ce783acc1..050c8bf22d40 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.js
@@ -37,7 +37,7 @@ class WalletStatementModal extends React.Component {
         }
 
         if (e.data.type === 'STATEMENT_NAVIGATE' && e.data.url) {
-            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
+            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
             const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => e.data.url.includes(iouRoute));
             if (navigateToIOURoute) {
                 Navigation.navigate(navigateToIOURoute);
diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js
index 86737da158c8..590431274da5 100644
--- a/src/components/WalletStatementModal/index.native.js
+++ b/src/components/WalletStatementModal/index.native.js
@@ -37,7 +37,7 @@ class WalletStatementModal extends React.Component {
         }
 
         if (type === 'STATEMENT_NAVIGATE' && url) {
-            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
+            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
             const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => url.includes(iouRoute));
             if (navigateToIOURoute) {
                 this.webview.stopLoading();

From 8e267410f407b4e65ddfb2c22f2812cab5a419c3 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 12:03:01 +0200
Subject: [PATCH 05/49] Simplified FAB

---
 .../FloatingActionButtonAndPopover.js         | 30 ++++---------------
 1 file changed, 5 insertions(+), 25 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index abade067f4fc..a6afc435824f 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -11,7 +11,6 @@ import NAVIGATORS from '../../../../NAVIGATORS';
 import SCREENS from '../../../../SCREENS';
 import Permissions from '../../../../libs/Permissions';
 import * as Policy from '../../../../libs/actions/Policy';
-import * as PolicyUtils from '../../../../libs/PolicyUtils';
 import PopoverMenu from '../../../../components/PopoverMenu';
 import CONST from '../../../../CONST';
 import FloatingActionButton from '../../../../components/FloatingActionButton';
@@ -175,8 +174,6 @@ function FloatingActionButtonAndPopover(props) {
         },
     }));
 
-    const workspaces = PolicyUtils.getActivePolicies(props.allPolicies);
-
     return (
         <View>
             <PopoverMenu
@@ -188,23 +185,11 @@ function FloatingActionButtonAndPopover(props) {
                 menuItems={[
                     {
                         icon: Expensicons.ChatBubble,
-                        text: props.translate('sidebarScreen.newChat'),
-                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.NEW_CHAT)),
-                    },
-                    {
-                        icon: Expensicons.Users,
-                        text: props.translate('sidebarScreen.newGroup'),
-                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.NEW_GROUP)),
+                        text: props.translate('sidebarScreen.fabNewChat'),
+                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(
+                            Permissions.canUsePolicyRooms(props.betas) ? ROUTES.NEW_CHAT : ROUTES.NEW
+                        )),
                     },
-                    ...(Permissions.canUsePolicyRooms(props.betas) && workspaces.length
-                        ? [
-                              {
-                                  icon: Expensicons.Hashtag,
-                                  text: props.translate('sidebarScreen.newRoom'),
-                                  onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_NEW_ROOM)),
-                              },
-                          ]
-                        : []),
                     ...(Permissions.canUseIOUSend(props.betas)
                         ? [
                               {
@@ -219,11 +204,6 @@ function FloatingActionButtonAndPopover(props) {
                         text: props.translate('iou.requestMoney'),
                         onSelected: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)),
                     },
-                    {
-                        icon: Expensicons.Receipt,
-                        text: props.translate('iou.splitBill'),
-                        onSelected: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.SPLIT)),
-                    },
                     ...(Permissions.canUseTasks(props.betas)
                         ? [
                               {
@@ -250,7 +230,7 @@ function FloatingActionButtonAndPopover(props) {
                 anchorRef={anchorRef}
             />
             <FloatingActionButton
-                accessibilityLabel={props.translate('sidebarScreen.fabNewChat')}
+                accessibilityLabel={props.translate('sidebarScreen.fabNewChatExplained')}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                 isActive={isCreateMenuActive}
                 ref={anchorRef}

From d0362c8e9cf214570323013c5dda3965a30762b1 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 12:04:29 +0200
Subject: [PATCH 06/49] Linking config for nested tab navigation

---
 src/libs/Navigation/linkingConfig.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 573eb71836d3..02488fa4c8a1 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -205,9 +205,6 @@ export default {
                             Workspace_Invite_Message: {
                                 path: ROUTES.WORKSPACE_INVITE_MESSAGE,
                             },
-                            Workspace_NewRoom: {
-                                path: ROUTES.WORKSPACE_NEW_ROOM,
-                            },
                             ReimbursementAccount: {
                                 path: ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN,
                                 exact: true,
@@ -251,7 +248,20 @@ export default {
                     },
                     NewChat: {
                         screens: {
-                            NewChat_Root: ROUTES.NEW_CHAT,
+                            NewChat_Root: {
+                                path: ROUTES.NEW,
+                                exact: true,
+                                screens: {
+                                    chat: {
+                                        path: ROUTES.NEW_CHAT,
+                                        exact: true,
+                                    },
+                                    room: {
+                                        path: ROUTES.NEW_ROOM,
+                                        exact: true,
+                                    },
+                                },
+                            },
                         },
                     },
                     NewTask: {

From 0e4647662a678aa9d8a345350a0342a1cf2a6cf5 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 12:06:53 +0200
Subject: [PATCH 07/49] Adjust stack navigators

---
 .../AppNavigator/ModalStackNavigators.js      | 22 ++-----------------
 .../Navigators/RightModalNavigator.js         |  8 -------
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index d1ac97d09e9c..161abf54cc21 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -238,21 +238,11 @@ const SearchModalStackNavigator = createModalStackNavigator([
     },
 ]);
 
-const NewGroupModalStackNavigator = createModalStackNavigator([
-    {
-        getComponent: () => {
-            const NewGroupPage = require('../../../pages/NewGroupPage').default;
-            return NewGroupPage;
-        },
-        name: 'NewGroup_Root',
-    },
-]);
-
 const NewChatModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
-            const NewChatPage = require('../../../pages/NewChatPage').default;
-            return NewChatPage;
+            const NewChatSelectorPage = require('../../../pages/NewChatSelectorPage').default;
+            return NewChatSelectorPage;
         },
         name: 'NewChat_Root',
     },
@@ -613,13 +603,6 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Workspace_Invite_Message',
     },
-    {
-        getComponent: () => {
-            const WorkspaceNewRoomPage = require('../../../pages/workspace/WorkspaceNewRoomPage').default;
-            return WorkspaceNewRoomPage;
-        },
-        name: 'Workspace_NewRoom',
-    },
     {
         getComponent: () => {
             const ReimbursementAccountPage = require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default;
@@ -732,7 +715,6 @@ export {
     ReportWelcomeMessageModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     SearchModalStackNavigator,
-    NewGroupModalStackNavigator,
     NewChatModalStackNavigator,
     NewTaskModalStackNavigator,
     SettingsModalStackNavigator,
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index 8e3f769ed13f..f4af197e8a64 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -17,14 +17,6 @@ function RightModalNavigator() {
                 name="NewChat"
                 component={ModalStackNavigators.NewChatModalStackNavigator}
             />
-            <Stack.Screen
-                name="NewGroup"
-                component={ModalStackNavigators.NewGroupModalStackNavigator}
-                options={{
-                    // Disable animation for this screen because it causes an animation glitch when using shortcuts
-                    animationEnabled: false,
-                }}
-            />
             <Stack.Screen
                 name="Search"
                 component={ModalStackNavigators.SearchModalStackNavigator}

From 725ae242f6a38891c8837266f584d1eb281fa514 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 12:08:33 +0200
Subject: [PATCH 08/49] Shortcut for new chat modal

---
 .../Navigation/AppNavigator/AuthScreens.js     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 7317306cdbe6..c621a873a7f8 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -159,7 +159,7 @@ class AuthScreens extends React.Component {
         Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
 
         const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH;
-        const groupShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_GROUP;
+        const chatShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_CHAT;
 
         // Listen for the key K being pressed so that focus can be given to
         // the chat switcher, or new group chat
@@ -178,18 +178,18 @@ class AuthScreens extends React.Component {
             searchShortcutConfig.modifiers,
             true,
         );
-        this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(
-            groupShortcutConfig.shortcutKey,
+        this.unsubscribeChatShortcut = KeyboardShortcut.subscribe(
+            chatShortcutConfig.shortcutKey,
             () => {
                 Modal.close(() => {
-                    if (Navigation.isActiveRoute(ROUTES.NEW_GROUP)) {
+                    if (Navigation.isActiveRoute(ROUTES.NEW_CHAT)) {
                         return;
                     }
-                    Navigation.navigate(ROUTES.NEW_GROUP);
+                    Navigation.navigate(ROUTES.NEW_CHAT);
                 });
             },
-            groupShortcutConfig.descriptionKey,
-            groupShortcutConfig.modifiers,
+            chatShortcutConfig.descriptionKey,
+            chatShortcutConfig.modifiers,
             true,
         );
     }
@@ -202,8 +202,8 @@ class AuthScreens extends React.Component {
         if (this.unsubscribeSearchShortcut) {
             this.unsubscribeSearchShortcut();
         }
-        if (this.unsubscribeGroupShortcut) {
-            this.unsubscribeGroupShortcut();
+        if (this.unsubscribeChatShortcut) {
+            this.unsubscribeChatShortcut();
         }
         Session.cleanupSession();
         clearInterval(this.interval);

From cb8d7515e63c20670c464e31faf0b1ee62d0b123 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 12:15:29 +0200
Subject: [PATCH 09/49] New Chat modal with tabs

---
 src/pages/NewChatPage.js                    | 79 ++++++++---------
 src/pages/NewChatSelectorPage.js            | 72 ++++++++++++++++
 src/pages/NewGroupPage.js                   | 16 ----
 src/pages/workspace/WorkspaceNewRoomPage.js | 93 +++++++++------------
 4 files changed, 147 insertions(+), 113 deletions(-)
 create mode 100755 src/pages/NewChatSelectorPage.js
 delete mode 100755 src/pages/NewGroupPage.js

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 4a753c8632bd..49d9f0e0a0d7 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -11,7 +11,6 @@ import styles from '../styles/styles';
 import * as Report from '../libs/actions/Report';
 import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
-import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import * as Browser from '../libs/Browser';
@@ -20,9 +19,6 @@ import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
 
 const propTypes = {
-    /** Whether screen is used to create group chat */
-    isGroupChat: PropTypes.bool,
-
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -38,7 +34,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    isGroupChat: false,
     betas: [],
     personalDetails: {},
     reports: {},
@@ -66,18 +61,16 @@ function NewChatPage(props) {
         const sectionsList = [];
         let indexOffset = 0;
 
-        if (props.isGroupChat) {
-            sectionsList.push({
-                title: undefined,
-                data: selectedOptions,
-                shouldShow: !_.isEmpty(selectedOptions),
-                indexOffset,
-            });
-            indexOffset += selectedOptions.length;
+        sectionsList.push({
+            title: undefined,
+            data: selectedOptions,
+            shouldShow: !_.isEmpty(selectedOptions),
+            indexOffset,
+        });
+        indexOffset += selectedOptions.length;
 
-            if (maxParticipantsReached) {
-                return sectionsList;
-            }
+        if (maxParticipantsReached) {
+            return sectionsList;
         }
 
         sectionsList.push({
@@ -107,7 +100,7 @@ function NewChatPage(props) {
 
         return sectionsList;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, props.isGroupChat, selectedOptions]);
+    }, [filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, selectedOptions]);
 
     /**
      * Removes a selected option from list if already selected. If not already selected add this option to the list.
@@ -154,9 +147,6 @@ function NewChatPage(props) {
      * or navigates to the existing chat if one with those participants already exists.
      */
     const createGroup = () => {
-        if (!props.isGroupChat) {
-            return;
-        }
         const logins = _.pluck(selectedOptions, 'login');
         if (logins.length < 1) {
             return;
@@ -176,38 +166,39 @@ function NewChatPage(props) {
         setFilteredRecentReports(recentReports);
         setFilteredPersonalDetails(personalDetails);
         setFilteredUserToInvite(userToInvite);
-        // props.betas and props.isGroupChat are not added as dependencies since they don't change during the component lifecycle
+        // props.betas is not added as dependency since it doesn't change during the component lifecycle
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.reports, props.personalDetails, searchTerm]);
 
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
+            includePaddingTop={false}
             shouldEnableMaxHeight
         >
-            {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
-                <>
-                    <HeaderWithBackButton title={props.isGroupChat ? props.translate('sidebarScreen.newGroup') : props.translate('sidebarScreen.newChat')} />
-                    <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
-                        <OptionsSelector
-                            canSelectMultipleOptions={props.isGroupChat}
-                            sections={sections}
-                            selectedOptions={selectedOptions}
-                            value={searchTerm}
-                            onSelectRow={(option) => (props.isGroupChat ? toggleOption(option) : createChat(option))}
-                            onChangeText={setSearchTerm}
-                            headerMessage={headerMessage}
-                            boldStyle
-                            shouldFocusOnSelectRow={props.isGroupChat && !Browser.isMobile()}
-                            shouldShowConfirmButton={props.isGroupChat}
-                            shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady}
-                            confirmButtonText={props.translate('newChatPage.createGroup')}
-                            onConfirmSelection={createGroup}
-                            textInputLabel={props.translate('optionsSelector.nameEmailOrPhoneNumber')}
-                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                        />
-                    </View>
-                </>
+            {({safeAreaPaddingBottomStyle}) => (
+                <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
+                    <OptionsSelector
+                        canSelectMultipleOptions
+                        shouldShowMultipleOptionSelectorAsButton
+                        multipleOptionSelectorButtonText={props.translate('newChatPage.addToGroup')}
+                        onAddToSelection={(option) => toggleOption(option)}
+                        sections={sections}
+                        selectedOptions={selectedOptions}
+                        value={searchTerm}
+                        onSelectRow={(option) => createChat(option)}
+                        onChangeText={setSearchTerm}
+                        headerMessage={headerMessage}
+                        boldStyle
+                        shouldFocusOnSelectRow={!Browser.isMobile()}
+                        shouldShowOptions={isOptionsDataReady}
+                        shouldShowConfirmButton
+                        confirmButtonText={selectedOptions.length > 1 ? props.translate('newChatPage.createGroup') : props.translate('newChatPage.createChat')}
+                        onConfirmSelection={createGroup}
+                        textInputLabel={props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                        safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                    />
+                </View>
             )}
         </ScreenWrapper>
     );
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
new file mode 100755
index 000000000000..4e33f098bd17
--- /dev/null
+++ b/src/pages/NewChatSelectorPage.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import OnyxTabNavigator, {TopTab} from '../libs/Navigation/OnyxTabNavigator';
+import TabSelector from '../components/TabSelector/TabSelector';
+import Navigation from '../libs/Navigation/Navigation';
+import Permissions from '../libs/Permissions';
+import NewChatPage from './NewChatPage';
+import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
+import CONST from '../CONST';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
+import ScreenWrapper from '../components/ScreenWrapper';
+import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import compose from '../libs/compose';
+
+const propTypes = {
+    ...windowDimensionsPropTypes,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    betas: [],
+    personalDetails: {},
+    reports: {},
+};
+
+function NewChatSelectorPage(props) {
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <>
+                <HeaderWithBackButton
+                    title={props.translate('sidebarScreen.fabNewChat')}
+                    onBackButtonPress={Navigation.dismissModal}
+                />
+                {Permissions.canUsePolicyRooms(props.betas) ? (
+                    <OnyxTabNavigator
+                        id={CONST.TAB.NEW_CHAT_TAB_ID}
+                        tabBar={({state, navigation}) => (
+                            <TabSelector
+                                state={state}
+                                navigation={navigation}
+                            />
+                        )}
+                    >
+                        <TopTab.Screen
+                            name={CONST.TAB.NEW_CHAT}
+                            component={NewChatPage}
+                        />
+                        <TopTab.Screen
+                            name={CONST.TAB.NEW_ROOM}
+                            component={WorkspaceNewRoomPage}
+                        />
+                    </OnyxTabNavigator>
+                ) : (
+                    <NewChatPage />
+                )}
+            </>
+        </ScreenWrapper>
+    );
+}
+
+NewChatSelectorPage.propTypes = propTypes;
+NewChatSelectorPage.defaultProps = defaultProps;
+NewChatSelectorPage.displayName = 'NewChatPage';
+
+export default compose(
+    withLocalize,
+    withWindowDimensions,
+)(NewChatSelectorPage);
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
deleted file mode 100755
index 63f90016e63e..000000000000
--- a/src/pages/NewGroupPage.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import NewChatPage from './NewChatPage';
-
-function NewGroupPage(props) {
-    return (
-        <NewChatPage
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            isGroupChat
-        />
-    );
-}
-
-NewGroupPage.displayName = 'NewGroupPage';
-
-export default NewGroupPage;
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 0321394b37bc..77110713e40e 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -5,8 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import * as Report from '../../libs/actions/Report';
 import useLocalize from '../../hooks/useLocalize';
-import HeaderWithBackButton from '../../components/HeaderWithBackButton';
-import ScreenWrapper from '../../components/ScreenWrapper';
 import styles from '../../styles/styles';
 import RoomNameInput from '../../components/RoomNameInput';
 import Picker from '../../components/Picker';
@@ -19,7 +17,6 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as PolicyUtils from '../../libs/PolicyUtils';
 import Form from '../../components/Form';
-import shouldDelayFocus from '../../libs/shouldDelayFocus';
 import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 
@@ -140,60 +137,50 @@ function WorkspaceNewRoomPage(props) {
     );
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            shouldEnablePickerAvoiding={false}
-        >
-            <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}>
-                <HeaderWithBackButton title={translate('newRoomPage.newRoom')} />
-                <Form
-                    formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-                    submitButtonText={translate('newRoomPage.createRoom')}
-                    scrollContextEnabled
-                    style={[styles.mh5, styles.flexGrow1]}
-                    validate={validate}
-                    onSubmit={submit}
-                    enabledWhenOffline
-                >
-                    <View style={styles.mb5}>
-                        <RoomNameInput
-                            inputID="roomName"
-                            autoFocus
-                            shouldDelayFocus={shouldDelayFocus}
-                        />
-                    </View>
-                    <View style={styles.mb2}>
-                        <Picker
-                            inputID="policyID"
-                            label={translate('workspace.common.workspace')}
-                            placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
-                            items={workspaceOptions}
-                            onValueChange={setPolicyID}
-                        />
-                    </View>
-                    {isPolicyAdmin && (
-                        <View style={styles.mb2}>
-                            <Picker
-                                inputID="writeCapability"
-                                label={translate('writeCapabilityPage.label')}
-                                items={writeCapabilityOptions}
-                                defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
-                            />
-                        </View>
-                    )}
+        <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}>
+            <Form
+                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                submitButtonText={translate('newRoomPage.createRoom')}
+                scrollContextEnabled
+                style={[styles.mh5, styles.flexGrow1]}
+                validate={validate}
+                onSubmit={submit}
+                enabledWhenOffline
+            >
+                <View style={styles.mb5}>
+                    <RoomNameInput inputID="roomName" />
+                </View>
+                <View style={styles.mb2}>
+                    <Picker
+                        inputID="policyID"
+                        label={translate('workspace.common.workspace')}
+                        placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
+                        items={workspaceOptions}
+                        onValueChange={setPolicyID}
+                    />
+                </View>
+                {isPolicyAdmin && (
                     <View style={styles.mb2}>
                         <Picker
-                            inputID="visibility"
-                            label={translate('newRoomPage.visibility')}
-                            items={visibilityOptions}
-                            onValueChange={setVisibility}
-                            defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
+                            inputID="writeCapability"
+                            label={translate('writeCapabilityPage.label')}
+                            items={writeCapabilityOptions}
+                            defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
                         />
                     </View>
-                    <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                </Form>
-            </FullPageNotFoundView>
-        </ScreenWrapper>
+                )}
+                <View style={styles.mb2}>
+                    <Picker
+                        inputID="visibility"
+                        label={translate('newRoomPage.visibility')}
+                        items={visibilityOptions}
+                        onValueChange={setVisibility}
+                        defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
+                    />
+                </View>
+                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+            </Form>
+        </FullPageNotFoundView>
     );
 }
 

From 6bcc194bcea130b8ee9f202d46e5b17b0f2fa882 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 13:54:44 +0200
Subject: [PATCH 10/49] Money Request split and request unified

---
 .../iou/steps/MoneyRequestConfirmPage.js      |   2 +-
 .../MoneyRequestParticipantsPage.js           |  75 ++----
 .../MoneyRequestParticipantsSelector.js       | 251 ++++++++++--------
 .../MoneyRequestParticipantsSplitSelector.js  | 206 --------------
 4 files changed, 169 insertions(+), 365 deletions(-)
 delete mode 100755 src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js

diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index a81e3a8bf825..00d20b22d12b 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -226,7 +226,7 @@ function MoneyRequestConfirmPage(props) {
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                     <HeaderWithBackButton
-                        title={props.translate('iou.cash')}
+                        title={iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT ? props.translate('iou.split') : props.translate('tabSelector.manual')}
                         onBackButtonPress={navigateBack}
                     />
                     <MoneyRequestConfirmationList
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index d6d069dc0329..6bcd4df2a315 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -1,12 +1,12 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import _ from 'underscore';
 import CONST from '../../../../CONST';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import ROUTES from '../../../../ROUTES';
-import MoneyRequestParticipantsSplitSelector from './MoneyRequestParticipantsSplitSelector';
 import MoneyRequestParticipantsSelector from './MoneyRequestParticipantsSelector';
 import styles from '../../../../styles/styles';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
@@ -44,45 +44,28 @@ const defaultProps = {
     },
 };
 
-function MoneyRequestParticipantsPage(props) {
-    const prevMoneyRequestId = useRef(props.iou.id);
-    const iouType = useRef(lodashGet(props.route, 'params.iouType', ''));
-    const reportID = useRef(lodashGet(props.route, 'params.reportID', ''));
+function MoneyRequestParticipantsPage({iou, translate, route}) {
+    const iouType = useRef(lodashGet(route, 'params.iouType', ''));
+    const reportID = useRef(lodashGet(route, 'params.reportID', ''));
+    const [headerTitle, setHeaderTitle] = useState();
 
-    const navigateToNextStep = () => {
-        Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, reportID.current));
+    useEffect(() => {
+        setHeaderTitle(
+            _.isEmpty(iou.participants) ?
+            translate('tabSelector.manual') :
+            translate('iou.split')
+        )
+    }, [iou.participants, translate])
+
+    const navigateToNextStep = (moneyRequestType) => {
+        IOU.setMoneyRequestId(moneyRequestType);
+        Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(moneyRequestType, reportID.current));
     };
 
     const navigateBack = (forceFallback = false) => {
         Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType.current, reportID.current), forceFallback);
     };
 
-    useEffect(() => {
-        // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (prevMoneyRequestId.current !== props.iou.id) {
-            // The ID is cleared on completing a request. In that case, we will do nothing
-            if (props.iou.id) {
-                navigateBack(true);
-            }
-            return;
-        }
-
-        // Reset the money request Onyx if the ID in Onyx does not match the ID from params
-        const moneyRequestId = `${iouType.current}${reportID.current}`;
-        const shouldReset = props.iou.id !== moneyRequestId;
-        if (shouldReset) {
-            IOU.resetMoneyRequestInfo(moneyRequestId);
-        }
-
-        if ((props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset) {
-            navigateBack(true);
-        }
-
-        return () => {
-            prevMoneyRequestId.current = props.iou.id;
-        };
-    }, [props.iou.amount, props.iou.id, props.iou.receiptPath]);
-
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -91,24 +74,16 @@ function MoneyRequestParticipantsPage(props) {
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={styles.flex1}>
                     <HeaderWithBackButton
-                        title={props.translate('iou.cash')}
+                        title={headerTitle}
                         onBackButtonPress={navigateBack}
                     />
-                    {iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT ? (
-                        <MoneyRequestParticipantsSplitSelector
-                            onStepComplete={navigateToNextStep}
-                            participants={props.iou.participants}
-                            onAddParticipants={IOU.setMoneyRequestParticipants}
-                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                        />
-                    ) : (
-                        <MoneyRequestParticipantsSelector
-                            onStepComplete={navigateToNextStep}
-                            onAddParticipants={IOU.setMoneyRequestParticipants}
-                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                            iouType={iouType.current}
-                        />
-                    )}
+                    <MoneyRequestParticipantsSelector
+                        participants={iou.participants}
+                        onAddParticipants={IOU.setMoneyRequestParticipants}
+                        navigateToRequest={() => navigateToNextStep(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)}
+                        navigateToSplit={() => navigateToNextStep(CONST.IOU.MONEY_REQUEST_TYPE.SPLIT)}
+                        safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                    />
                 </View>
             )}
         </ScreenWrapper>
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 9f59c55f6337..da688dd9024a 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -1,12 +1,15 @@
-import React, {Component} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import styles from '../../../../styles/styles';
+import OptionsSelector from '../../../../components/OptionsSelector';
 import * as OptionsListUtils from '../../../../libs/OptionsListUtils';
 import * as ReportUtils from '../../../../libs/ReportUtils';
-import OptionsSelector from '../../../../components/OptionsSelector';
-import ONYXKEYS from '../../../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import * as Browser from '../../../../libs/Browser';
 import compose from '../../../../libs/compose';
 import CONST from '../../../../CONST';
 import personalDetailsPropType from '../../../personalDetailsPropType';
@@ -16,12 +19,26 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** Callback to inform parent modal of success */
-    onStepComplete: PropTypes.func.isRequired,
+    /** Callback to request parent modal to go to next step, which should be split */
+    navigateToRequest: PropTypes.func.isRequired,
+
+    /** Callback to request parent modal to go to next step, which should be split */
+    navigateToSplit: PropTypes.func.isRequired,
 
     /** Callback to add participants in MoneyRequestModal */
     onAddParticipants: PropTypes.func.isRequired,
 
+    /** Selected participants from MoneyRequestModal with login */
+    participants: PropTypes.arrayOf(
+        PropTypes.shape({
+            accountID: PropTypes.number,
+            login: PropTypes.string,
+            isPolicyExpenseChat: PropTypes.bool,
+            isOwnPolicyExpenseChat: PropTypes.bool,
+            selected: PropTypes.bool,
+        }),
+    ),
+
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
 
@@ -31,151 +48,172 @@ const propTypes = {
     /** padding bottom style of safe area */
     safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
-    /** The type of IOU report, i.e. bill, request, send */
-    iouType: PropTypes.string.isRequired,
-
-    /** The current tab we have navigated to in the request modal. String that corresponds to the request type. */
-    selectedTab: PropTypes.oneOf([CONST.TAB.DISTANCE, CONST.TAB.MANUAL, CONST.TAB.SCAN]).isRequired,
-
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
+    participants: [],
     safeAreaPaddingBottomStyle: {},
     personalDetails: {},
     reports: {},
     betas: [],
 };
 
-class MoneyRequestParticipantsSelector extends Component {
-    constructor(props) {
-        super(props);
-
-        this.addSingleParticipant = this.addSingleParticipant.bind(this);
-        this.updateOptionsWithSearchTerm = this.updateOptionsWithSearchTerm.bind(this);
-
-        const {recentReports, personalDetails, userToInvite} = this.getRequestOptions();
-
-        this.state = {
-            recentReports,
-            personalDetails,
-            userToInvite,
-            searchTerm: '',
-        };
-    }
-
-    componentDidUpdate(prevProps) {
-        if (_.isEqual(prevProps.reports, this.props.reports) && _.isEqual(prevProps.personalDetails, this.props.personalDetails)) {
-            return;
-        }
-        this.updateOptionsWithSearchTerm(this.state.searchTerm);
-    }
-
-    /**
-     * @param {string} searchTerm
-     * @returns {Object}
-     */
-    getRequestOptions(searchTerm = '') {
-        return OptionsListUtils.getNewChatOptions(
-            this.props.reports,
-            this.props.personalDetails,
-            this.props.betas,
-            searchTerm,
-            [],
-            CONST.EXPENSIFY_EMAILS,
-
-            // If we are using this component in the "Request money" flow then we pass the includeOwnedWorkspaceChats argument so that the current user
-            // sees the option to request money from their admin on their own Workspace Chat.
-            this.props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
-
-            // We don't want to include any P2P options like personal details or reports that are not workspace chats for certain features.
-            this.props.selectedTab !== CONST.TAB.DISTANCE,
-        );
-    }
+function MoneyRequestParticipantsSplitSelector({
+    betas,
+    participants,
+    personalDetails,
+    reports,
+    translate,
+    navigateToRequest,
+    navigateToSplit,
+    onAddParticipants,
+    safeAreaPaddingBottomStyle
+}) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [newChatOptions, setNewChatOptions] = useState({
+        recentReports: [],
+        personalDetails: [],
+        userToInvite: null,
+    });
+
+    const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
 
     /**
      * Returns the sections needed for the OptionsSelector
      *
+     * @param {Boolean} maxParticipantsReached
      * @returns {Array}
      */
-    getSections() {
-        const sections = [];
+    const sections = useMemo(() => {
+        const newSections = [];
         let indexOffset = 0;
 
-        sections.push({
-            title: this.props.translate('common.recents'),
-            data: this.state.recentReports,
-            shouldShow: !_.isEmpty(this.state.recentReports),
+        newSections.push({
+            title: undefined,
+            data: OptionsListUtils.getParticipantsOptions(participants, personalDetails),
+            shouldShow: true,
             indexOffset,
         });
-        indexOffset += this.state.recentReports.length;
+        indexOffset += participants.length;
+
+        if (maxParticipantsReached) {
+            return newSections;
+        }
 
-        sections.push({
-            title: this.props.translate('common.contacts'),
-            data: this.state.personalDetails,
-            shouldShow: !_.isEmpty(this.state.personalDetails),
+        newSections.push({
+            title: translate('common.recents'),
+            data: newChatOptions.recentReports,
+            shouldShow: !_.isEmpty(newChatOptions.recentReports),
             indexOffset,
         });
-        indexOffset += this.state.personalDetails.length;
+        indexOffset += newChatOptions.recentReports.length;
 
-        if (this.state.userToInvite && !OptionsListUtils.isCurrentUser(this.state.userToInvite)) {
-            sections.push({
+        newSections.push({
+            title: translate('common.contacts'),
+            data: newChatOptions.personalDetails,
+            shouldShow: !_.isEmpty(newChatOptions.personalDetails),
+            indexOffset,
+        });
+        indexOffset += newChatOptions.personalDetails.length;
+
+        if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
+            newSections.push({
                 undefined,
-                data: [this.state.userToInvite],
+                data: [newChatOptions.userToInvite],
                 shouldShow: true,
                 indexOffset,
             });
         }
 
-        return sections;
-    }
-
-    updateOptionsWithSearchTerm(searchTerm = '') {
-        const {recentReports, personalDetails, userToInvite} = this.getRequestOptions(searchTerm);
-        this.setState({
-            searchTerm,
-            recentReports,
-            userToInvite,
-            personalDetails,
-        });
-    }
+        return newSections;
+    }, [maxParticipantsReached, newChatOptions, participants, personalDetails, translate]);
 
     /**
      * Adds a single participant to the request
      *
      * @param {Object} option
      */
-    addSingleParticipant(option) {
-        this.props.onAddParticipants([{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true}]);
-        this.props.onStepComplete();
+    const addSingleParticipant = (option) => {
+        onAddParticipants([{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true}]);
+        navigateToRequest();
     }
 
-    render() {
-        const headerMessage = OptionsListUtils.getHeaderMessage(
-            this.state.personalDetails.length + this.state.recentReports.length !== 0,
-            Boolean(this.state.userToInvite),
-            this.state.searchTerm,
-        );
-        const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails);
+    /**
+     * Removes a selected option from list if already selected. If not already selected add this option to the list.
+     * @param {Object} option
+     */
+    const addParticipantToSelection = useCallback(
+        (option) => {
+            const isOptionInList = _.some(participants, (selectedOption) => selectedOption.accountID === option.accountID);
+
+            let newSelectedOptions;
+
+            if (isOptionInList) {
+                newSelectedOptions = _.reject(participants, (selectedOption) => selectedOption.accountID === option.accountID);
+            } else {
+                newSelectedOptions = [...participants, {accountID: option.accountID, login: option.login, selected: true}];
+            }
+
+            onAddParticipants(newSelectedOptions);
+
+            const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, isOptionInList ? searchTerm : '', newSelectedOptions, CONST.EXPENSIFY_EMAILS);
+
+            setNewChatOptions({
+                recentReports: chatOptions.recentReports,
+                personalDetails: chatOptions.personalDetails,
+                userToInvite: chatOptions.userToInvite,
+            });
+        },
+        [searchTerm, participants, onAddParticipants, reports, personalDetails, betas, setNewChatOptions],
+    );
+
+    const headerMessage = OptionsListUtils.getHeaderMessage(
+        newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
+        Boolean(newChatOptions.userToInvite),
+        searchTerm,
+        maxParticipantsReached,
+    );
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
+
+    useEffect(() => {
+        const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, participants, CONST.EXPENSIFY_EMAILS);
+        setNewChatOptions({
+            recentReports: chatOptions.recentReports,
+            personalDetails: chatOptions.personalDetails,
+            userToInvite: chatOptions.userToInvite,
+        });
+    }, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions]);
 
-        return (
+    return (
+        <View style={[styles.flex1, styles.w100, participants.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
             <OptionsSelector
-                sections={this.getSections()}
-                value={this.state.searchTerm}
-                onSelectRow={this.addSingleParticipant}
-                onChangeText={this.updateOptionsWithSearchTerm}
+                canSelectMultipleOptions
+                shouldShowMultipleOptionSelectorAsButton
+                multipleOptionSelectorButtonText={translate('iou.split')}
+                onAddToSelection={addParticipantToSelection}
+                sections={sections}
+                selectedOptions={participants}
+                value={searchTerm}
+                onSelectRow={addSingleParticipant}
+                onChangeText={setSearchTerm}
                 headerMessage={headerMessage}
-                textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                 boldStyle
-                safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
+                shouldShowConfirmButton
+                confirmButtonText={translate('iou.addToSplit')}
+                onConfirmSelection={navigateToSplit}
+                textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                 shouldShowOptions={isOptionsDataReady}
+                shouldFocusOnSelectRow={!Browser.isMobile()}
             />
-        );
-    }
+        </View>
+    );
 }
 
-MoneyRequestParticipantsSelector.propTypes = propTypes;
-MoneyRequestParticipantsSelector.defaultProps = defaultProps;
+MoneyRequestParticipantsSplitSelector.propTypes = propTypes;
+MoneyRequestParticipantsSplitSelector.defaultProps = defaultProps;
+MoneyRequestParticipantsSplitSelector.displayName = 'MoneyRequestParticipantsSplitSelector';
 
 export default compose(
     withLocalize,
@@ -189,8 +227,5 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
-        selectedTab: {
-            key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
-        },
     }),
-)(MoneyRequestParticipantsSelector);
+)(MoneyRequestParticipantsSplitSelector);
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js
deleted file mode 100755
index 2ebddbdd8741..000000000000
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
-import {withOnyx} from 'react-native-onyx';
-import ONYXKEYS from '../../../../ONYXKEYS';
-import styles from '../../../../styles/styles';
-import OptionsSelector from '../../../../components/OptionsSelector';
-import * as OptionsListUtils from '../../../../libs/OptionsListUtils';
-import * as ReportUtils from '../../../../libs/ReportUtils';
-import CONST from '../../../../CONST';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import compose from '../../../../libs/compose';
-import personalDetailsPropType from '../../../personalDetailsPropType';
-import * as Browser from '../../../../libs/Browser';
-import reportPropTypes from '../../../reportPropTypes';
-
-const propTypes = {
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
-    /** Callback to inform parent modal of success */
-    onStepComplete: PropTypes.func.isRequired,
-
-    /** Callback to add participants in MoneyRequestModal */
-    onAddParticipants: PropTypes.func.isRequired,
-
-    /** Selected participants from MoneyRequestModal with login */
-    participants: PropTypes.arrayOf(
-        PropTypes.shape({
-            accountID: PropTypes.number,
-            login: PropTypes.string,
-            isPolicyExpenseChat: PropTypes.bool,
-            isOwnPolicyExpenseChat: PropTypes.bool,
-            selected: PropTypes.bool,
-        }),
-    ),
-
-    /** All of the personal details for everyone */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
-    /** All reports shared with the user */
-    reports: PropTypes.objectOf(reportPropTypes),
-
-    /** padding bottom style of safe area */
-    safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    participants: [],
-    betas: [],
-    personalDetails: {},
-    reports: {},
-    safeAreaPaddingBottomStyle: {},
-};
-
-function MoneyRequestParticipantsSplitSelector({betas, participants, personalDetails, reports, translate, onAddParticipants, onStepComplete, safeAreaPaddingBottomStyle}) {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [newChatOptions, setNewChatOptions] = useState({
-        recentReports: [],
-        personalDetails: [],
-        userToInvite: null,
-    });
-
-    const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
-
-    /**
-     * Returns the sections needed for the OptionsSelector
-     *
-     * @param {Boolean} maxParticipantsReached
-     * @returns {Array}
-     */
-    const sections = useMemo(() => {
-        const newSections = [];
-        let indexOffset = 0;
-
-        newSections.push({
-            title: undefined,
-            data: OptionsListUtils.getParticipantsOptions(participants, personalDetails),
-            shouldShow: true,
-            indexOffset,
-        });
-        indexOffset += participants.length;
-
-        if (maxParticipantsReached) {
-            return newSections;
-        }
-
-        newSections.push({
-            title: translate('common.recents'),
-            data: newChatOptions.recentReports,
-            shouldShow: !_.isEmpty(newChatOptions.recentReports),
-            indexOffset,
-        });
-        indexOffset += newChatOptions.recentReports.length;
-
-        newSections.push({
-            title: translate('common.contacts'),
-            data: newChatOptions.personalDetails,
-            shouldShow: !_.isEmpty(newChatOptions.personalDetails),
-            indexOffset,
-        });
-        indexOffset += newChatOptions.personalDetails.length;
-
-        if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
-            newSections.push({
-                undefined,
-                data: [newChatOptions.userToInvite],
-                shouldShow: true,
-                indexOffset,
-            });
-        }
-
-        return newSections;
-    }, [maxParticipantsReached, newChatOptions, participants, personalDetails, translate]);
-
-    /**
-     * Removes a selected option from list if already selected. If not already selected add this option to the list.
-     * @param {Object} option
-     */
-    const toggleOption = useCallback(
-        (option) => {
-            const isOptionInList = _.some(participants, (selectedOption) => selectedOption.accountID === option.accountID);
-
-            let newSelectedOptions;
-
-            if (isOptionInList) {
-                newSelectedOptions = _.reject(participants, (selectedOption) => selectedOption.accountID === option.accountID);
-            } else {
-                newSelectedOptions = [...participants, {accountID: option.accountID, login: option.login, selected: true, searchText: option.searchText}];
-            }
-
-            onAddParticipants(newSelectedOptions);
-
-            const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, isOptionInList ? searchTerm : '', newSelectedOptions, CONST.EXPENSIFY_EMAILS);
-
-            setNewChatOptions({
-                recentReports: chatOptions.recentReports,
-                personalDetails: chatOptions.personalDetails,
-                userToInvite: chatOptions.userToInvite,
-            });
-        },
-        [searchTerm, participants, onAddParticipants, reports, personalDetails, betas, setNewChatOptions],
-    );
-
-    const headerMessage = OptionsListUtils.getHeaderMessage(
-        newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
-        Boolean(newChatOptions.userToInvite),
-        searchTerm,
-        maxParticipantsReached,
-        _.some(participants, (participant) => participant.searchText.toLowerCase().includes(searchTerm.toLowerCase())),
-    );
-    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
-
-    useEffect(() => {
-        const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, participants, CONST.EXPENSIFY_EMAILS);
-        setNewChatOptions({
-            recentReports: chatOptions.recentReports,
-            personalDetails: chatOptions.personalDetails,
-            userToInvite: chatOptions.userToInvite,
-        });
-    }, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions]);
-
-    return (
-        <View style={[styles.flex1, styles.w100, participants.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
-            <OptionsSelector
-                canSelectMultipleOptions
-                sections={sections}
-                selectedOptions={participants}
-                value={searchTerm}
-                onSelectRow={toggleOption}
-                onChangeText={setSearchTerm}
-                headerMessage={headerMessage}
-                boldStyle
-                shouldShowConfirmButton
-                confirmButtonText={translate('common.next')}
-                onConfirmSelection={onStepComplete}
-                textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
-                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                shouldShowOptions={isOptionsDataReady}
-                shouldFocusOnSelectRow={!Browser.isMobile()}
-            />
-        </View>
-    );
-}
-
-MoneyRequestParticipantsSplitSelector.propTypes = propTypes;
-MoneyRequestParticipantsSplitSelector.defaultProps = defaultProps;
-MoneyRequestParticipantsSplitSelector.displayName = 'MoneyRequestParticipantsSplitSelector';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-        reports: {
-            key: ONYXKEYS.COLLECTION.REPORT,
-        },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-    }),
-)(MoneyRequestParticipantsSplitSelector);

From cd2780a727a606fa69b110fe8bcdfba3ac070bfe Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 14:04:35 +0200
Subject: [PATCH 11/49] Run prettier

---
 src/components/OptionRow.js                               | 6 +++++-
 src/pages/NewChatSelectorPage.js                          | 5 +----
 .../SidebarScreen/FloatingActionButtonAndPopover.js       | 4 +---
 .../MoneyRequestParticipantsPage.js                       | 8 ++------
 .../MoneyRequestParticipantsSelector.js                   | 4 ++--
 5 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index e65b2cf5eda8..859a2998b739 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -264,7 +264,11 @@ class OptionRow extends Component {
                                     {this.props.showSelectedState && (
                                         <>
                                             {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? (
-                                                <Button text={this.props.selectedStateButtonText} onPress={() => this.props.onSelectedStatePressed(this.props.option)} small />
+                                                <Button
+                                                    text={this.props.selectedStateButtonText}
+                                                    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
+                                                    small
+                                                />
                                             ) : (
                                                 <PressableWithFeedback
                                                     onPress={() => this.props.onSelectedStatePressed(this.props.option)}
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index 4e33f098bd17..f7f90e6ce57d 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -66,7 +66,4 @@ NewChatSelectorPage.propTypes = propTypes;
 NewChatSelectorPage.defaultProps = defaultProps;
 NewChatSelectorPage.displayName = 'NewChatPage';
 
-export default compose(
-    withLocalize,
-    withWindowDimensions,
-)(NewChatSelectorPage);
+export default compose(withLocalize, withWindowDimensions)(NewChatSelectorPage);
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index a6afc435824f..13fd901bbbc8 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -186,9 +186,7 @@ function FloatingActionButtonAndPopover(props) {
                     {
                         icon: Expensicons.ChatBubble,
                         text: props.translate('sidebarScreen.fabNewChat'),
-                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(
-                            Permissions.canUsePolicyRooms(props.betas) ? ROUTES.NEW_CHAT : ROUTES.NEW
-                        )),
+                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(Permissions.canUsePolicyRooms(props.betas) ? ROUTES.NEW_CHAT : ROUTES.NEW)),
                     },
                     ...(Permissions.canUseIOUSend(props.betas)
                         ? [
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 6bcd4df2a315..76f503628195 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -50,12 +50,8 @@ function MoneyRequestParticipantsPage({iou, translate, route}) {
     const [headerTitle, setHeaderTitle] = useState();
 
     useEffect(() => {
-        setHeaderTitle(
-            _.isEmpty(iou.participants) ?
-            translate('tabSelector.manual') :
-            translate('iou.split')
-        )
-    }, [iou.participants, translate])
+        setHeaderTitle(_.isEmpty(iou.participants) ? translate('tabSelector.manual') : translate('iou.split'));
+    }, [iou.participants, translate]);
 
     const navigateToNextStep = (moneyRequestType) => {
         IOU.setMoneyRequestId(moneyRequestType);
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index da688dd9024a..bd370e57e3ca 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -68,7 +68,7 @@ function MoneyRequestParticipantsSplitSelector({
     navigateToRequest,
     navigateToSplit,
     onAddParticipants,
-    safeAreaPaddingBottomStyle
+    safeAreaPaddingBottomStyle,
 }) {
     const [searchTerm, setSearchTerm] = useState('');
     const [newChatOptions, setNewChatOptions] = useState({
@@ -137,7 +137,7 @@ function MoneyRequestParticipantsSplitSelector({
     const addSingleParticipant = (option) => {
         onAddParticipants([{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true}]);
         navigateToRequest();
-    }
+    };
 
     /**
      * Removes a selected option from list if already selected. If not already selected add this option to the list.

From 2e5f42e61a91944ad51d3b4749f285510a82226e Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 14:09:03 +0200
Subject: [PATCH 12/49] Remove unused translations

---
 src/languages/en.js | 5 -----
 src/languages/es.js | 4 ----
 2 files changed, 9 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index c0ed7b27a071..7ccd42ddb9e5 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -353,11 +353,6 @@ export default {
         },
     },
     sidebarScreen: {
-        chat: 'Chat',
-        room: 'Room',
-        newChat: 'New chat',
-        newGroup: 'New group',
-        newRoom: 'New room',
         buttonSearch: 'Search',
         buttonMySettings: 'My settings',
         fabNewChat: 'Send message',
diff --git a/src/languages/es.js b/src/languages/es.js
index 605e6c3c5760..775d427ef9d7 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -352,10 +352,6 @@ export default {
         },
     },
     sidebarScreen: {
-        chat: 'Chat',
-        room: 'Sala',
-        newGroup: 'Nuevo grupo',
-        newRoom: 'Nueva sala de chat',
         buttonSearch: 'Buscar',
         buttonMySettings: 'Mi configuración',
         fabNewChat: 'Enviar mensaje',

From b3fa5215acba924425ac6b236ca225cad2ebae65 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 14:25:23 +0200
Subject: [PATCH 13/49] Remove unused linking config relating new group

---
 src/libs/Navigation/linkingConfig.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 02488fa4c8a1..d29a6135fe85 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -241,11 +241,6 @@ export default {
                             Report_WelcomeMessage_Root: ROUTES.REPORT_WELCOME_MESSAGE,
                         },
                     },
-                    NewGroup: {
-                        screens: {
-                            NewGroup_Root: ROUTES.NEW_GROUP,
-                        },
-                    },
                     NewChat: {
                         screens: {
                             NewChat_Root: {

From 70a70322127baefa83ab645ddb84def3bb7f95db Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 20:40:08 +0200
Subject: [PATCH 14/49] Add missing Tab constants

---
 src/CONST.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/CONST.js b/src/CONST.js
index cf82df137662..406eefb6dfb1 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2546,6 +2546,9 @@ const CONST = {
         DISABLED: 'DISABLED',
     },
     TAB: {
+        NEW_CHAT_TAB_ID: 'NewChatTab',
+        NEW_CHAT: 'chat',
+        NEW_ROOM: 'room',
         RECEIPT_TAB_ID: 'ReceiptTab',
         MANUAL: 'manual',
         SCAN: 'scan',

From 45d606a8cdcea6ac057e9ec7271164ad3f6c1964 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 20:41:26 +0200
Subject: [PATCH 15/49] Always navigate to NEW route - tab will be
 auto-selected

---
 .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index 13fd901bbbc8..f1ab3ba5e40e 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -186,7 +186,7 @@ function FloatingActionButtonAndPopover(props) {
                     {
                         icon: Expensicons.ChatBubble,
                         text: props.translate('sidebarScreen.fabNewChat'),
-                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(Permissions.canUsePolicyRooms(props.betas) ? ROUTES.NEW_CHAT : ROUTES.NEW)),
+                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.NEW)),
                     },
                     ...(Permissions.canUseIOUSend(props.betas)
                         ? [

From 79a02d5aa637e524a33ed64678fb1fc4fa574c22 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 21 Aug 2023 21:11:39 +0200
Subject: [PATCH 16/49] Add space to the left of the button

---
 src/components/OptionRow.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 859a2998b739..5a469cc88a06 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -265,6 +265,7 @@ class OptionRow extends Component {
                                         <>
                                             {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? (
                                                 <Button
+                                                    style={[styles.pl2]}
                                                     text={this.props.selectedStateButtonText}
                                                     onPress={() => this.props.onSelectedStatePressed(this.props.option)}
                                                     small

From a221a57b9f25868a3eb466482c2a4872a1d4341c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 17:07:09 +0200
Subject: [PATCH 17/49] Fix rerender not triggered when translation changes

---
 src/components/OptionRow.js | 1 +
 src/pages/NewChatPage.js    | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 5a469cc88a06..a4329f5a6cc3 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -104,6 +104,7 @@ class OptionRow extends Component {
             this.props.isDisabled !== nextProps.isDisabled ||
             this.props.isSelected !== nextProps.isSelected ||
             this.props.shouldHaveOptionSeparator !== nextProps.shouldHaveOptionSeparator ||
+            this.props.selectedStateButtonText !== nextProps.selectedStateButtonText ||
             this.props.showSelectedState !== nextProps.showSelectedState ||
             this.props.showTitleTooltip !== nextProps.showTitleTooltip ||
             !_.isEqual(this.props.option.icons, nextProps.option.icons) ||
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 49d9f0e0a0d7..e761a493aa5d 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -42,6 +42,7 @@ const defaultProps = {
 const excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE);
 
 function NewChatPage(props) {
+    const {translate} = props;
     const [searchTerm, setSearchTerm] = useState('');
     const [filteredRecentReports, setFilteredRecentReports] = useState([]);
     const [filteredPersonalDetails, setFilteredPersonalDetails] = useState([]);
@@ -74,7 +75,7 @@ function NewChatPage(props) {
         }
 
         sectionsList.push({
-            title: props.translate('common.recents'),
+            title: translate('common.recents'),
             data: filteredRecentReports,
             shouldShow: !_.isEmpty(filteredRecentReports),
             indexOffset,
@@ -82,7 +83,7 @@ function NewChatPage(props) {
         indexOffset += filteredRecentReports.length;
 
         sectionsList.push({
-            title: props.translate('common.contacts'),
+            title: translate('common.contacts'),
             data: filteredPersonalDetails,
             shouldShow: !_.isEmpty(filteredPersonalDetails),
             indexOffset,
@@ -99,8 +100,7 @@ function NewChatPage(props) {
         }
 
         return sectionsList;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, selectedOptions]);
+    }, [translate, filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, selectedOptions]);
 
     /**
      * Removes a selected option from list if already selected. If not already selected add this option to the list.

From fe065c1ba0e17215e06d325e6e3ad3f5ee595192 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 17:07:26 +0200
Subject: [PATCH 18/49] Add missing default props

---
 src/components/OptionsSelector/optionsSelectorPropTypes.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index 55bcda743855..d47b1b3e4635 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -125,6 +125,9 @@ const defaultProps = {
     selectedOptions: [],
     headerMessage: '',
     canSelectMultipleOptions: false,
+    shouldShowMultipleOptionSelectorAsButton: false,
+    multipleOptionSelectorButtonText: '',
+    onAddToSelection: () => {},
     hideSectionHeaders: false,
     boldStyle: false,
     showTitleTooltip: false,

From 166a27a99dda1f69d8c5bbc242f290ab184b29bf Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 17:08:02 +0200
Subject: [PATCH 19/49] Prefer empty function as default prop instead of
 undefined

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

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index a4329f5a6cc3..d745f7100cae 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -77,7 +77,7 @@ const defaultProps = {
     showSelectedState: false,
     shouldShowSelectedStateAsButton: false,
     selectedStateButtonText: 'Select',
-    onSelectedStatePressed: undefined,
+    onSelectedStatePressed: () => {},
     isSelected: false,
     boldStyle: false,
     showTitleTooltip: false,

From 58cd065788c219dfb3e49755bfeb7674b39a5174 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 17:11:10 +0200
Subject: [PATCH 20/49] Destructure props

---
 src/pages/NewChatPage.js | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index e761a493aa5d..55d6bb8e15be 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -41,8 +41,7 @@ const defaultProps = {
 
 const excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE);
 
-function NewChatPage(props) {
-    const {translate} = props;
+function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) {
     const [searchTerm, setSearchTerm] = useState('');
     const [filteredRecentReports, setFilteredRecentReports] = useState([]);
     const [filteredPersonalDetails, setFilteredPersonalDetails] = useState([]);
@@ -56,7 +55,7 @@ function NewChatPage(props) {
         searchTerm,
         maxParticipantsReached,
     );
-    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(props.personalDetails);
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
 
     const sections = useMemo(() => {
         const sectionsList = [];
@@ -117,10 +116,10 @@ function NewChatPage(props) {
             newSelectedOptions = [...selectedOptions, option];
         }
 
-        const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
-            props.reports,
-            props.personalDetails,
-            props.betas,
+        const {recentReports, personalDetails: newChatPersonalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
+            reports,
+            personalDetails,
+            betas,
             searchTerm,
             newSelectedOptions,
             excludedGroupEmails,
@@ -128,7 +127,7 @@ function NewChatPage(props) {
 
         setSelectedOptions(newSelectedOptions);
         setFilteredRecentReports(recentReports);
-        setFilteredPersonalDetails(personalDetails);
+        setFilteredPersonalDetails(newChatPersonalDetails);
         setFilteredUserToInvite(userToInvite);
     }
 
@@ -155,20 +154,20 @@ function NewChatPage(props) {
     };
 
     useEffect(() => {
-        const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
-            props.reports,
-            props.personalDetails,
-            props.betas,
+        const {recentReports, personalDetails: newChatPersonalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
+            reports,
+            personalDetails,
+            betas,
             searchTerm,
             selectedOptions,
-            props.isGroupChat ? excludedGroupEmails : [],
+            isGroupChat ? excludedGroupEmails : [],
         );
         setFilteredRecentReports(recentReports);
-        setFilteredPersonalDetails(personalDetails);
+        setFilteredPersonalDetails(newChatPersonalDetails);
         setFilteredUserToInvite(userToInvite);
         // props.betas is not added as dependency since it doesn't change during the component lifecycle
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.reports, props.personalDetails, searchTerm]);
+    }, [reports, personalDetails, searchTerm]);
 
     return (
         <ScreenWrapper
@@ -181,7 +180,7 @@ function NewChatPage(props) {
                     <OptionsSelector
                         canSelectMultipleOptions
                         shouldShowMultipleOptionSelectorAsButton
-                        multipleOptionSelectorButtonText={props.translate('newChatPage.addToGroup')}
+                        multipleOptionSelectorButtonText={translate('newChatPage.addToGroup')}
                         onAddToSelection={(option) => toggleOption(option)}
                         sections={sections}
                         selectedOptions={selectedOptions}
@@ -193,9 +192,9 @@ function NewChatPage(props) {
                         shouldFocusOnSelectRow={!Browser.isMobile()}
                         shouldShowOptions={isOptionsDataReady}
                         shouldShowConfirmButton
-                        confirmButtonText={selectedOptions.length > 1 ? props.translate('newChatPage.createGroup') : props.translate('newChatPage.createChat')}
+                        confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
                         onConfirmSelection={createGroup}
-                        textInputLabel={props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                        textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                         safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                     />
                 </View>

From 3fb9ec02112323fc32dd72e2b7e1ed27e044c34e Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 17:13:03 +0200
Subject: [PATCH 21/49] Run prettier

---
 src/pages/NewChatPage.js | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 55d6bb8e15be..af8c9058dfa8 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -116,14 +116,11 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
             newSelectedOptions = [...selectedOptions, option];
         }
 
-        const {recentReports, personalDetails: newChatPersonalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
-            reports,
-            personalDetails,
-            betas,
-            searchTerm,
-            newSelectedOptions,
-            excludedGroupEmails,
-        );
+        const {
+            recentReports,
+            personalDetails: newChatPersonalDetails,
+            userToInvite,
+        } = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, newSelectedOptions, excludedGroupEmails);
 
         setSelectedOptions(newSelectedOptions);
         setFilteredRecentReports(recentReports);
@@ -154,14 +151,11 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
     };
 
     useEffect(() => {
-        const {recentReports, personalDetails: newChatPersonalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
-            reports,
-            personalDetails,
-            betas,
-            searchTerm,
-            selectedOptions,
-            isGroupChat ? excludedGroupEmails : [],
-        );
+        const {
+            recentReports,
+            personalDetails: newChatPersonalDetails,
+            userToInvite,
+        } = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, selectedOptions, isGroupChat ? excludedGroupEmails : []);
         setFilteredRecentReports(recentReports);
         setFilteredPersonalDetails(newChatPersonalDetails);
         setFilteredUserToInvite(userToInvite);

From 90afb072f23432e97e682cd2f8b6a9d6d1682589 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 23:05:13 +0200
Subject: [PATCH 22/49] Fix freezing due to autofocus issues

---
 src/components/OptionsSelector/BaseOptionsSelector.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index df7b8582c410..0d3d94e80c78 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -78,14 +78,6 @@ class BaseOptionsSelector extends Component {
             }
         }
 
-        if (this.textInput && this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) {
-            InteractionManager.runAfterInteractions(() => {
-                // If we automatically focus on a text input when mounting a component,
-                // let's automatically focus on it when the component updates as well (eg, when navigating back from a page)
-                this.textInput.focus();
-            });
-        }
-
         if (_.isEqual(this.props.sections, prevProps.sections)) {
             return;
         }
@@ -343,7 +335,7 @@ class BaseOptionsSelector extends Component {
                 selectTextOnFocus
                 blurOnSubmit={Boolean(this.state.allOptions.length)}
                 spellCheck={false}
-                autoFocus={this.props.autoFocus}
+                autoFocus={this.props.isFocused && this.props.autoFocus}
                 shouldDelayFocus={this.props.shouldDelayFocus}
             />
         );

From e4348e19b1539015a2b1a4f02d78d905c4f3cdf5 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 23:11:42 +0200
Subject: [PATCH 23/49] Delete unused import

---
 src/components/OptionsSelector/BaseOptionsSelector.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 0d3d94e80c78..54b5d45848ab 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View, InteractionManager} from 'react-native';
+import {View} from 'react-native';
 import Button from '../Button';
 import FixedFooter from '../FixedFooter';
 import OptionsList from '../OptionsList';

From 9b3c9af4c1cac56c590bb9a42f925a8778beeb2a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 29 Aug 2023 23:53:56 +0200
Subject: [PATCH 24/49] Add title translations

---
 src/components/TabSelector/TabSelector.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 5339f10bb372..d2f8417479ba 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -46,12 +46,18 @@ const getIcon = (route) => {
 
 const getTitle = (route, translate) => {
     switch (route) {
+        case CONST.TAB.MANUAL:
+            return translate('tabSelector.manual');
         case CONST.TAB.SCAN:
             return translate('tabSelector.scan');
+        case CONST.TAB.NEW_CHAT:
+            return translate('tabSelector.chat');
+        case CONST.TAB.NEW_ROOM:
+            return translate('tabSelector.room');
         case CONST.TAB.DISTANCE:
             return translate('common.distance');
         default:
-            return translate('tabSelector.manual');
+            throw new Error(`Route ${route} has no title set.`);
     }
 };
 

From afb89ebb5f83680c4953748393486d0669a643c0 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 30 Aug 2023 15:07:41 +0200
Subject: [PATCH 25/49] Fix tab switching freezing

---
 src/pages/NewChatSelectorPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index f7f90e6ce57d..65750b901618 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -27,6 +27,7 @@ const defaultProps = {
 function NewChatSelectorPage(props) {
     return (
         <ScreenWrapper
+            shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
         >

From 0f1648d16b9b1a9895d42e5c223476e3245de040 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 30 Aug 2023 21:32:18 +0200
Subject: [PATCH 26/49] Enable autofocus for New Room tab

---
 src/components/RoomNameInput/index.js         |  4 +--
 src/components/RoomNameInput/index.native.js  |  4 +--
 .../RoomNameInput/roomNameInputPropTypes.js   |  3 ++
 src/pages/workspace/WorkspaceNewRoomPage.js   | 35 +++++++++++--------
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 14b369d86a4c..cab3a41ab61a 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -6,7 +6,7 @@ import useLocalize from '../../hooks/useLocalize';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
 
-function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange}) {
     const {translate} = useLocalize();
 
     const [selection, setSelection] = useState();
@@ -58,7 +58,7 @@ function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onB
             errorText={errorText}
             autoCapitalize="none"
             onBlur={onBlur}
-            autoFocus={autoFocus}
+            autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             spellCheck={false}
         />
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index e263321dea0e..88caf5961350 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -7,7 +7,7 @@ import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
 import getOperatingSystem from '../../libs/getOperatingSystem';
 
-function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
     const {translate} = useLocalize();
 
     /**
@@ -42,7 +42,7 @@ function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onB
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
             onBlur={onBlur}
-            autoFocus={autoFocus}
+            autoFocus={isFocused && autoFocus}
             autoCapitalize="none"
             shouldDelayFocus={shouldDelayFocus}
         />
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 3eef833a1252..ab1ac37d32c8 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import {withNavigationFocusPropTypes} from '../withNavigationFocus';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -27,6 +28,8 @@ const propTypes = {
 
     /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
     shouldDelayFocus: PropTypes.bool,
+
+    ...withNavigationFocusPropTypes,
 };
 
 const defaultProps = {
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 77110713e40e..36757ee1b4b2 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -2,6 +2,7 @@ import React, {useState, useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
+import withNavigationFocus from '../../components/withNavigationFocus';
 import PropTypes from 'prop-types';
 import * as Report from '../../libs/actions/Report';
 import useLocalize from '../../hooks/useLocalize';
@@ -19,6 +20,7 @@ import * as PolicyUtils from '../../libs/PolicyUtils';
 import Form from '../../components/Form';
 import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import compose from '../../libs/compose';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -148,7 +150,7 @@ function WorkspaceNewRoomPage(props) {
                 enabledWhenOffline
             >
                 <View style={styles.mb5}>
-                    <RoomNameInput inputID="roomName" />
+                    <RoomNameInput inputID="roomName" isFocused={props.isFocused} autoFocus />
                 </View>
                 <View style={styles.mb2}>
                     <Picker
@@ -188,17 +190,20 @@ WorkspaceNewRoomPage.propTypes = propTypes;
 WorkspaceNewRoomPage.defaultProps = defaultProps;
 WorkspaceNewRoomPage.displayName = 'WorkspaceNewRoomPage';
 
-export default withOnyx({
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-    allPolicyMembers: {
-        key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
-    },
-})(WorkspaceNewRoomPage);
+export default compose(
+    withNavigationFocus,
+    withOnyx({
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+        policies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        reports: {
+            key: ONYXKEYS.COLLECTION.REPORT,
+        },
+        allPolicyMembers: {
+            key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
+        },
+    })
+)(WorkspaceNewRoomPage);

From b7907a53cf22a8c1004d07cdf096f9cfbf8856dd Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 31 Aug 2023 13:38:16 +0200
Subject: [PATCH 27/49] Don't call onBlur when tab is switched

---
 src/components/RoomNameInput/index.js        | 2 +-
 src/components/RoomNameInput/index.native.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index cab3a41ab61a..1717b8d5c6b9 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -57,7 +57,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
             errorText={errorText}
             autoCapitalize="none"
-            onBlur={onBlur}
+            onBlur={() => isFocused && onBlur()}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             spellCheck={false}
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index 88caf5961350..78500a8f0be2 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -41,7 +41,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             errorText={errorText}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
-            onBlur={onBlur}
+            onBlur={() => isFocused && onBlur()}
             autoFocus={isFocused && autoFocus}
             autoCapitalize="none"
             shouldDelayFocus={shouldDelayFocus}

From 8ad5472b5c85ea630a9e03051a952b2a86e851a4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 31 Aug 2023 20:09:51 +0200
Subject: [PATCH 28/49] Precalculate prefixCharacter width instead of
 calculating on the fly

---
 src/components/TextInput/BaseTextInput.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index c3f1cec4ef1a..2a8ba1f4d42b 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -29,7 +29,6 @@ function BaseTextInput(props) {
     const [passwordHidden, setPasswordHidden] = useState(props.secureTextEntry);
     const [textInputWidth, setTextInputWidth] = useState(0);
     const [textInputHeight, setTextInputHeight] = useState(0);
-    const [prefixWidth, setPrefixWidth] = useState(0);
     const [height, setHeight] = useState(variables.componentSizeLarge);
     const [width, setWidth] = useState();
     const labelScale = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE)).current;
@@ -221,9 +220,20 @@ function BaseTextInput(props) {
         setPasswordHidden((prevPasswordHidden) => !prevPasswordHidden);
     }, []);
 
-    const storePrefixLayoutDimensions = useCallback((event) => {
-        setPrefixWidth(Math.abs(event.nativeEvent.layout.width));
-    }, []);
+    // When adding a new prefix character, adjust this method to add expected character width.
+    // This is because character width isn't known before it's rendered to the screen, and once it's rendered,
+    // it's too late to calculate it's width because the change in padding would cause a visible jump.
+    // Some characters are wider than the others when rendered, e.g. '@' vs '#'. Chosen font-family and font-size
+    // also have an impact on the width of the character, but as long as there's only one font-family and one font-size,
+    // this method will produce reliable results.
+    const getCharacterPadding = (prefix) => {
+        switch (prefix) {
+            case CONST.POLICY.ROOM_PREFIX:
+                return 10;
+            default:
+                throw new Error(`Prefix ${prefix} has no padding assigned.`);
+        }
+    }
 
     // eslint-disable-next-line react/forbid-foreign-prop-types
     const inputProps = _.omit(props, _.keys(baseTextInputPropTypes.propTypes));
@@ -295,7 +305,6 @@ function BaseTextInput(props) {
                                         pointerEvents="none"
                                         selectable={false}
                                         style={[styles.textInputPrefix, !hasLabel && styles.pv0]}
-                                        onLayout={storePrefixLayoutDimensions}
                                     >
                                         {props.prefixCharacter}
                                     </Text>
@@ -322,7 +331,7 @@ function BaseTextInput(props) {
                                     styles.w100,
                                     props.inputStyle,
                                     (!hasLabel || isMultiline) && styles.pv0,
-                                    props.prefixCharacter && StyleUtils.getPaddingLeft(prefixWidth + styles.pl1.paddingLeft),
+                                    props.prefixCharacter && StyleUtils.getPaddingLeft(getCharacterPadding(props.prefixCharacter) + styles.pl1.paddingLeft),
                                     props.secureTextEntry && styles.secureInput,
 
                                     // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear

From d2a2e50b6033ad0dc24292fdd1f651a480a2ebfd Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 31 Aug 2023 20:14:34 +0200
Subject: [PATCH 29/49] Add isFocused to prop types

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 36757ee1b4b2..fa014946a1eb 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -2,8 +2,8 @@ import React, {useState, useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
-import withNavigationFocus from '../../components/withNavigationFocus';
 import PropTypes from 'prop-types';
+import withNavigationFocus, { withNavigationFocusPropTypes } from '../../components/withNavigationFocus';
 import * as Report from '../../libs/actions/Report';
 import useLocalize from '../../hooks/useLocalize';
 import styles from '../../styles/styles';
@@ -54,6 +54,8 @@ const propTypes = {
 
     /** A collection of objects for all policies which key policy member objects by accountIDs */
     allPolicyMembers: PropTypes.objectOf(PropTypes.objectOf(policyMemberPropType)),
+
+    ...withNavigationFocusPropTypes
 };
 const defaultProps = {
     betas: [],

From d63e67c512ccd15e2cb0933398adc3a822c15d70 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Sep 2023 09:07:57 +0200
Subject: [PATCH 30/49] Pass position prop to TabSelector

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

diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index 65750b901618..57d955c6e55b 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -39,10 +39,11 @@ function NewChatSelectorPage(props) {
                 {Permissions.canUsePolicyRooms(props.betas) ? (
                     <OnyxTabNavigator
                         id={CONST.TAB.NEW_CHAT_TAB_ID}
-                        tabBar={({state, navigation}) => (
+                        tabBar={({state, navigation, position}) => (
                             <TabSelector
                                 state={state}
                                 navigation={navigation}
+                                position={position}
                             />
                         )}
                     >

From fb2e415185e43085c15f5f2e983f755ac184808f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Sep 2023 09:31:28 +0200
Subject: [PATCH 31/49] Remove nesting

---
 src/pages/NewChatSelectorPage.js | 54 +++++++++++++++-----------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index 57d955c6e55b..89a3fd1adc72 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -31,35 +31,33 @@ function NewChatSelectorPage(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
         >
-            <>
-                <HeaderWithBackButton
-                    title={props.translate('sidebarScreen.fabNewChat')}
-                    onBackButtonPress={Navigation.dismissModal}
-                />
-                {Permissions.canUsePolicyRooms(props.betas) ? (
-                    <OnyxTabNavigator
-                        id={CONST.TAB.NEW_CHAT_TAB_ID}
-                        tabBar={({state, navigation, position}) => (
-                            <TabSelector
-                                state={state}
-                                navigation={navigation}
-                                position={position}
-                            />
-                        )}
-                    >
-                        <TopTab.Screen
-                            name={CONST.TAB.NEW_CHAT}
-                            component={NewChatPage}
+            <HeaderWithBackButton
+                title={props.translate('sidebarScreen.fabNewChat')}
+                onBackButtonPress={Navigation.dismissModal}
+            />
+            {Permissions.canUsePolicyRooms(props.betas) ? (
+                <OnyxTabNavigator
+                    id={CONST.TAB.NEW_CHAT_TAB_ID}
+                    tabBar={({state, navigation, position}) => (
+                        <TabSelector
+                            state={state}
+                            navigation={navigation}
+                            position={position}
                         />
-                        <TopTab.Screen
-                            name={CONST.TAB.NEW_ROOM}
-                            component={WorkspaceNewRoomPage}
-                        />
-                    </OnyxTabNavigator>
-                ) : (
-                    <NewChatPage />
-                )}
-            </>
+                    )}
+                >
+                    <TopTab.Screen
+                        name={CONST.TAB.NEW_CHAT}
+                        component={NewChatPage}
+                    />
+                    <TopTab.Screen
+                        name={CONST.TAB.NEW_ROOM}
+                        component={WorkspaceNewRoomPage}
+                    />
+                </OnyxTabNavigator>
+            ) : (
+                <NewChatPage />
+            )}
         </ScreenWrapper>
     );
 }

From 3826fcb01f8175ce29ef494a6a6d8dbdd1b32544 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Sep 2023 09:32:12 +0200
Subject: [PATCH 32/49] Fix button being behing keyboard for NewChatScreen

---
 src/pages/NewChatPage.js | 56 +++++++++++++++++++++++-----------------
 src/styles/styles.js     |  4 +--
 src/styles/variables.ts  |  2 ++
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index af8c9058dfa8..8c5f660230b1 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -12,11 +12,13 @@ import * as Report from '../libs/actions/Report';
 import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
 import ScreenWrapper from '../components/ScreenWrapper';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import * as Browser from '../libs/Browser';
 import compose from '../libs/compose';
 import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
+import variables from '../styles/variables';
 
 const propTypes = {
     /** Beta features list */
@@ -169,29 +171,37 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
             includePaddingTop={false}
             shouldEnableMaxHeight
         >
-            {({safeAreaPaddingBottomStyle}) => (
-                <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
-                    <OptionsSelector
-                        canSelectMultipleOptions
-                        shouldShowMultipleOptionSelectorAsButton
-                        multipleOptionSelectorButtonText={translate('newChatPage.addToGroup')}
-                        onAddToSelection={(option) => toggleOption(option)}
-                        sections={sections}
-                        selectedOptions={selectedOptions}
-                        value={searchTerm}
-                        onSelectRow={(option) => createChat(option)}
-                        onChangeText={setSearchTerm}
-                        headerMessage={headerMessage}
-                        boldStyle
-                        shouldFocusOnSelectRow={!Browser.isMobile()}
-                        shouldShowOptions={isOptionsDataReady}
-                        shouldShowConfirmButton
-                        confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
-                        onConfirmSelection={createGroup}
-                        textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
-                        safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                    />
-                </View>
+            {({safeAreaPaddingBottomStyle, insets}) => (
+                <KeyboardAvoidingView
+                    style={{ height: '100%' }}
+                    behavior="padding"
+                    // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
+                    // This is because when wrapping whole screen the screen was freezing when changing Tabs.
+                    keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + insets.top}
+                >
+                    <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
+                        <OptionsSelector
+                            canSelectMultipleOptions
+                            shouldShowMultipleOptionSelectorAsButton
+                            multipleOptionSelectorButtonText={translate('newChatPage.addToGroup')}
+                            onAddToSelection={(option) => toggleOption(option)}
+                            sections={sections}
+                            selectedOptions={selectedOptions}
+                            value={searchTerm}
+                            onSelectRow={(option) => createChat(option)}
+                            onChangeText={setSearchTerm}
+                            headerMessage={headerMessage}
+                            boldStyle
+                            shouldFocusOnSelectRow={!Browser.isMobile()}
+                            shouldShowOptions={isOptionsDataReady}
+                            shouldShowConfirmButton
+                            confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
+                            onConfirmSelection={createGroup}
+                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                        />
+                    </View>
+                </KeyboardAvoidingView>
             )}
         </ScreenWrapper>
     );
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 7c8c12c4a6c8..7699f34a9690 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3680,8 +3680,8 @@ const styles = {
     },
 
     tabSelectorButton: {
-        height: 40,
-        padding: 12,
+        height: variables.tabSelectorButtonHeight,
+        padding: variables.tabSelectorButtonPadding,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index f584e657c693..d78184a59518 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -133,6 +133,8 @@ export default {
     signInLogoWidth: 120,
     signInLogoWidthLargeScreen: 144,
     signInLogoWidthPill: 132,
+    tabSelectorButtonHeight: 40,
+    tabSelectorButtonPadding: 12,
     lhnLogoWidth: 108,
     lhnLogoHeight: 28,
     signInLogoWidthLargeScreenPill: 162,

From 85519f7126884aae050112ccb8de85564c7cc372 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Sep 2023 12:07:40 +0200
Subject: [PATCH 33/49] WIP Fix button being behind keyboard for NewRoom

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 99 ++++++++++++---------
 1 file changed, 59 insertions(+), 40 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index fa014946a1eb..ffc0216a0162 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -9,6 +9,8 @@ import useLocalize from '../../hooks/useLocalize';
 import styles from '../../styles/styles';
 import RoomNameInput from '../../components/RoomNameInput';
 import Picker from '../../components/Picker';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
+import ScreenWrapper from '../../components/ScreenWrapper';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import Text from '../../components/Text';
@@ -21,6 +23,7 @@ import Form from '../../components/Form';
 import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import compose from '../../libs/compose';
+import variables from '../../styles/variables';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -142,48 +145,64 @@ function WorkspaceNewRoomPage(props) {
 
     return (
         <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}>
-            <Form
-                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-                submitButtonText={translate('newRoomPage.createRoom')}
-                scrollContextEnabled
-                style={[styles.mh5, styles.flexGrow1]}
-                validate={validate}
-                onSubmit={submit}
-                enabledWhenOffline
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                includePaddingTop={false}
+                shouldEnableMaxHeight
             >
-                <View style={styles.mb5}>
-                    <RoomNameInput inputID="roomName" isFocused={props.isFocused} autoFocus />
-                </View>
-                <View style={styles.mb2}>
-                    <Picker
-                        inputID="policyID"
-                        label={translate('workspace.common.workspace')}
-                        placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
-                        items={workspaceOptions}
-                        onValueChange={setPolicyID}
-                    />
-                </View>
-                {isPolicyAdmin && (
-                    <View style={styles.mb2}>
-                        <Picker
-                            inputID="writeCapability"
-                            label={translate('writeCapabilityPage.label')}
-                            items={writeCapabilityOptions}
-                            defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
-                        />
-                    </View>
+                {({insets}) => (
+                    <KeyboardAvoidingView
+                        style={{ height: '100%' }}
+                        behavior="height"
+                        // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
+                        // This is because when wrapping whole screen the screen was freezing when changing Tabs.
+                        keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + insets.top}
+                    >
+                            <Form
+                                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                                submitButtonText={translate('newRoomPage.createRoom')}
+                                scrollContextEnabled
+                                style={[styles.mh5, styles.flexGrow1]}
+                                validate={validate}
+                                onSubmit={submit}
+                                enabledWhenOffline
+                            >
+                                <View style={styles.mb5}>
+                                    <RoomNameInput inputID="roomName" isFocused={props.isFocused} autoFocus />
+                                </View>
+                                <View style={styles.mb2}>
+                                    <Picker
+                                        inputID="policyID"
+                                        label={translate('workspace.common.workspace')}
+                                        placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
+                                        items={workspaceOptions}
+                                        onValueChange={setPolicyID}
+                                    />
+                                </View>
+                                {isPolicyAdmin && (
+                                    <View style={styles.mb2}>
+                                        <Picker
+                                            inputID="writeCapability"
+                                            label={translate('writeCapabilityPage.label')}
+                                            items={writeCapabilityOptions}
+                                            defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
+                                        />
+                                    </View>
+                                )}
+                                <View style={styles.mb2}>
+                                    <Picker
+                                        inputID="visibility"
+                                        label={translate('newRoomPage.visibility')}
+                                        items={visibilityOptions}
+                                        onValueChange={setVisibility}
+                                        defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
+                                    />
+                                </View>
+                                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+                            </Form>
+                    </KeyboardAvoidingView>
                 )}
-                <View style={styles.mb2}>
-                    <Picker
-                        inputID="visibility"
-                        label={translate('newRoomPage.visibility')}
-                        items={visibilityOptions}
-                        onValueChange={setVisibility}
-                        defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
-                    />
-                </View>
-                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-            </Form>
+            </ScreenWrapper>
         </FullPageNotFoundView>
     );
 }

From 45085a5e5d973690f9ebf21ca1cf5d2cce265456 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Sep 2023 12:41:57 +0200
Subject: [PATCH 34/49] Fix NewRoom and improve NewChat keyboard avoiding views

---
 src/pages/NewChatPage.js                    | 3 ++-
 src/pages/workspace/WorkspaceNewRoomPage.js | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 8c5f660230b1..136ad46c8b24 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -167,6 +167,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
 
     return (
         <ScreenWrapper
+            shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
@@ -177,7 +178,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
                     behavior="padding"
                     // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
                     // This is because when wrapping whole screen the screen was freezing when changing Tabs.
-                    keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + insets.top}
+                    keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                 >
                     <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
                         <OptionsSelector
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index ffc0216a0162..bef6fc4a7872 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -146,9 +146,10 @@ function WorkspaceNewRoomPage(props) {
     return (
         <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}>
             <ScreenWrapper
+                shouldEnableKeyboardAvoidingView={false}
                 includeSafeAreaPaddingBottom={false}
                 includePaddingTop={false}
-                shouldEnableMaxHeight
+                shouldEnablePickerAvoiding={false}
             >
                 {({insets}) => (
                     <KeyboardAvoidingView
@@ -156,7 +157,7 @@ function WorkspaceNewRoomPage(props) {
                         behavior="height"
                         // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
                         // This is because when wrapping whole screen the screen was freezing when changing Tabs.
-                        keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + insets.top}
+                        keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                     >
                             <Form
                                 formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}

From 8a1cf12096cd552bafe9817bd49b6a1a0161281b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Sep 2023 12:58:59 +0200
Subject: [PATCH 35/49] Fix height calculations when beta flags are off

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

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 136ad46c8b24..a79737e4360d 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import OptionsSelector from '../components/OptionsSelector';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
+import Permissions from '../libs/Permissions';
 import * as ReportUtils from '../libs/ReportUtils';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
@@ -178,7 +179,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
                     behavior="padding"
                     // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
                     // This is because when wrapping whole screen the screen was freezing when changing Tabs.
-                    keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
+                    keyboardVerticalOffset={variables.contentHeaderHeight + insets.top + (Permissions.canUsePolicyRooms(betas) ? variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding : 0)}
                 >
                     <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
                         <OptionsSelector

From ccd86bd23bd712f83befddf13a0b79c2c3b0481b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 6 Sep 2023 14:59:19 +0200
Subject: [PATCH 36/49] Lint + Prettier

---
 src/components/TextInput/BaseTextInput.js     |  2 +-
 src/pages/NewChatPage.js                      |  6 +-
 .../iou/steps/MoneyRequestConfirmPage.js      |  2 +-
 .../MoneyRequestParticipantsSelector.js       |  4 +-
 src/pages/workspace/WorkspaceNewRoomPage.js   | 88 ++++++++++---------
 5 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 52bf76ab3313..14fa3f62409f 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -233,7 +233,7 @@ function BaseTextInput(props) {
             default:
                 throw new Error(`Prefix ${prefix} has no padding assigned.`);
         }
-    }
+    };
 
     // eslint-disable-next-line react/forbid-foreign-prop-types
     const inputProps = _.omit(props, _.keys(baseTextInputPropTypes.propTypes));
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index a79737e4360d..e72cb9a3f79b 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -175,11 +175,13 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
                 <KeyboardAvoidingView
-                    style={{ height: '100%' }}
+                    style={{height: '100%'}}
                     behavior="padding"
                     // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
                     // This is because when wrapping whole screen the screen was freezing when changing Tabs.
-                    keyboardVerticalOffset={variables.contentHeaderHeight + insets.top + (Permissions.canUsePolicyRooms(betas) ? variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding : 0)}
+                    keyboardVerticalOffset={
+                        variables.contentHeaderHeight + insets.top + (Permissions.canUsePolicyRooms(betas) ? variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding : 0)
+                    }
                 >
                     <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
                         <OptionsSelector
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 41d6f4635c9e..41e939b3c577 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -257,7 +257,7 @@ function MoneyRequestConfirmPage(props) {
         }
 
         return props.translate('tabSelector.manual');
-    }
+    };
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 486a1b4b7700..742dac39f314 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -173,11 +173,11 @@ function MoneyRequestParticipantsSplitSelector({
                 isOptionInList ? searchTerm : '',
                 newSelectedOptions,
                 CONST.EXPENSIFY_EMAILS,
-    
+
                 // If we are using this component in the "Request money" flow then we pass the includeOwnedWorkspaceChats argument so that the current user
                 // sees the option to request money from their admin on their own Workspace Chat.
                 iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
-    
+
                 // We don't want to include any P2P options like personal details or reports that are not workspace chats for certain features.
                 !isDistanceRequest,
             );
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index bef6fc4a7872..f25e688c0553 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import withNavigationFocus, { withNavigationFocusPropTypes } from '../../components/withNavigationFocus';
+import withNavigationFocus, {withNavigationFocusPropTypes} from '../../components/withNavigationFocus';
 import * as Report from '../../libs/actions/Report';
 import useLocalize from '../../hooks/useLocalize';
 import styles from '../../styles/styles';
@@ -58,7 +58,7 @@ const propTypes = {
     /** A collection of objects for all policies which key policy member objects by accountIDs */
     allPolicyMembers: PropTypes.objectOf(PropTypes.objectOf(policyMemberPropType)),
 
-    ...withNavigationFocusPropTypes
+    ...withNavigationFocusPropTypes,
 };
 const defaultProps = {
     betas: [],
@@ -153,54 +153,58 @@ function WorkspaceNewRoomPage(props) {
             >
                 {({insets}) => (
                     <KeyboardAvoidingView
-                        style={{ height: '100%' }}
+                        style={{height: '100%'}}
                         behavior="height"
                         // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
                         // This is because when wrapping whole screen the screen was freezing when changing Tabs.
                         keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                     >
-                            <Form
-                                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-                                submitButtonText={translate('newRoomPage.createRoom')}
-                                scrollContextEnabled
-                                style={[styles.mh5, styles.flexGrow1]}
-                                validate={validate}
-                                onSubmit={submit}
-                                enabledWhenOffline
-                            >
-                                <View style={styles.mb5}>
-                                    <RoomNameInput inputID="roomName" isFocused={props.isFocused} autoFocus />
-                                </View>
-                                <View style={styles.mb2}>
-                                    <Picker
-                                        inputID="policyID"
-                                        label={translate('workspace.common.workspace')}
-                                        placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
-                                        items={workspaceOptions}
-                                        onValueChange={setPolicyID}
-                                    />
-                                </View>
-                                {isPolicyAdmin && (
-                                    <View style={styles.mb2}>
-                                        <Picker
-                                            inputID="writeCapability"
-                                            label={translate('writeCapabilityPage.label')}
-                                            items={writeCapabilityOptions}
-                                            defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
-                                        />
-                                    </View>
-                                )}
+                        <Form
+                            formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                            submitButtonText={translate('newRoomPage.createRoom')}
+                            scrollContextEnabled
+                            style={[styles.mh5, styles.flexGrow1]}
+                            validate={validate}
+                            onSubmit={submit}
+                            enabledWhenOffline
+                        >
+                            <View style={styles.mb5}>
+                                <RoomNameInput
+                                    inputID="roomName"
+                                    isFocused={props.isFocused}
+                                    autoFocus
+                                />
+                            </View>
+                            <View style={styles.mb2}>
+                                <Picker
+                                    inputID="policyID"
+                                    label={translate('workspace.common.workspace')}
+                                    placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
+                                    items={workspaceOptions}
+                                    onValueChange={setPolicyID}
+                                />
+                            </View>
+                            {isPolicyAdmin && (
                                 <View style={styles.mb2}>
                                     <Picker
-                                        inputID="visibility"
-                                        label={translate('newRoomPage.visibility')}
-                                        items={visibilityOptions}
-                                        onValueChange={setVisibility}
-                                        defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
+                                        inputID="writeCapability"
+                                        label={translate('writeCapabilityPage.label')}
+                                        items={writeCapabilityOptions}
+                                        defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
                                     />
                                 </View>
-                                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                            </Form>
+                            )}
+                            <View style={styles.mb2}>
+                                <Picker
+                                    inputID="visibility"
+                                    label={translate('newRoomPage.visibility')}
+                                    items={visibilityOptions}
+                                    onValueChange={setVisibility}
+                                    defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
+                                />
+                            </View>
+                            <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+                        </Form>
                     </KeyboardAvoidingView>
                 )}
             </ScreenWrapper>
@@ -227,5 +231,5 @@ export default compose(
         allPolicyMembers: {
             key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
         },
-    })
+    }),
 )(WorkspaceNewRoomPage);

From 02df4e3703ec0ebecc4426d4645145f5b3c3823d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 12 Sep 2023 14:51:58 +0200
Subject: [PATCH 37/49] Fix infinite navigation back problem

---
 .../MoneyRequestParticipantsPage.js                          | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 6f691947afbb..f0cd2a39550e 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -50,6 +50,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, translate, route}) {
     const iouType = useRef(lodashGet(route, 'params.iouType', ''));
     const reportID = useRef(lodashGet(route, 'params.reportID', ''));
     const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType.current, selectedTab);
+    const isSplitRequest = iou.id === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT;
     const [headerTitle, setHeaderTitle] = useState();
 
     useEffect(() => {
@@ -74,7 +75,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, translate, route}) {
         // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
         if (prevMoneyRequestId.current !== iou.id) {
             // The ID is cleared on completing a request. In that case, we will do nothing
-            if (!isDistanceRequest && iou.id) {
+            if (iou.id && !isDistanceRequest && !isSplitRequest) {
                 navigateBack(true);
             }
             return;
@@ -93,7 +94,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, translate, route}) {
         return () => {
             prevMoneyRequestId.current = iou.id;
         };
-    }, [iou.amount, iou.id, iou.receiptPath, isDistanceRequest]);
+    }, [iou.amount, iou.id, iou.receiptPath, isDistanceRequest, isSplitRequest]);
 
     return (
         <ScreenWrapper

From 2cd6be3fb91d519305a7315f149b6227bf7a1721 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Sep 2023 10:33:49 +0200
Subject: [PATCH 38/49] Post-merge fixes

---
 .../MoneyRequestParticipantsSelector.js       | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index aebc151addf7..8ecf5f64ac31 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -29,9 +29,6 @@ const propTypes = {
     /** A ref to forward to options selector's text input */
     forwardedRef: refPropTypes,
 
-    /** Callback to inform parent modal of success */
-    onStepComplete: PropTypes.func.isRequired,
-
     /** Callback to add participants in MoneyRequestModal */
     onAddParticipants: PropTypes.func.isRequired,
 
@@ -74,7 +71,8 @@ const defaultProps = {
     isDistanceRequest: false,
 };
 
-function MoneyRequestParticipantsSplitSelector({
+function MoneyRequestParticipantsSelector({
+    forwardedRef,
     betas,
     participants,
     personalDetails,
@@ -242,12 +240,7 @@ function MoneyRequestParticipantsSplitSelector({
                 value={searchTerm}
                 onSelectRow={addSingleParticipant}
                 onChangeText={setSearchTerm}
-                ref={this.props.forwardedRef}
-                autoFocus={false}
-                sections={this.getSections()}
-                value={this.state.searchTerm}
-                onSelectRow={this.addSingleParticipant}
-                onChangeText={this.updateOptionsWithSearchTerm}
+                ref={forwardedRef}
                 headerMessage={headerMessage}
                 boldStyle
                 shouldShowConfirmButton
@@ -262,9 +255,9 @@ function MoneyRequestParticipantsSplitSelector({
     );
 }
 
-MoneyRequestParticipantsSplitSelector.propTypes = propTypes;
-MoneyRequestParticipantsSplitSelector.defaultProps = defaultProps;
-MoneyRequestParticipantsSplitSelector.displayName = 'MoneyRequestParticipantsSplitSelector';
+MoneyRequestParticipantsSelector.propTypes = propTypes;
+MoneyRequestParticipantsSelector.defaultProps = defaultProps;
+MoneyRequestParticipantsSelector.displayName = 'MoneyRequestParticipantsSelector';
 
 export default compose(
     withLocalize,

From 058ecfbab5fadc5df22eb39207e0da115f1b7e80 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Sep 2023 14:12:41 +0200
Subject: [PATCH 39/49] Add blank lines

---
 src/components/OptionRow.js                                | 1 +
 src/components/OptionsSelector/optionsSelectorPropTypes.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index c2735c4d685e..a07510f7603d 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -48,6 +48,7 @@ const propTypes = {
 
     /** Callback to fire when the multiple selector (tickbox or button) is clicked */
     onSelectedStatePressed: PropTypes.func,
+
     /** Whether we highlight selected option */
     highlightSelected: PropTypes.bool,
 
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index 8880b7bfe8fc..ca336c324673 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -61,6 +61,7 @@ const propTypes = {
 
     /** Callback to fire when the multiple selector (tickbox or button) is clicked */
     onAddToSelection: PropTypes.func,
+
     /** Whether we highlight selected options */
     highlightSelectedOptions: PropTypes.bool,
 

From cc670907c44689aaf45fc1ca2ca089ea83307b6c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Sep 2023 14:14:03 +0200
Subject: [PATCH 40/49] Drop invalid param

---
 .../MoneyRequestParticipantsSelector.js                          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 8ecf5f64ac31..7c169857f287 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -97,7 +97,6 @@ function MoneyRequestParticipantsSelector({
     /**
      * Returns the sections needed for the OptionsSelector
      *
-     * @param {Boolean} maxParticipantsReached
      * @returns {Array}
      */
     const sections = useMemo(() => {

From 5b8e6a8a18bccc687b25750273e3bf6beacd87d4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Sep 2023 14:20:06 +0200
Subject: [PATCH 41/49] Combine two switch statements into one

---
 src/components/TabSelector/TabSelector.js | 37 ++++++-----------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 4d41aa1e8c6a..72a29edb71ba 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -36,37 +36,20 @@ const defaultProps = {
     },
 };
 
-const getIcon = (route) => {
+const getIconAndTitle = (route, translate) => {
     switch (route) {
         case CONST.TAB.MANUAL:
-            return Expensicons.Pencil;
+            return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')};
         case CONST.TAB.SCAN:
-            return Expensicons.Receipt;
+            return {icon: Expensicons.Receipt, title: translate('tabSelector.scan')};
         case CONST.TAB.NEW_CHAT:
-            return Expensicons.User;
+            return {icon: Expensicons.User, title: translate('tabSelector.chat')};
         case CONST.TAB.NEW_ROOM:
-            return Expensicons.Hashtag;
+            return {icon: Expensicons.Hashtag, title: translate('tabSelector.room')};
         case CONST.TAB.DISTANCE:
-            return Expensicons.Car;
+            return {icon: Expensicons.Car, title: translate('common.distance')};
         default:
-            throw new Error(`Route ${route} has no icon set.`);
-    }
-};
-
-const getTitle = (route, translate) => {
-    switch (route) {
-        case CONST.TAB.MANUAL:
-            return translate('tabSelector.manual');
-        case CONST.TAB.SCAN:
-            return translate('tabSelector.scan');
-        case CONST.TAB.NEW_CHAT:
-            return translate('tabSelector.chat');
-        case CONST.TAB.NEW_ROOM:
-            return translate('tabSelector.room');
-        case CONST.TAB.DISTANCE:
-            return translate('common.distance');
-        default:
-            throw new Error(`Route ${route} has no title set.`);
+            throw new Error(`Route ${route} has no icon nor title set.`);
     }
 };
 
@@ -106,8 +89,8 @@ function TabSelector({state, navigation, onTabPress, position}) {
                 const activeOpacity = getOpacity(position, state.routes.length, index, true);
                 const inactiveOpacity = getOpacity(position, state.routes.length, index, false);
                 const backgroundColor = getBackgroundColor(position, state.routes.length, index);
-
                 const isFocused = index === state.index;
+                const {icon, title} = getIconAndTitle(route.name, translate);
 
                 const onPress = () => {
                     if (isFocused) {
@@ -131,8 +114,8 @@ function TabSelector({state, navigation, onTabPress, position}) {
                 return (
                     <TabSelectorItem
                         key={route.name}
-                        title={getTitle(route.name, translate)}
-                        icon={getIcon(route.name)}
+                        icon={icon}
+                        title={title}
                         onPress={onPress}
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}

From 5788291993dfc44e32356615c77cc40e1d259b32 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 09:07:10 +0200
Subject: [PATCH 42/49] Fix autofocus being lost when screen mounted

---
 src/components/RoomNameInput/index.js       | 3 ++-
 src/pages/workspace/WorkspaceNewRoomPage.js | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 1717b8d5c6b9..4546e83ef769 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -6,7 +6,7 @@ import useLocalize from '../../hooks/useLocalize';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
     const {translate} = useLocalize();
 
     const [selection, setSelection] = useState();
@@ -58,6 +58,7 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             errorText={errorText}
             autoCapitalize="none"
             onBlur={() => isFocused && onBlur()}
+            shouldDelayFocus={shouldDelayFocus}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             spellCheck={false}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index f25e688c0553..f112744842b3 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -172,6 +172,7 @@ function WorkspaceNewRoomPage(props) {
                                 <RoomNameInput
                                     inputID="roomName"
                                     isFocused={props.isFocused}
+                                    shouldDelayFocus
                                     autoFocus
                                 />
                             </View>

From 5d28fdb588fb142e4bdc8dd7bd10927c42ae3764 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 09:08:39 +0200
Subject: [PATCH 43/49] Fix autofocus being lost when screen mounted

---
 .../MoneyRequestParticipantsSelector.js                          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 7c169857f287..9ff787ebe21b 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -249,6 +249,7 @@ function MoneyRequestParticipantsSelector({
                 safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                 shouldShowOptions={isOptionsDataReady}
                 shouldFocusOnSelectRow={!Browser.isMobile()}
+                shouldDelayFocus
             />
         </View>
     );

From 70beac8be2b0485d5b8f0a281121ffba7c02635f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 09:58:12 +0200
Subject: [PATCH 44/49] Autofocus fix

---
 src/components/OptionsSelector/BaseOptionsSelector.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index f9bfbd199ced..9f8d290734ff 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -82,6 +82,14 @@ class BaseOptionsSelector extends Component {
             }
         }
 
+        // Screen coming back into focus, for example
+        // when doing Cmd+Shift+K, then Cmd+K, then Cmd+Shift+K
+        if (!prevProps.isFocused && this.props.isFocused && this.props.autoFocus) {
+            setTimeout(() => {
+                this.textInput.focus();
+            }, CONST.ANIMATED_TRANSITION)
+        }
+
         if (_.isEqual(this.props.sections, prevProps.sections)) {
             return;
         }

From 0d2d5604210563130aa591a11c04e9a109e1a5ca Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 10:28:53 +0200
Subject: [PATCH 45/49] Autofocus after animation ends

---
 src/components/OptionsSelector/BaseOptionsSelector.js | 11 ++++++-----
 src/pages/SearchPage.js                               |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 9f8d290734ff..37edf827028f 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -18,9 +18,6 @@ import setSelection from '../../libs/setSelection';
 import compose from '../../libs/compose';
 
 const propTypes = {
-    /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
-    shouldDelayFocus: PropTypes.bool,
-
     /** padding bottom style of safe area */
     safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
@@ -70,6 +67,12 @@ class BaseOptionsSelector extends Component {
     componentDidMount() {
         this.subscribeToKeyboardShortcut();
 
+        if (this.props.autoFocus) {
+            setTimeout(() => {
+                this.textInput.focus();
+            }, CONST.ANIMATED_TRANSITION)
+        }
+
         this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false);
     }
 
@@ -359,8 +362,6 @@ class BaseOptionsSelector extends Component {
                 selectTextOnFocus
                 blurOnSubmit={Boolean(this.state.allOptions.length)}
                 spellCheck={false}
-                autoFocus={this.props.isFocused && this.props.autoFocus}
-                shouldDelayFocus={this.props.shouldDelayFocus}
             />
         );
         const optionsList = (
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index dd42ed80c3d4..67d4ebb57876 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -170,6 +170,7 @@ function SearchPage({betas, personalDetails, reports}) {
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                             onLayout={searchRendered}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                            autoFocus
                         />
                     </View>
                 </>

From 7ff6e00e264ec3c659b863f123ed039eb369fc4e Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 10:37:13 +0200
Subject: [PATCH 46/49] Add missing semicolons

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

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 37edf827028f..99a0e5c5b484 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -70,7 +70,7 @@ class BaseOptionsSelector extends Component {
         if (this.props.autoFocus) {
             setTimeout(() => {
                 this.textInput.focus();
-            }, CONST.ANIMATED_TRANSITION)
+            }, CONST.ANIMATED_TRANSITION);
         }
 
         this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false);
@@ -90,7 +90,7 @@ class BaseOptionsSelector extends Component {
         if (!prevProps.isFocused && this.props.isFocused && this.props.autoFocus) {
             setTimeout(() => {
                 this.textInput.focus();
-            }, CONST.ANIMATED_TRANSITION)
+            }, CONST.ANIMATED_TRANSITION);
         }
 
         if (_.isEqual(this.props.sections, prevProps.sections)) {

From f45b2ca2f8c9225df8ef8dfdfd050449f9193a9e Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 11:10:22 +0200
Subject: [PATCH 47/49] Further autofocus improvements

---
 .../OptionsSelector/BaseOptionsSelector.js        | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 99a0e5c5b484..d328f2bc01ae 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -16,6 +16,7 @@ import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import {propTypes as optionsSelectorPropTypes, defaultProps as optionsSelectorDefaultProps} from './optionsSelectorPropTypes';
 import setSelection from '../../libs/setSelection';
 import compose from '../../libs/compose';
+import getPlatform from '../../libs/getPlatform';
 
 const propTypes = {
     /** padding bottom style of safe area */
@@ -67,7 +68,7 @@ class BaseOptionsSelector extends Component {
     componentDidMount() {
         this.subscribeToKeyboardShortcut();
 
-        if (this.props.autoFocus) {
+        if (this.props.isFocused && this.props.autoFocus) {
             setTimeout(() => {
                 this.textInput.focus();
             }, CONST.ANIMATED_TRANSITION);
@@ -86,13 +87,21 @@ class BaseOptionsSelector extends Component {
         }
 
         // Screen coming back into focus, for example
-        // when doing Cmd+Shift+K, then Cmd+K, then Cmd+Shift+K
-        if (!prevProps.isFocused && this.props.isFocused && this.props.autoFocus) {
+        // when doing Cmd+Shift+K, then Cmd+K, then Cmd+Shift+K.
+        // Only applies to platforms that support keyboard shortcuts
+        if ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform()) && !prevProps.isFocused && this.props.isFocused && this.props.autoFocus) {
             setTimeout(() => {
                 this.textInput.focus();
             }, CONST.ANIMATED_TRANSITION);
         }
 
+        // Blur when loosing focus in order not to have the input
+        // focused for a tiny period of time next time the screen
+        // is back to focus
+        if (prevProps.isFocused && !this.props.isFocused) {
+            this.textInput.blur();
+        }
+
         if (_.isEqual(this.props.sections, prevProps.sections)) {
             return;
         }

From 90b96de06f8198309917bda4a976094ed0561582 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 11:13:27 +0200
Subject: [PATCH 48/49] Hacky blur not needed anymore

---
 src/components/OptionsSelector/BaseOptionsSelector.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index d328f2bc01ae..0af213ce5dae 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -95,13 +95,6 @@ class BaseOptionsSelector extends Component {
             }, CONST.ANIMATED_TRANSITION);
         }
 
-        // Blur when loosing focus in order not to have the input
-        // focused for a tiny period of time next time the screen
-        // is back to focus
-        if (prevProps.isFocused && !this.props.isFocused) {
-            this.textInput.blur();
-        }
-
         if (_.isEqual(this.props.sections, prevProps.sections)) {
             return;
         }

From 4c478d3fc7b230fa2b9dbe070b2ec7eef960c6d4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Sep 2023 11:58:01 +0200
Subject: [PATCH 49/49] Check if ref not null

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

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 0af213ce5dae..bff9f8b6d7d0 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -68,7 +68,7 @@ class BaseOptionsSelector extends Component {
     componentDidMount() {
         this.subscribeToKeyboardShortcut();
 
-        if (this.props.isFocused && this.props.autoFocus) {
+        if (this.props.isFocused && this.props.autoFocus && this.textInput) {
             setTimeout(() => {
                 this.textInput.focus();
             }, CONST.ANIMATED_TRANSITION);
@@ -89,7 +89,7 @@ class BaseOptionsSelector extends Component {
         // Screen coming back into focus, for example
         // when doing Cmd+Shift+K, then Cmd+K, then Cmd+Shift+K.
         // Only applies to platforms that support keyboard shortcuts
-        if ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform()) && !prevProps.isFocused && this.props.isFocused && this.props.autoFocus) {
+        if ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform()) && !prevProps.isFocused && this.props.isFocused && this.props.autoFocus && this.textInput) {
             setTimeout(() => {
                 this.textInput.focus();
             }, CONST.ANIMATED_TRANSITION);