From dd7bbd9fd7172bcbaf0bbdc17aa61ffcc4c3b05a Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 17 Nov 2023 08:43:45 +0100
Subject: [PATCH 01/21] Create a useResponsiveLayout hook

---
 .../BaseAnchorForCommentsOnly.js              |  6 +-
 .../AttachmentPicker/index.native.js          |  6 +-
 .../AttachmentCarouselCellRenderer.js         |  6 +-
 .../AttachmentCarousel/CarouselButtons.js     |  8 +--
 src/components/EmojiPicker/EmojiPicker.js     |  8 ++-
 .../EmojiPicker/EmojiPickerMenu/index.js      |  6 +-
 src/components/HeaderPageLayout.js            |  6 +-
 src/components/LHNOptionsList/OptionRowLHN.js |  6 +-
 src/components/MenuItem.js                    |  6 +-
 src/components/Modal/BaseModal.tsx            |  9 ++-
 src/components/MoneyRequestHeader.js          |  6 +-
 src/components/PDFView/PDFPasswordForm.js     |  6 +-
 src/components/PopoverMenu/index.js           |  6 +-
 .../ReportActionItem/MoneyRequestPreview.js   |  7 ++-
 .../ReportActionItem/MoneyRequestView.js      |  8 +--
 src/components/ScreenWrapper/index.js         |  6 +-
 src/hooks/useResponsiveLayout.ts              | 24 ++++++++
 .../AppNavigator/ModalStackNavigators.js      |  1 +
 src/pages/NewChatPage.js                      |  6 +-
 .../report/AnimatedEmptyStateBackground.js    |  8 ++-
 .../ComposerWithSuggestions.js                | 12 ++--
 .../ReportActionCompose.js                    | 10 ++--
 .../report/ReportActionItemMessageEdit.js     | 10 ++--
 src/pages/home/sidebar/SidebarLinks.js        | 18 +++---
 src/pages/iou/ReceiptSelector/index.js        | 10 ++--
 .../settings/Wallet/WalletPage/WalletPage.js  | 10 ++--
 src/pages/signin/ChooseSSOOrMagicCode.js      |  8 +--
 src/pages/signin/LoginForm/BaseLoginForm.js   |  8 +--
 src/pages/signin/SignInModal.js               |  2 +-
 src/pages/signin/SignInPage.js                | 31 ++++-------
 src/pages/signin/SignInPageLayout/index.js    |  6 +-
 src/pages/workspace/WorkspaceNewRoomPage.js   |  6 +-
 src/styles/getModalStyles.ts                  | 55 ++++++++++---------
 src/styles/styles.ts                          |  4 +-
 34 files changed, 188 insertions(+), 147 deletions(-)
 create mode 100644 src/hooks/useResponsiveLayout.ts

diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index fc9cd1d7a043..a7a455a6a33f 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
@@ -40,7 +40,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
         [],
     );
 
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     let linkRef;
 
@@ -50,7 +50,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
     } else {
         linkProps.href = href;
     }
-    const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer};
+    const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || shouldUseNarrowLayout ? {} : {...styles.userSelectText, ...styles.cursorPointer};
     const isEmail = Str.isValidEmailMarkdown(href.replace(/mailto:/i, ''));
 
     return (
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js
index 5b955ee69dd3..3e9562fa56d9 100644
--- a/src/components/AttachmentPicker/index.native.js
+++ b/src/components/AttachmentPicker/index.native.js
@@ -12,7 +12,7 @@ import Popover from '@components/Popover';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
@@ -109,7 +109,7 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     const onCanceled = useRef();
 
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     /**
      * A generic handling when we don't know the exact reason for an error
@@ -313,7 +313,7 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
                 anchorPosition={styles.createMenuPosition}
                 onModalHide={onModalHide.current}
             >
-                <View style={!isSmallScreenWidth && styles.createMenuContainer}>
+                <View style={!shouldUseNarrowLayout && styles.createMenuContainer}>
                     {_.map(menuItemData, (item, menuIndex) => (
                         <MenuItem
                             key={item.textTranslationKey}
diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
index dd2713a38b2b..0fc7e7d18e6f 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {PixelRatio, View} from 'react-native';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useThemeStyles from '@styles/useThemeStyles';
 
@@ -15,8 +16,9 @@ const defaultProps = {
 
 function AttachmentCarouselCellRenderer(props) {
     const styles = useThemeStyles();
-    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
-    const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true);
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, true);
     const style = [props.style, styles.h100, {width: PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}];
 
     return (
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index 14a6ea268468..ce89b0c29de3 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -7,7 +7,7 @@ import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
@@ -42,13 +42,13 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
     const isForwardDisabled = page === _.size(attachments) - 1;
 
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return shouldShowArrows ? (
         <>
             {!isBackDisabled && (
                 <Tooltip text={translate('common.previous')}>
-                    <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.l2 : styles.l8]}>
+                    <View style={[styles.attachmentArrow, shouldUseNarrowLayout ? styles.l2 : styles.l8]}>
                         <Button
                             small
                             innerStyles={[styles.arrowIcon]}
@@ -64,7 +64,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
             )}
             {!isForwardDisabled && (
                 <Tooltip text={translate('common.next')}>
-                    <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.r2 : styles.r8]}>
+                    <View style={[styles.attachmentArrow, shouldUseNarrowLayout ? styles.r2 : styles.r8]}>
                         <Button
                             small
                             innerStyles={[styles.arrowIcon]}
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 9fc1224f96c0..27a53b9cfc1c 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -4,6 +4,7 @@ import {Dimensions} from 'react-native';
 import _ from 'underscore';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -33,7 +34,8 @@ const EmojiPicker = forwardRef((props, ref) => {
     const onModalHide = useRef(() => {});
     const onEmojiSelected = useRef(() => {});
     const emojiSearchInput = useRef();
-    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+    const {windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     /**
      * Show the emoji picker menu.
@@ -125,7 +127,7 @@ const EmojiPicker = forwardRef((props, ref) => {
         const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
             if (!emojiPopoverAnchor.current) {
                 // In small screen width, the window size change might be due to keyboard open/hide, we should avoid hide EmojiPicker in those cases
-                if (isEmojiPickerVisible && !isSmallScreenWidth) {
+                if (isEmojiPickerVisible && !shouldUseNarrowLayout) {
                     hideEmojiPicker();
                 }
                 return;
@@ -140,7 +142,7 @@ const EmojiPicker = forwardRef((props, ref) => {
             }
             emojiPopoverDimensionListener.remove();
         };
-    }, [isEmojiPickerVisible, isSmallScreenWidth, emojiPopoverAnchorOrigin]);
+    }, [isEmojiPickerVisible, shouldUseNarrowLayout, emojiPopoverAnchorOrigin]);
 
     // There is no way to disable animations, and they are really laggy, because there are so many
     // emojis. The best alternative is to set it to 1ms so it just "pops" in and out
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 0ee12579733d..6959959e8db2 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -11,6 +11,7 @@ import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
@@ -51,7 +52,8 @@ const throttleTime = Browser.isMobile() ? 200 : 50;
 function EmojiPickerMenu(props) {
     const {forwardedRef, frequentlyUsedEmojis, preferredSkinTone, onEmojiSelected, preferredLocale, translate} = props;
 
-    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+    const {windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // Ref for the emoji search input
     const searchInputRef = useRef(null);
@@ -473,7 +475,7 @@ function EmojiPickerMenu(props) {
         <View
             style={[
                 styles.emojiPickerContainer,
-                StyleUtils.getEmojiPickerStyle(isSmallScreenWidth),
+                StyleUtils.getEmojiPickerStyle(shouldUseNarrowLayout),
                 // Disable pointer events so that onHover doesn't get triggered when the items move while we're scrolling
                 arePointerEventsDisabled ? styles.pointerEventsNone : styles.pointerEventsAuto,
             ]}
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 260f98d208eb..198c90410c48 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -3,6 +3,7 @@ import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -53,7 +54,8 @@ const defaultProps = {
 function HeaderPageLayout({backgroundColor, children, footer, headerContainerStyles, scrollViewContainerStyles, childrenContainerStyles, style, headerContent, ...propsToPassToHeader}) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isOffline} = useNetwork();
     const appBGColor = StyleUtils.getBackgroundColorStyle(theme.appBG);
     const {titleColor, iconFill} = useMemo(() => {
@@ -85,7 +87,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
                         {Browser.isSafari() && (
                             <View style={styles.dualColorOverscrollSpacer}>
                                 <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor || theme.appBG)]} />
-                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
+                                <View style={[shouldUseNarrowLayout ? styles.flex1 : styles.flex3, appBGColor]} />
                             </View>
                         )}
                         <ScrollView
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 8420f3db7a1e..22ff5ae00071 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -15,7 +15,7 @@ import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
 import {getGroupChatName} from '@libs/GroupChatUtils';
@@ -73,7 +73,7 @@ function OptionRowLHN(props) {
     const styles = useThemeStyles();
     const popoverAnchor = useRef(null);
     const isFocusedRef = useRef(true);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const {translate} = useLocalize();
 
@@ -130,7 +130,7 @@ function OptionRowLHN(props) {
      * @param {Object} [event] - A press event.
      */
     const showPopover = (event) => {
-        if (!isFocusedRef.current && isSmallScreenWidth) {
+        if (!isFocusedRef.current && shouldUseNarrowLayout) {
             return;
         }
         setIsContextMenuActive(true);
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 103d063f9024..56b029724440 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -2,7 +2,7 @@ import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -85,7 +85,7 @@ const defaultProps = {
 };
 
 const MenuItem = React.forwardRef((props, ref) => {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [html, setHtml] = React.useState('');
 
     const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
@@ -171,7 +171,7 @@ const MenuItem = React.forwardRef((props, ref) => {
             {(isHovered) => (
                 <PressableWithSecondaryInteraction
                     onPress={props.shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, props.isAnonymousAction) : onPressAction}
-                    onPressIn={() => props.shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                    onPressIn={() => props.shouldBlockSelection && shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={props.onSecondaryInteraction}
                     style={({pressed}) => [
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index d0e309d06766..a0acce06ef24 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
@@ -43,7 +44,8 @@ function BaseModal(
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {windowWidth, windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const safeAreaInsets = useSafeAreaInsets();
 
@@ -134,13 +136,14 @@ function BaseModal(
                 {
                     windowWidth,
                     windowHeight,
-                    isSmallScreenWidth,
+                    isSmallScreenWidth: shouldUseNarrowLayout,
                 },
+                shouldUseNarrowLayout,
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
             ),
-        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, type, windowHeight, windowWidth],
+        [innerContainerStyle, shouldUseNarrowLayout, outerStyle, popoverAnchorPosition, type, windowHeight, windowWidth],
     );
 
     const {
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 178163f6569f..559ff459d787 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as HeaderUtils from '@libs/HeaderUtils';
@@ -72,7 +73,8 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
     const moneyRequestReport = parentReport;
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const isApproved = ReportUtils.isReportApproved(moneyRequestReport);
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // Only the requestor can take delete the request, admins can only edit it.
     const isActionOwner = lodashGet(parentReportAction, 'actorAccountID') === lodashGet(session, 'accountID', null);
@@ -126,7 +128,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                     }}
                     policy={policy}
                     personalDetails={personalDetails}
-                    shouldShowBackButton={isSmallScreenWidth}
+                    shouldShowBackButton={shouldUseNarrowLayout}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)}
                 />
                 {isPending && (
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index e20e2c44a76e..69e4994d3394 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -6,7 +6,7 @@ import Button from '@components/Button';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as Browser from '@libs/Browser';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -43,7 +43,7 @@ const defaultProps = {
 
 function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicator, onSubmit, onPasswordUpdated, onPasswordFieldFocused}) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
 
     const [password, setPassword] = useState('');
@@ -113,7 +113,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat
     return shouldShowForm ? (
         <ScrollView
             keyboardShouldPersistTaps="handled"
-            style={styles.getPDFPasswordFormStyle(isSmallScreenWidth)}
+            style={styles.getPDFPasswordFormStyle(shouldUseNarrowLayout)}
             contentContainerStyle={styles.p5}
         >
             <View style={styles.mb4}>
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 2106efb9d31e..1d178470522a 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -9,7 +9,7 @@ import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps as createMenuDefaultProps, propTypes as createMenuPropTypes} from './popoverMenuPropTypes';
@@ -52,7 +52,7 @@ const defaultProps = {
 
 function PopoverMenu(props) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const selectedItemIndex = useRef(null);
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: props.menuItems.length - 1, isActive: props.isVisible});
 
@@ -96,7 +96,7 @@ function PopoverMenu(props) {
             withoutOverlay={props.withoutOverlay}
             shouldSetModalVisibility={props.shouldSetModalVisibility}
         >
-            <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
+            <View style={shouldUseNarrowLayout ? {} : styles.createMenuContainer}>
                 {!_.isEmpty(props.headerText) && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{props.headerText}</Text>}
                 {_.map(props.menuItems, (item, menuIndex) => (
                     <MenuItem
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 1764b6a1171e..d4cee1ae9b87 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -15,6 +15,7 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
@@ -139,7 +140,8 @@ const defaultProps = {
 function MoneyRequestPreview(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
         return null;
@@ -294,7 +296,8 @@ function MoneyRequestPreview(props) {
                                     <Text
                                         style={[
                                             styles.textHeadline,
-                                            props.isBillSplit && StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, participantAvatars.length),
+                                            props.isBillSplit &&
+                                                StyleUtils.getAmountFontSizeAndLineHeight(shouldUseNarrowLayout, windowWidth, displayAmount.length, participantAvatars.length),
                                             isDeleted && styles.lineThrough,
                                         ]}
                                         numberOfLines={1}
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 1da061fc741e..17641e6a15b7 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -17,7 +17,7 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as CardUtils from '@libs/CardUtils';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -77,7 +77,7 @@ const defaultProps = {
 function MoneyRequestView({report, parentReport, policyCategories, shouldShowHorizontalRule, transaction, policyTags, policy}) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {canUseViolations} = usePermissions();
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
@@ -161,9 +161,9 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
     const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction;
 
     return (
-        <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)]}>
+        <View style={[StyleUtils.getReportWelcomeContainerStyle(shouldUseNarrowLayout)]}>
             <AnimatedEmptyStateBackground />
-            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
+            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(shouldUseNarrowLayout)]}>
                 {hasReceipt && (
                     <OfflineWithFeedback pendingAction={pendingAction}>
                         <View style={styles.moneyRequestViewImage}>
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index f9173c15da7d..610a0cf1fb31 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -14,6 +14,7 @@ import useEnvironment from '@hooks/useEnvironment';
 import useInitialDimensions from '@hooks/useInitialWindowDimensions';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import styles from '@styles/styles';
@@ -42,7 +43,8 @@ const ScreenWrapper = React.forwardRef(
         },
         ref,
     ) => {
-        const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+        const {windowHeight} = useWindowDimensions();
+        const {shouldUseNarrowLayout} = useResponsiveLayout();
         const {initialHeight} = useInitialDimensions();
         const keyboardState = useKeyboardState();
         const {isDevelopment} = useEnvironment();
@@ -159,7 +161,7 @@ const ScreenWrapper = React.forwardRef(
                                                   })
                                                 : children
                                         }
-                                        {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
+                                        {shouldUseNarrowLayout && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
                                     </PickerAvoidingView>
                                 </KeyboardAvoidingView>
                             </View>
diff --git a/src/hooks/useResponsiveLayout.ts b/src/hooks/useResponsiveLayout.ts
new file mode 100644
index 000000000000..5b746e0035b1
--- /dev/null
+++ b/src/hooks/useResponsiveLayout.ts
@@ -0,0 +1,24 @@
+import {ParamListBase, RouteProp, useRoute} from '@react-navigation/native';
+import useWindowDimensions from './useWindowDimensions';
+
+type RouteParams = ParamListBase & {
+    params: {isInRHP?: boolean};
+};
+type ResponsiveLayoutResult = {
+    shouldUseNarrowLayout: boolean;
+};
+/**
+ * Hook to determine if we are on mobile devices or in the RHP
+ */
+export default function useResponsiveLayout(): ResponsiveLayoutResult {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const {params} = useRoute<RouteProp<RouteParams, 'params'>>();
+        return {shouldUseNarrowLayout: isSmallScreenWidth || (params?.isInRHP ?? false)};
+    } catch (error) {
+        return {
+            shouldUseNarrowLayout: false,
+        };
+    }
+}
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 2f0a75a02cc3..a5ccafa30560 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -27,6 +27,7 @@ function createModalStackNavigator(screens) {
                         key={name}
                         name={name}
                         getComponent={getComponent}
+                        initialParams={{isInRHP: true}}
                     />
                 ))}
             </ModalStackNavigator.Navigator>
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 90b2615f901c..764e0d856d61 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -11,7 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useNetwork from '@hooks/useNetwork';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
@@ -60,7 +60,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
     const [filteredUserToInvite, setFilteredUserToInvite] = useState();
     const [selectedOptions, setSelectedOptions] = useState([]);
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
     const headerMessage = OptionsListUtils.getHeaderMessage(
@@ -263,7 +263,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
                             autoFocus={false}
                         />
                     </View>
-                    {isSmallScreenWidth && <OfflineIndicator />}
+                    {shouldUseNarrowLayout && <OfflineIndicator />}
                 </KeyboardAvoidingView>
             )}
         </ScreenWrapper>
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 6091347a24a2..01c63639abad 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
 import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade.png';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as NumberUtils from '@libs/NumberUtils';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -10,7 +11,8 @@ import CONST from '@src/CONST';
 const IMAGE_OFFSET_Y = 75;
 
 function AnimatedEmptyStateBackground() {
-    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const IMAGE_OFFSET_X = windowWidth / 2;
 
     // If window width is greater than the max background width, repeat the background image
@@ -23,7 +25,7 @@ function AnimatedEmptyStateBackground() {
 
     // Apply data to create style object
     const animatedStyles = useAnimatedStyle(() => {
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             return {};
         }
         /*
@@ -42,7 +44,7 @@ function AnimatedEmptyStateBackground() {
     return (
         <Animated.Image
             source={EmptyStateBackgroundImage}
-            style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
+            style={[StyleUtils.getReportWelcomeBackgroundImageStyle(shouldUseNarrowLayout), animatedStyles]}
             resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
         />
     );
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index e376e8481c0c..86b57baf7a59 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -9,7 +9,7 @@ import withKeyboardState from '@components/withKeyboardState';
 import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -122,8 +122,8 @@ function ComposerWithSuggestions({
     });
     const commentRef = useRef(value);
 
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const maxComposerLines = isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const maxComposerLines = shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
 
     const isEmptyChat = useMemo(() => _.size(reportActions) === 1, [reportActions]);
     const parentAction = ReportActionsUtils.getParentReportAction(report);
@@ -148,7 +148,7 @@ function ComposerWithSuggestions({
 
     const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, suggestions.length);
 
-    const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion);
+    const isAutoSuggestionPickerLarge = !shouldUseNarrowLayout || (shouldUseNarrowLayout && hasEnoughSpaceForLargeSuggestion);
 
     /**
      * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
@@ -333,7 +333,7 @@ function ComposerWithSuggestions({
 
     const triggerHotkeyActions = useCallback(
         (e) => {
-            if (!e || ComposerUtils.canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown)) {
+            if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
                 return;
             }
 
@@ -363,7 +363,7 @@ function ComposerWithSuggestions({
                 }
             }
         },
-        [isKeyboardShown, isSmallScreenWidth, parentReportActions, report, reportActions, reportID, handleSendMessage, suggestionsRef, valueRef],
+        [isKeyboardShown, shouldUseNarrowLayout, parentReportActions, report, reportActions, reportID, handleSendMessage, suggestionsRef, valueRef],
     );
 
     const onSelectionChange = useCallback(
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index 7bce37dc3826..66bda3bc784e 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -15,6 +15,7 @@ import {withNetwork} from '@components/OnyxProvider';
 import participantPropTypes from '@components/participantPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -118,7 +119,8 @@ function ReportActionCompose({
 }) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {isMediumScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const animatedRef = useAnimatedRef();
     const actionButtonRef = useRef(null);
 
@@ -169,7 +171,7 @@ function ReportActionCompose({
 
     // If we are on a small width device then don't show last 3 items from conciergePlaceholderOptions
     const conciergePlaceholderRandomIndex = useMemo(
-        () => _.random(translate('reportActionCompose.conciergePlaceholderOptions').length - (isSmallScreenWidth ? 4 : 1)),
+        () => _.random(translate('reportActionCompose.conciergePlaceholderOptions').length - (shouldUseNarrowLayout ? 4 : 1)),
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [],
     );
@@ -447,10 +449,10 @@ function ReportActionCompose({
                             styles.flexRow,
                             styles.justifyContentBetween,
                             styles.alignItemsCenter,
-                            (!isSmallScreenWidth || (isSmallScreenWidth && !network.isOffline)) && styles.chatItemComposeSecondaryRow,
+                            (!shouldUseNarrowLayout || (shouldUseNarrowLayout && !network.isOffline)) && styles.chatItemComposeSecondaryRow,
                         ]}
                     >
-                        {!isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
+                        {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                         <ReportTypingIndicator reportID={reportID} />
                         <ExceededCommentLength
                             reportID={reportID}
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index b723ddd93582..36ab15eb6a8f 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -16,7 +16,7 @@ import Tooltip from '@components/Tooltip';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useReportScrollManager from '@hooks/useReportScrollManager';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as Browser from '@libs/Browser';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import * as EmojiUtils from '@libs/EmojiUtils';
@@ -85,7 +85,7 @@ function ReportActionItemMessageEdit(props) {
     const reportScrollManager = useReportScrollManager();
     const {translate, preferredLocale} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const getInitialDraft = () => {
         if (props.draftMessage === props.action.message[0].html) {
@@ -346,7 +346,7 @@ function ReportActionItemMessageEdit(props) {
      */
     const triggerSaveOrCancel = useCallback(
         (e) => {
-            if (!e || ComposerUtils.canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown)) {
+            if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
                 return;
             }
             if (e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && !e.shiftKey) {
@@ -357,7 +357,7 @@ function ReportActionItemMessageEdit(props) {
                 deleteDraft();
             }
         },
-        [deleteDraft, isKeyboardShown, isSmallScreenWidth, publishDraft],
+        [deleteDraft, isKeyboardShown, shouldUseNarrowLayout, publishDraft],
     );
 
     /**
@@ -407,7 +407,7 @@ function ReportActionItemMessageEdit(props) {
                             onChangeText={updateDraft} // Debounced saveDraftComment
                             onKeyPress={triggerSaveOrCancel}
                             value={draft}
-                            maxLines={isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has
+                            maxLines={shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has
                             style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
                             onFocus={() => {
                                 setIsFocused(true);
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 5e69be266342..a4c05af6aa09 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -12,7 +12,7 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
 import onyxSubscribe from '@libs/onyxSubscribe';
@@ -56,14 +56,14 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
     const styles = useThemeStyles();
     const modal = useRef({});
     const {translate, updateLocale} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     useEffect(() => {
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             return;
         }
         App.confirmReadyToOpenApp();
-    }, [isSmallScreenWidth]);
+    }, [shouldUseNarrowLayout]);
 
     useEffect(() => {
         App.setSidebarLoaded();
@@ -137,13 +137,17 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
             // or when continuously clicking different LHNs, only apply to small screen
             // since getTopmostReportId always returns on other devices
             const reportActionID = Navigation.getTopmostReportActionId();
-            if (isCreateMenuOpen || (option.reportID === Navigation.getTopmostReportId() && !reportActionID) || (isSmallScreenWidth && isActiveReport(option.reportID) && !reportActionID)) {
+            if (
+                isCreateMenuOpen ||
+                (option.reportID === Navigation.getTopmostReportId() && !reportActionID) ||
+                (shouldUseNarrowLayout && isActiveReport(option.reportID) && !reportActionID)
+            ) {
                 return;
             }
             Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID));
             onLinkClick();
         },
-        [isCreateMenuOpen, isSmallScreenWidth, isActiveReport, onLinkClick],
+        [isCreateMenuOpen, shouldUseNarrowLayout, isActiveReport, onLinkClick],
     );
 
     const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT;
@@ -183,7 +187,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 contentContainerStyles={[styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
                 data={optionListItems}
                 onSelectRow={showReportPage}
-                shouldDisableFocusOptions={isSmallScreenWidth}
+                shouldDisableFocusOptions={shouldUseNarrowLayout}
                 optionMode={viewMode}
             />
             {isLoading && <OptionsListSkeletonView shouldAnimate />}
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
index dd7c2e3a104e..2c17887778b3 100644
--- a/src/pages/iou/ReceiptSelector/index.js
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -15,7 +15,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -73,7 +73,7 @@ function ReceiptSelector({route, transactionID, iou, report}) {
     const [attachmentInvalidReason, setAttachmentValidReason] = useState('');
 
     const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {isDraggingOver} = useContext(DragAndDropContext);
 
@@ -271,12 +271,12 @@ function ReceiptSelector({route, transactionID, iou, report}) {
             >
                 <Text style={[styles.textReceiptUpload]}>{translate('receipt.upload')}</Text>
                 <Text style={[styles.subTextReceiptUpload]}>
-                    {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
+                    {shouldUseNarrowLayout ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
                     <CopyTextToClipboard
                         text={CONST.EMAIL.RECEIPTS}
                         textStyles={[styles.textBlue]}
                     />
-                    {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')}
+                    {shouldUseNarrowLayout ? null : translate('receipt.dragReceiptAfterEmail')}
                 </Text>
             </View>
 
@@ -302,7 +302,7 @@ function ReceiptSelector({route, transactionID, iou, report}) {
     );
 
     return (
-        <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(isSmallScreenWidth)]}>
+        <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(shouldUseNarrowLayout)]}>
             {!isDraggingOver && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
             <ReceiptDropUI
                 onDrop={(e) => {
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 23d4112eea21..5340f948d078 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -20,6 +20,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import WalletSection from '@components/WalletSection';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
@@ -42,7 +43,8 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
     const [shouldShowDefaultDeleteMenu, setShouldShowDefaultDeleteMenu] = useState(false);
     const [shouldShowLoadingSpinner, setShouldShowLoadingSpinner] = useState(false);
@@ -313,7 +315,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
         !(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.BANK_ACCOUNT && paymentMethod.selectedPaymentMethod.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
 
     // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens
-    const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || isSmallScreenWidth;
+    const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || shouldUseNarrowLayout;
     const alertTextStyle = [styles.inlineSystemMessage, styles.flexShrink1];
     const alertViewStyle = [styles.flexRow, styles.alignItemsCenter, styles.w100, styles.ph5];
 
@@ -492,7 +494,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                         onModalHide={resetSelectedPaymentMethodData}
                     >
                         {!showConfirmDeleteContent ? (
-                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                            <View style={[styles.m5, !shouldUseNarrowLayout ? styles.sidebarPopover : '']}>
                                 {isPopoverBottomMount && (
                                     <MenuItem
                                         title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
@@ -527,7 +529,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
                                     hideDefaultDeleteMenu();
                                 }}
                                 onCancel={hideDefaultDeleteMenu}
-                                contentStyles={!isSmallScreenWidth ? [styles.sidebarPopover, styles.willChangeTransform] : undefined}
+                                contentStyles={!shouldUseNarrowLayout ? [styles.sidebarPopover, styles.willChangeTransform] : undefined}
                                 title={translate('walletPage.deleteAccount')}
                                 prompt={translate('walletPage.deleteConfirmation')}
                                 confirmText={translate('common.delete')}
diff --git a/src/pages/signin/ChooseSSOOrMagicCode.js b/src/pages/signin/ChooseSSOOrMagicCode.js
index bfb704b71f6d..9fe98483c535 100644
--- a/src/pages/signin/ChooseSSOOrMagicCode.js
+++ b/src/pages/signin/ChooseSSOOrMagicCode.js
@@ -8,7 +8,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -56,12 +56,12 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <>
             <View>
-                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
+                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
                 <Button
                     isDisabled={isOffline}
                     success
@@ -74,7 +74,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}) {
                 />
 
                 <View style={[styles.mt5]}>
-                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>
+                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>
                         {translate('samlSignIn.orContinueWithMagicCode')}
                     </Text>
                 </View>
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index e48446360605..4c37fbd2c7c5 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -1,3 +1,4 @@
+import {useRoute} from '@react-navigation/native';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
@@ -70,9 +71,6 @@ const propTypes = {
     /** Props to detect online status */
     network: networkPropTypes.isRequired,
 
-    /** Whether or not the sign in page is being rendered in the RHP modal */
-    isInModal: PropTypes.bool,
-
     isVisible: PropTypes.bool.isRequired,
 
     /** Whether navigation is focused */
@@ -91,7 +89,6 @@ const defaultProps = {
     closeAccount: {},
     blurOnSubmit: false,
     innerRef: () => {},
-    isInModal: false,
 };
 
 function LoginForm(props) {
@@ -101,6 +98,7 @@ function LoginForm(props) {
     const [formError, setFormError] = useState(false);
     const prevIsVisible = usePrevious(props.isVisible);
     const firstBlurred = useRef(false);
+    const route = useRoute();
 
     const {translate} = props;
 
@@ -211,7 +209,7 @@ function LoginForm(props) {
             return;
         }
         let focusTimeout;
-        if (props.isInModal) {
+        if (_.get(route, 'params.isInRHP', false)) {
             focusTimeout = setTimeout(() => input.current.focus(), CONST.ANIMATED_TRANSITION);
         } else {
             input.current.focus();
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 9784eb0b67a1..8fdf16d7e305 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -26,7 +26,7 @@ function SignInModal() {
             testID={SignInModal.displayName}
         >
             <HeaderWithBackButton onBackButtonPress={Navigation.dismissModal} />
-            <SignInPage isInModal />
+            <SignInPage />
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 8d3b10ce606d..15158d0b0378 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -6,7 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import getPlatform from '@libs/getPlatform';
 import * as Localize from '@libs/Localize';
@@ -68,9 +68,6 @@ const propTypes = {
     /** Active Clients connected to ONYX Database */
     activeClients: PropTypes.arrayOf(PropTypes.string),
 
-    /** Whether or not the sign in page is being rendered in the RHP modal */
-    isInModal: PropTypes.bool,
-
     /** The user's preferred locale */
     preferredLocale: PropTypes.string,
 };
@@ -78,7 +75,6 @@ const propTypes = {
 const defaultProps = {
     account: {},
     credentials: {},
-    isInModal: false,
     activeClients: [],
     preferredLocale: '',
 };
@@ -135,11 +131,10 @@ function getRenderOptions({hasLogin, hasValidateCode, account, isPrimaryLogin, i
     };
 }
 
-function SignInPage({credentials, account, isInModal, activeClients, preferredLocale}) {
+function SignInPage({credentials, account, activeClients, preferredLocale}) {
     const styles = useThemeStyles();
     const {translate, formatPhoneNumber} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const shouldShowSmallScreen = isSmallScreenWidth || isInModal;
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const safeAreaInsets = useSafeAreaInsets();
     const signInPageLayoutRef = useRef();
     /** This state is needed to keep track of if user is using recovery code instead of 2fa code,
@@ -196,12 +191,12 @@ function SignInPage({credentials, account, isInModal, activeClients, preferredLo
         welcomeHeader = translate('welcomeText.anotherLoginPageIsOpen');
         welcomeText = translate('welcomeText.anotherLoginPageIsOpenExplanation');
     } else if (shouldShowLoginForm) {
-        welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.getStarted');
-        welcomeText = isSmallScreenWidth ? translate('welcomeText.getStarted') : '';
+        welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.getStarted');
+        welcomeText = shouldUseNarrowLayout ? translate('welcomeText.getStarted') : '';
     } else if (shouldShowValidateCodeForm) {
         if (account.requiresTwoFactorAuth) {
             // We will only know this after a user signs in successfully, without their 2FA code
-            welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
+            welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack');
             welcomeText = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode');
         } else {
             const userLogin = Str.removeSMSDomain(credentials.login || '');
@@ -209,19 +204,19 @@ function SignInPage({credentials, account, isInModal, activeClients, preferredLo
             // replacing spaces with "hard spaces" to prevent breaking the number
             const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
             if (account.validated) {
-                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcomeBack');
-                welcomeText = shouldShowSmallScreen
+                welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack');
+                welcomeText = shouldUseNarrowLayout
                     ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
             } else {
-                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcome');
-                welcomeText = shouldShowSmallScreen
+                welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcome');
+                welcomeText = shouldUseNarrowLayout
                     ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
             }
         }
     } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) {
-        welcomeHeader = shouldShowSmallScreen ? headerText : translate('welcomeText.welcomeBack');
+        welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.welcomeBack');
 
         // Don't show any welcome text if we're showing the user the email delivery failed view
         if (shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) {
@@ -238,15 +233,13 @@ function SignInPage({credentials, account, isInModal, activeClients, preferredLo
             <SignInPageLayout
                 welcomeHeader={welcomeHeader}
                 welcomeText={welcomeText}
-                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal}
+                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !shouldUseNarrowLayout}
                 shouldShowWelcomeText={shouldShowWelcomeText}
                 ref={signInPageLayoutRef}
-                isInModal={isInModal}
             >
                 {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
              so that password managers can access the values. Conditionally rendering this component will break this feature. */}
                 <LoginForm
-                    isInModal={isInModal}
                     isVisible={shouldShowLoginForm}
                     blurOnSubmit={account.validated === false}
                     scrollPageToTop={signInPageLayoutRef.current && signInPageLayoutRef.current.scrollPageToTop}
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index a9b48acbd90b..0260a170193d 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -38,9 +38,6 @@ const propTypes = {
     /** A reference so we can expose scrollPageToTop */
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
-    /** Whether or not the sign in page is being rendered in the RHP modal */
-    isInModal: PropTypes.bool,
-
     /** Override the green headline copy */
     customHeadline: PropTypes.string,
 
@@ -53,7 +50,6 @@ const propTypes = {
 
 const defaultProps = {
     innerRef: () => {},
-    isInModal: false,
     customHeadline: '',
     customHeroBody: '',
 };
@@ -65,7 +61,7 @@ function SignInPageLayout(props) {
     const prevPreferredLocale = usePrevious(props.preferredLocale);
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
-    const shouldShowSmallScreen = props.isSmallScreenWidth || props.isInModal;
+    const shouldShowSmallScreen = props.shouldUseNarrowLayout;
 
     // To scroll on both mobile and web, we need to set the container height manually
     const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 2174c23bdf92..1a057d56a99c 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -16,7 +16,7 @@ import withNavigationFocus from '@components/withNavigationFocus';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Permissions from '@libs/Permissions';
@@ -78,7 +78,7 @@ function WorkspaceNewRoomPage(props) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED);
     const [policyID, setPolicyID] = useState(null);
     const [writeCapability, setWriteCapability] = useState(CONST.REPORT.WRITE_CAPABILITIES.ALL);
@@ -247,7 +247,7 @@ function WorkspaceNewRoomPage(props) {
                             </View>
                             <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
                         </Form>
-                        {isSmallScreenWidth && <OfflineIndicator />}
+                        {shouldUseNarrowLayout && <OfflineIndicator />}
                     </KeyboardAvoidingView>
                 )}
             </ScreenWrapper>
diff --git a/src/styles/getModalStyles.ts b/src/styles/getModalStyles.ts
index c250bdf9498d..ffbd553179db 100644
--- a/src/styles/getModalStyles.ts
+++ b/src/styles/getModalStyles.ts
@@ -6,12 +6,12 @@ import styles from './styles';
 import themeColors from './themes/default';
 import variables from './variables';
 
-function getCenteredModalStyles(windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
-    const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
+function getCenteredModalStyles(windowWidth: number, shouldUseNarrowLayout: boolean, isFullScreenWhenSmall = false): ViewStyle {
+    const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, isFullScreenWhenSmall);
 
     return {
         borderWidth: modalStyles.borderWidth,
-        width: isSmallScreenWidth ? '100%' : windowWidth - modalStyles.marginHorizontal * 2,
+        width: shouldUseNarrowLayout ? '100%' : windowWidth - modalStyles.marginHorizontal * 2,
     };
 }
 
@@ -39,11 +39,12 @@ type GetModalStyles = {
 export default function getModalStyles(
     type: ModalType | undefined,
     windowDimensions: WindowDimensions,
+    shouldUseNarrowLayout: boolean,
     popoverAnchorPosition: ViewStyle = {},
     innerContainerStyle: ViewStyle = {},
     outerStyle: ViewStyle = {},
 ): GetModalStyles {
-    const {isSmallScreenWidth, windowWidth} = windowDimensions;
+    const {windowWidth} = windowDimensions;
 
     let modalStyle: GetModalStyles['modalStyle'] = {
         margin: 0,
@@ -97,20 +98,20 @@ export default function getModalStyles(
             modalContainerStyle = {
                 boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
                 flex: 1,
-                marginTop: isSmallScreenWidth ? 0 : 20,
-                marginBottom: isSmallScreenWidth ? 0 : 20,
-                borderRadius: isSmallScreenWidth ? 0 : 12,
+                marginTop: shouldUseNarrowLayout ? 0 : 20,
+                marginBottom: shouldUseNarrowLayout ? 0 : 20,
+                borderRadius: shouldUseNarrowLayout ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth),
+                ...getCenteredModalStyles(windowWidth, shouldUseNarrowLayout),
             };
 
             // Allow this modal to be dismissed with a swipe down or swipe right
             swipeDirection = ['down', 'right'];
-            animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
-            animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
-            shouldAddTopSafeAreaMargin = !isSmallScreenWidth;
-            shouldAddBottomSafeAreaMargin = !isSmallScreenWidth;
-            shouldAddTopSafeAreaPadding = isSmallScreenWidth;
+            animationIn = shouldUseNarrowLayout ? 'slideInRight' : 'fadeIn';
+            animationOut = shouldUseNarrowLayout ? 'slideOutRight' : 'fadeOut';
+            shouldAddTopSafeAreaMargin = !shouldUseNarrowLayout;
+            shouldAddBottomSafeAreaMargin = !shouldUseNarrowLayout;
+            shouldAddTopSafeAreaPadding = shouldUseNarrowLayout;
             shouldAddBottomSafeAreaPadding = false;
             break;
         case CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE:
@@ -124,18 +125,18 @@ export default function getModalStyles(
             modalContainerStyle = {
                 boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
                 flex: 1,
-                marginTop: isSmallScreenWidth ? 0 : 20,
-                marginBottom: isSmallScreenWidth ? 0 : 20,
-                borderRadius: isSmallScreenWidth ? 0 : 12,
+                marginTop: shouldUseNarrowLayout ? 0 : 20,
+                marginBottom: shouldUseNarrowLayout ? 0 : 20,
+                borderRadius: shouldUseNarrowLayout ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth, true),
+                ...getCenteredModalStyles(windowWidth, shouldUseNarrowLayout, true),
             };
             swipeDirection = undefined;
-            animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
-            animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
-            shouldAddTopSafeAreaMargin = !isSmallScreenWidth;
-            shouldAddBottomSafeAreaMargin = !isSmallScreenWidth;
-            shouldAddTopSafeAreaPadding = isSmallScreenWidth;
+            animationIn = shouldUseNarrowLayout ? 'slideInRight' : 'fadeIn';
+            animationOut = shouldUseNarrowLayout ? 'slideOutRight' : 'fadeOut';
+            shouldAddTopSafeAreaMargin = !shouldUseNarrowLayout;
+            shouldAddBottomSafeAreaMargin = !shouldUseNarrowLayout;
+            shouldAddTopSafeAreaPadding = shouldUseNarrowLayout;
             shouldAddBottomSafeAreaPadding = false;
             break;
         case CONST.MODAL.MODAL_TYPE.CENTERED_SMALL:
@@ -211,21 +212,21 @@ export default function getModalStyles(
             modalStyle = {
                 ...modalStyle,
                 ...{
-                    marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth,
-                    width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+                    marginLeft: shouldUseNarrowLayout ? 0 : windowWidth - variables.sideBarWidth,
+                    width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
                     flexDirection: 'row',
                     justifyContent: 'flex-end',
                 },
             };
             modalContainerStyle = {
-                width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+                width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
                 height: '100%',
                 overflow: 'hidden',
             };
 
             animationIn = {
                 from: {
-                    translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
+                    translateX: shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth,
                 },
                 to: {
                     translateX: 0,
@@ -236,7 +237,7 @@ export default function getModalStyles(
                     translateX: 0,
                 },
                 to: {
-                    translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
+                    translateX: shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth,
                 },
             };
             hideBackdrop = true;
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 63e219d7e953..e3f5be0d57ab 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -802,10 +802,10 @@ const styles = (theme: ThemeColors) =>
             color: theme.textSupporting,
         },
 
-        uploadReceiptView: (isSmallScreenWidth: boolean) =>
+        uploadReceiptView: (shouldUseNarrowLayout: boolean) =>
             ({
                 borderRadius: variables.componentBorderRadiusLarge,
-                borderWidth: isSmallScreenWidth ? 0 : 2,
+                borderWidth: shouldUseNarrowLayout ? 0 : 2,
                 borderColor: theme.borderFocus,
                 borderStyle: 'dotted',
                 marginBottom: 20,

From 0a99449ae0d2525acd9f45a9d478e094fcfc8b5e Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 17 Nov 2023 09:17:35 +0100
Subject: [PATCH 02/21] Fix SignInPageLayout to use useResponsiveLayout

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

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 0260a170193d..0753c42e7d37 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -6,6 +6,7 @@ import SignInGradient from '@assets/images/home-fade-gradient.svg';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -61,7 +62,7 @@ function SignInPageLayout(props) {
     const prevPreferredLocale = usePrevious(props.preferredLocale);
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
-    const shouldShowSmallScreen = props.shouldUseNarrowLayout;
+    const shouldShowSmallScreen = useResponsiveLayout();
 
     // To scroll on both mobile and web, we need to set the container height manually
     const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;

From 133e0df2494961ec1329cebce2b5fc97319dc778 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Wed, 29 Nov 2023 23:38:20 +0100
Subject: [PATCH 03/21] run prettier

---
 src/pages/signin/SignInHeroImage.js                    | 2 +-
 src/pages/signin/SignInPageLayout/Footer.js            | 2 +-
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +-
 src/pages/signin/SignInPageLayout/index.js             | 4 +---
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index 78cdd8182160..f3c3d7a640e7 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/src/pages/signin/SignInHeroImage.js
@@ -3,9 +3,9 @@ import React from 'react';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index b1e002bef3aa..d7176c77dbd2 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -8,6 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import Licenses from '@pages/signin/Licenses';
 import Socials from '@pages/signin/Socials';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -16,7 +17,6 @@ import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     ...withLocalizePropTypes,
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index ef582b0bbe07..edf0d78a0bc3 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -7,13 +7,13 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     /** The children to show inside the layout */
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 1559d92f963a..682abd5b1676 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -171,9 +171,7 @@ function SignInPageLayout(props) {
                         </SignInPageContent>
                     </View>
                     <View style={[styles.flex0]}>
-                        <Footer
-                            scrollPageToTop={scrollPageToTop}
-                        />
+                        <Footer scrollPageToTop={scrollPageToTop} />
                     </View>
                 </ScrollView>
             )}

From eda67554e9d2a584b07f4c327305bee340d22959 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Wed, 29 Nov 2023 23:51:38 +0100
Subject: [PATCH 04/21] fix lint errors

---
 src/pages/signin/SignInHeroImage.js                    | 2 --
 src/pages/signin/SignInPage.js                         | 2 +-
 src/pages/signin/SignInPageLayout/Footer.js            | 1 -
 src/pages/signin/SignInPageLayout/SignInPageContent.js | 1 -
 4 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index f3c3d7a640e7..cebd8e1c1913 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/src/pages/signin/SignInHeroImage.js
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
@@ -45,6 +44,5 @@ function SignInHeroImage(props) {
 
 SignInHeroImage.displayName = 'SignInHeroImage';
 SignInHeroImage.propTypes = propTypes;
-SignInHeroImage.defaultProps = defaultProps;
 
 export default withWindowDimensions(SignInHeroImage);
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index c7f9f5cbed32..7bd1509d3356 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -231,7 +231,7 @@ function SignInPageInner({credentials, account, activeClients, preferredLocale})
     return (
         // Bottom SafeAreaView is removed so that login screen svg displays correctly on mobile.
         // The SVG should flow under the Home Indicator on iOS.
-        <View style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: isInModal ? 0 : safeAreaInsets.top}, 1)]}>
+        <View style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: shouldUseNarrowLayout ? 0 : safeAreaInsets.top}, 1)]}>
             <SignInPageLayout
                 welcomeHeader={welcomeHeader}
                 welcomeText={welcomeText}
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index d7176c77dbd2..cbff6267b1ad 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -217,6 +217,5 @@ function Footer(props) {
 
 Footer.propTypes = propTypes;
 Footer.displayName = 'Footer';
-Footer.defaultProps = defaultProps;
 
 export default withLocalize(Footer);
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index edf0d78a0bc3..1700da1f0e54 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -8,7 +8,6 @@ import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
 import * as StyleUtils from '@styles/StyleUtils';

From 3c8333e5965f6a1f80a972f69b20f2cad92f0389 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 8 Dec 2023 19:36:31 +0100
Subject: [PATCH 05/21] fix bug: Unable to open any kind of popover

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

diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index c13d9e1a0931..564b2b7d3955 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -8,20 +8,23 @@ import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function Popover(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {onOpen, close} = React.useContext(PopoverContext);
     const insets = useSafeAreaInsets();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} =
         StyleUtils.getModalStyles(
             'popover',
             {
                 windowWidth: props.windowWidth,
                 windowHeight: props.windowHeight,
-                isSmallScreenWidth: false,
             },
+            shouldUseNarrowLayout,
             props.anchorPosition,
             props.innerContainerStyle,
             props.outerStyle,

From 358c55d1ab8e139d31a0e48de23e444a8bc2d03b Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 8 Dec 2023 20:22:27 +0100
Subject: [PATCH 06/21] replace remaining usage of isSmallScreenWidth from
 useWindowDimensions with useResponsiveLayout hook

---
 src/components/OfflineIndicator.tsx           |  8 +++----
 src/components/ReportHeaderSkeletonView.tsx   |  8 +++----
 .../Navigation/AppNavigator/AuthScreens.tsx   |  9 +++----
 .../Navigators/RightModalNavigator.tsx        |  7 +++---
 .../index.native.tsx                          |  8 +++----
 .../createCustomStackNavigator/index.tsx      |  8 +++----
 .../getRootNavigatorScreenOptions.ts          | 24 +++++++++----------
 .../modalCardStyleInterpolator.ts             |  6 ++---
 src/libs/Navigation/NavigationRoot.tsx        | 10 ++++----
 src/pages/home/HeaderView.js                  | 12 ++++++----
 src/pages/home/ReportScreen.js                |  7 +++---
 src/pages/home/sidebar/SidebarScreen/index.js |  5 ++--
 .../sidebar/SidebarScreen/index.native.js     |  5 ++--
 .../request/step/IOURequestStepScan/index.js  |  9 +++----
 .../Security/TwoFactorAuth/Steps/CodesStep.js |  6 +++--
 src/styles/styles.ts                          | 10 ++++----
 16 files changed, 76 insertions(+), 66 deletions(-)

diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index b402caa2c750..4d0f4f9f529d 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -2,12 +2,12 @@ import React, {useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type OfflineIndicatorProps = {
     /** Optional styles for container element that will override the default styling for the offline indicator */
@@ -21,15 +21,15 @@ function OfflineIndicator({style, containerStyles}: OfflineIndicatorProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const computedStyles = useMemo((): StyleProp<ViewStyle> => {
         if (containerStyles) {
             return containerStyles;
         }
 
-        return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
-    }, [containerStyles, isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
+        return shouldUseNarrowLayout ? styles.offlineIndicatorMobile : styles.offlineIndicator;
+    }, [containerStyles, shouldUseNarrowLayout, styles.offlineIndicatorMobile, styles.offlineIndicator]);
 
     if (!isOffline) {
         return null;
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index acc9261889bc..6c1a89a34136 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
@@ -11,6 +10,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type ReportHeaderSkeletonViewProps = {
     shouldAnimate?: boolean;
@@ -20,12 +20,12 @@ function ReportHeaderSkeletonView({shouldAnimate = true}: ReportHeaderSkeletonVi
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <View style={[styles.appContentHeader]}>
-            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
-                {isSmallScreenWidth && (
+            <View style={[styles.appContentHeaderTitle, !shouldUseNarrowLayout && styles.pl5]}>
+                {shouldUseNarrowLayout && (
                     <PressableWithFeedback
                         onPress={() => {}}
                         style={[styles.LHNToggle]}
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 5e8a9f502dc5..5ffa30e75e37 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -37,6 +37,7 @@ import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type AuthScreensProps = {
     /** Session of currently logged in user */
@@ -132,8 +133,8 @@ const modalScreenListeners = {
 
 function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoomID, demoInfo, isUsingMemoryOnlyKeys = false}: AuthScreensProps) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles);
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
@@ -252,8 +253,8 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom
     }, []);
 
     return (
-        <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
-            <RootStack.Navigator isSmallScreenWidth={isSmallScreenWidth}>
+        <View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}>
+            <RootStack.Navigator shouldUseNarrowLayout={shouldUseNarrowLayout}>
                 <RootStack.Screen
                     name={SCREENS.HOME}
                     options={screenOptions.homeScreen}
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index 75358648be59..116d8d335abe 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -9,6 +9,7 @@ import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigati
 import useThemeStyles from '@styles/useThemeStyles';
 import NAVIGATORS from '@src/NAVIGATORS';
 import Overlay from './Overlay';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type RightModalNavigatorProps = StackScreenProps<AuthScreensParamList, typeof NAVIGATORS.RIGHT_MODAL_NAVIGATOR>;
 
@@ -16,13 +17,13 @@ const Stack = createStackNavigator<RightModalNavigatorParamList>();
 
 function RightModalNavigator({navigation}: RightModalNavigatorProps) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]);
 
     return (
         <NoDropZone>
-            {!isSmallScreenWidth && <Overlay onPress={navigation.goBack} />}
-            <View style={styles.RHPNavigatorContainer(isSmallScreenWidth)}>
+            {!shouldUseNarrowLayout && <Overlay onPress={navigation.goBack} />}
+            <View style={styles.RHPNavigatorContainer(shouldUseNarrowLayout)}>
                 <Stack.Navigator screenOptions={screenOptions}>
                     <Stack.Screen
                         name="Settings"
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
index a55c74f3a479..d43142fe0815 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
@@ -1,16 +1,16 @@
 import {createNavigatorFactory, ParamListBase, StackActionHelpers, StackNavigationState, useNavigationBuilder} from '@react-navigation/native';
 import {StackNavigationEventMap, StackNavigationOptions, StackView} from '@react-navigation/stack';
 import React, {useRef} from 'react';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const isSmallScreenWidthRef = useRef(isSmallScreenWidth);
+    const shouldUseNarrowLayoutRef = useRef(shouldUseNarrowLayout);
 
-    isSmallScreenWidthRef.current = isSmallScreenWidth;
+    shouldUseNarrowLayoutRef.current = shouldUseNarrowLayout;
 
     const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder<
         StackNavigationState<ParamListBase>,
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
index dd2e548064c4..a2c13f597f53 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
@@ -1,10 +1,10 @@
 import {createNavigatorFactory, ParamListBase, StackActionHelpers, StackNavigationState, useNavigationBuilder} from '@react-navigation/native';
 import {StackNavigationEventMap, StackNavigationOptions, StackView} from '@react-navigation/stack';
 import React, {useMemo, useRef} from 'react';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import NAVIGATORS from '@src/NAVIGATORS';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type Routes = StackNavigationState<ParamListBase>['routes'];
 function reduceReportRoutes(routes: Routes): Routes {
@@ -28,11 +28,11 @@ function reduceReportRoutes(routes: Routes): Routes {
 }
 
 function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const isSmallScreenWidthRef = useRef<boolean>(isSmallScreenWidth);
+    const shouldUseNarrowLayoutRef = useRef<boolean>(shouldUseNarrowLayout);
 
-    isSmallScreenWidthRef.current = isSmallScreenWidth;
+    shouldUseNarrowLayoutRef.current = shouldUseNarrowLayout;
 
     const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder<
         StackNavigationState<ParamListBase>,
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
index 9af92dd3e019..51d2bb8e31dd 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -15,10 +15,10 @@ const commonScreenOptions: StackNavigationOptions = {
     animationTypeForReplace: 'push',
 };
 
-export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOptions => ({
+export default (shouldUseNarrowLayout: boolean, themeStyles: ThemeStyles): ScreenOptions => ({
     rightModalNavigator: {
         ...commonScreenOptions,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, false, props),
         presentation: 'transparentModal',
 
         // We want pop in RHP since there are some flows that would work weird otherwise
@@ -27,7 +27,7 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp
             ...getNavigationModalCardStyle(),
 
             // This is necessary to cover translated sidebar with overlay.
-            width: isSmallScreenWidth ? '100%' : '200%',
+            width: shouldUseNarrowLayout ? '100%' : '200%',
             // Excess space should be on the left so we need to position from right.
             right: 0,
         },
@@ -36,38 +36,38 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp
     homeScreen: {
         title: CONFIG.SITE_TITLE,
         ...commonScreenOptions,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, false, props),
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+            width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
 
             // We need to translate the sidebar to not be covered by the StackNavigator so it can be clickable.
-            transform: [{translateX: isSmallScreenWidth ? 0 : -variables.sideBarWidth}],
-            ...(isSmallScreenWidth ? {} : themeStyles.borderRight),
+            transform: [{translateX: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth}],
+            ...(shouldUseNarrowLayout ? {} : themeStyles.borderRight),
         },
     },
 
     fullScreen: {
         ...commonScreenOptions,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, true, props),
         cardStyle: {
             ...getNavigationModalCardStyle(),
 
             // This is necessary to cover whole screen. Including translated sidebar.
-            marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
+            marginLeft: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth,
         },
     },
 
     centralPaneNavigator: {
         title: CONFIG.SITE_TITLE,
         ...commonScreenOptions,
-        animationEnabled: isSmallScreenWidth,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+        animationEnabled: shouldUseNarrowLayout,
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, true, props),
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth,
+            paddingRight: shouldUseNarrowLayout ? 0 : variables.sideBarWidth,
         },
     },
 });
diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
index f7e772148e79..544c53a07a4d 100644
--- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
+++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
@@ -3,11 +3,11 @@ import {Animated} from 'react-native';
 import getCardStyles from '@styles/cardStyles';
 import variables from '@styles/variables';
 
-export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => {
+export default (shouldUseNarrowLayout: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => {
     const translateX = Animated.multiply(
         progress.interpolate({
             inputRange: [0, 1],
-            outputRange: [isSmallScreenWidth ? screen.width : variables.sideBarWidth, 0],
+            outputRange: [shouldUseNarrowLayout ? screen.width : variables.sideBarWidth, 0],
             extrapolate: 'clamp',
         }),
         inverted,
@@ -15,7 +15,7 @@ export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {curren
 
     const cardStyle = getCardStyles(screen.width);
 
-    if (!isFullScreenModal || isSmallScreenWidth) {
+    if (!isFullScreenModal || shouldUseNarrowLayout) {
         cardStyle.transform = [{translateX}];
     }
 
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index 7c0b9ef4fc8c..07b689460060 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -2,12 +2,12 @@ import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} fr
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
 import useTheme from '@styles/themes/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
 import Navigation, {navigationRef} from './Navigation';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type NavigationRootProps = {
     /** Whether the current user is logged in with an authToken */
@@ -43,7 +43,7 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
     const theme = useTheme();
 
     const currentReportIDValue = useCurrentReportID();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // https://reactnavigation.org/docs/themes
     const navigationTheme = useMemo(
@@ -65,11 +65,11 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
             firstRenderRef.current = false;
             return;
         }
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             return;
         }
         Navigation.setShouldPopAllStateOnUP();
-    }, [isSmallScreenWidth]);
+    }, [shouldUseNarrowLayout]);
 
     useEffect(() => {
         if (!navigationRef.isReady() || !authenticated) {
@@ -77,7 +77,7 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
         }
         // We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary.
         navigationRef.resetRoot(navigationRef.getRootState());
-    }, [isSmallScreenWidth, authenticated]);
+    }, [shouldUseNarrowLayout, authenticated]);
 
     const handleStateChange = (state: NavigationState | undefined) => {
         if (!state) {
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 5b57419c8530..62ee023b260a 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -36,6 +36,7 @@ import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     /** Toggles the navigationMenu open and closed */
@@ -80,7 +81,8 @@ const defaultProps = {
 };
 
 function HeaderView(props) {
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -185,7 +187,7 @@ function HeaderView(props) {
     const defaultSubscriptSize = ReportUtils.isExpenseRequest(props.report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
     const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails);
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-    const shouldShowBorderBottom = !isTaskReport || !isSmallScreenWidth;
+    const shouldShowBorderBottom = !isTaskReport || !shouldUseNarrowLayout;
     const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);
 
     const isLoading = !props.report || !title;
@@ -195,12 +197,12 @@ function HeaderView(props) {
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && !isLoading && styles.pl5]}>
+            <View style={[styles.appContentHeaderTitle, !shouldUseNarrowLayout && !isLoading && styles.pl5]}>
                 {isLoading ? (
                     <ReportHeaderSkeletonView />
                 ) : (
                     <>
-                        {isSmallScreenWidth && (
+                        {shouldUseNarrowLayout && (
                             <PressableWithoutFeedback
                                 onPress={props.onNavigationMenuButtonClicked}
                                 style={[styles.LHNToggle]}
@@ -273,7 +275,7 @@ function HeaderView(props) {
                                 )}
                             </PressableWithoutFeedback>
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
+                                {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
                                 {shouldShowThreeDotsButton && (
                                     <ThreeDotsMenu
                                         anchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 8db899a8f73f..46ea1739d5c5 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -37,6 +37,7 @@ import reportActionPropTypes from './report/reportActionPropTypes';
 import ReportActionsView from './report/ReportActionsView';
 import ReportFooter from './report/ReportFooter';
 import {ActionListContext, ReactionListContext} from './ReportScreenContext';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -153,7 +154,7 @@ function ReportScreen({
 }) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const firstRenderRef = useRef(true);
     const flatListRef = useRef();
@@ -386,7 +387,7 @@ function ReportScreen({
                         shouldShow={shouldShowNotFoundPage}
                         subtitleKey="notFound.noAccess"
                         shouldShowCloseButton={false}
-                        shouldShowBackButton={isSmallScreenWidth}
+                        shouldShowBackButton={shouldUseNarrowLayout}
                         onBackButtonPress={Navigation.goBack}
                         shouldShowLink={false}
                     >
@@ -397,7 +398,7 @@ function ReportScreen({
                             needsOffscreenAlphaCompositing
                         >
                             {headerView}
-                            {ReportUtils.isTaskReport(report) && isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && (
+                            {ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && (
                                 <View style={[styles.borderBottom]}>
                                     <View style={[styles.appBG, styles.pl0]}>
                                         <View style={[styles.ph5, styles.pb3]}>
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js
index 0b4c520c78a2..89edf7fb4f07 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.js
@@ -4,10 +4,11 @@ import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
 import sidebarPropTypes from './sidebarPropTypes';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function SidebarScreen(props) {
     const popoverModal = useRef(null);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     /**
      * Method to hide popover when dragover.
@@ -34,7 +35,7 @@ function SidebarScreen(props) {
     };
 
     return (
-        <FreezeWrapper keepVisible={!isSmallScreenWidth}>
+        <FreezeWrapper keepVisible={!shouldUseNarrowLayout}>
             <BaseSidebarScreen
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js
index 36724c02d278..6f4c3df038b0 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.native.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.native.js
@@ -4,11 +4,12 @@ import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
 import sidebarPropTypes from './sidebarPropTypes';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function SidebarScreen(props) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     return (
-        <FreezeWrapper keepVisible={!isSmallScreenWidth}>
+        <FreezeWrapper keepVisible={!shouldUseNarrowLayout}>
             <BaseSidebarScreen
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js
index e01e64be9bc0..a72f0de4d257 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.js
@@ -28,6 +28,7 @@ import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import NavigationAwareCamera from './NavigationAwareCamera';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -57,7 +58,7 @@ function IOURequestStepScan({
     const [attachmentInvalidReason, setAttachmentValidReason] = useState('');
 
     const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {isDraggingOver} = useContext(DragAndDropContext);
 
@@ -279,12 +280,12 @@ function IOURequestStepScan({
             >
                 <Text style={[styles.textReceiptUpload]}>{translate('receipt.upload')}</Text>
                 <Text style={[styles.subTextReceiptUpload]}>
-                    {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
+                    {shouldUseNarrowLayout ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
                     <CopyTextToClipboard
                         text={CONST.EMAIL.RECEIPTS}
                         textStyles={[styles.textBlue]}
                     />
-                    {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')}
+                    {shouldUseNarrowLayout ? null : translate('receipt.dragReceiptAfterEmail')}
                 </Text>
             </View>
 
@@ -314,7 +315,7 @@ function IOURequestStepScan({
             shouldShowWrapper={Boolean(backTo)}
             testID={IOURequestStepScan.displayName}
         >
-            <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(isSmallScreenWidth)]}>
+            <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(shouldUseNarrowLayout)]}>
                 {!isDraggingOver && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
                 <ReceiptDropUI
                     onDrop={(e) => {
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 86d218ec63ae..dd0b944f73c8 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -23,12 +23,14 @@ import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function CodesStep({account = defaultAccount, backTo}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {isExtraSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [error, setError] = useState('');
 
     const {setStep} = useTwoFactorAuthContext();
@@ -62,7 +64,7 @@ function CodesStep({account = defaultAccount, backTo}) {
                     <View style={styles.mv3}>
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
+                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, shouldUseNarrowLayout})}>
                         {account.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={theme.spinner} />
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 4bb00fc976c0..9bde6b88698a 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -57,7 +57,7 @@ type CustomPickerStyle = PickerStyle & {icon?: ViewStyle};
 
 type OverlayStylesParams = {progress: Animated.AnimatedInterpolation<string | number>};
 
-type TwoFactorAuthCodesBoxParams = {isExtraSmallScreenWidth: boolean; isSmallScreenWidth: boolean};
+type TwoFactorAuthCodesBoxParams = {isExtraSmallScreenWidth: boolean; shouldUseNarrowLayout: boolean};
 
 type Translation = 'perspective' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scale' | 'scaleX' | 'scaleY' | 'translateX' | 'translateY' | 'skewX' | 'skewY' | 'matrix';
 
@@ -1378,9 +1378,9 @@ const styles = (theme: ThemeColors) =>
             textDecorationLine: 'none',
         },
 
-        RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
+        RHPNavigatorContainer: (shouldUseNarrowLayout: boolean) =>
             ({
-                width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+                width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
                 position: 'absolute',
                 right: 0,
                 height: '100%',
@@ -2283,10 +2283,10 @@ const styles = (theme: ThemeColors) =>
             padding: 0,
         },
 
-        twoFactorAuthCodesBox: ({isExtraSmallScreenWidth, isSmallScreenWidth}: TwoFactorAuthCodesBoxParams) => {
+        twoFactorAuthCodesBox: ({isExtraSmallScreenWidth, shouldUseNarrowLayout}: TwoFactorAuthCodesBoxParams) => {
             let paddingHorizontal = spacing.ph9;
 
-            if (isSmallScreenWidth) {
+            if (shouldUseNarrowLayout) {
                 paddingHorizontal = spacing.ph4;
             }
 

From 8a79ce8050bc13c7fb299d2d3e10bf1b159c43e5 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 8 Dec 2023 20:23:59 +0100
Subject: [PATCH 07/21] run prettier

---
 src/components/Modal/BaseModal.tsx                              | 2 +-
 src/components/OfflineIndicator.tsx                             | 2 +-
 src/components/PopoverWithoutOverlay/index.js                   | 2 +-
 src/components/ReportHeaderSkeletonView.tsx                     | 2 +-
 src/libs/Navigation/AppNavigator/AuthScreens.tsx                | 2 +-
 .../Navigation/AppNavigator/Navigators/RightModalNavigator.tsx  | 2 +-
 .../AppNavigator/createCustomStackNavigator/index.native.tsx    | 2 +-
 .../AppNavigator/createCustomStackNavigator/index.tsx           | 2 +-
 src/libs/Navigation/NavigationRoot.tsx                          | 2 +-
 src/pages/home/HeaderView.js                                    | 2 +-
 src/pages/home/ReportScreen.js                                  | 2 +-
 src/pages/home/sidebar/SidebarScreen/index.js                   | 2 +-
 src/pages/home/sidebar/SidebarScreen/index.native.js            | 2 +-
 src/pages/iou/request/step/IOURequestStepScan/index.js          | 2 +-
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js    | 2 +-
 src/pages/signin/SignInPage.js                                  | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index c59d9a9e3cec..c3e7c2c7fe1c 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -3,8 +3,8 @@ import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
-import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index 4d0f4f9f529d..5d4770c01044 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -2,12 +2,12 @@ import React, {useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type OfflineIndicatorProps = {
     /** Optional styles for container element that will override the default styling for the offline indicator */
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 564b2b7d3955..e93cc9552f46 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -4,11 +4,11 @@ import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function Popover(props) {
     const styles = useThemeStyles();
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 6c1a89a34136..1fd816172c5a 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
@@ -10,7 +11,6 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type ReportHeaderSkeletonViewProps = {
     shouldAnimate?: boolean;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 5ffa30e75e37..152276ba3304 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,6 +1,7 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
@@ -37,7 +38,6 @@ import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type AuthScreensProps = {
     /** Session of currently logged in user */
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index 116d8d335abe..58ccb2c32cc7 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -2,6 +2,7 @@ import {createStackNavigator, StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
 import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions';
@@ -9,7 +10,6 @@ import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigati
 import useThemeStyles from '@styles/useThemeStyles';
 import NAVIGATORS from '@src/NAVIGATORS';
 import Overlay from './Overlay';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type RightModalNavigatorProps = StackScreenProps<AuthScreensParamList, typeof NAVIGATORS.RIGHT_MODAL_NAVIGATOR>;
 
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
index d43142fe0815..310c511bb73b 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
@@ -1,9 +1,9 @@
 import {createNavigatorFactory, ParamListBase, StackActionHelpers, StackNavigationState, useNavigationBuilder} from '@react-navigation/native';
 import {StackNavigationEventMap, StackNavigationOptions, StackView} from '@react-navigation/stack';
 import React, {useRef} from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
index a2c13f597f53..8315d098ad00 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
@@ -1,10 +1,10 @@
 import {createNavigatorFactory, ParamListBase, StackActionHelpers, StackNavigationState, useNavigationBuilder} from '@react-navigation/native';
 import {StackNavigationEventMap, StackNavigationOptions, StackView} from '@react-navigation/stack';
 import React, {useMemo, useRef} from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import NAVIGATORS from '@src/NAVIGATORS';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type Routes = StackNavigationState<ParamListBase>['routes'];
 function reduceReportRoutes(routes: Routes): Routes {
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index 07b689460060..ce7ccbe56a78 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -2,12 +2,12 @@ import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} fr
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import Log from '@libs/Log';
 import useTheme from '@styles/themes/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
 import Navigation, {navigationRef} from './Navigation';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 type NavigationRootProps = {
     /** Whether the current user is logged in with an authToken */
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 62ee023b260a..2e792c211e22 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -20,6 +20,7 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {getGroupChatName} from '@libs/GroupChatUtils';
 import * as HeaderUtils from '@libs/HeaderUtils';
@@ -36,7 +37,6 @@ import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     /** Toggles the navigationMenu open and closed */
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 46ea1739d5c5..70c05c7ec6e0 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -17,6 +17,7 @@ import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportI
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -37,7 +38,6 @@ import reportActionPropTypes from './report/reportActionPropTypes';
 import ReportActionsView from './report/ReportActionsView';
 import ReportFooter from './report/ReportFooter';
 import {ActionListContext, ReactionListContext} from './ReportScreenContext';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js
index 89edf7fb4f07..04e8d2c030a1 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.js
@@ -1,10 +1,10 @@
 import React, {useCallback, useRef} from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
 import sidebarPropTypes from './sidebarPropTypes';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function SidebarScreen(props) {
     const popoverModal = useRef(null);
diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js
index 6f4c3df038b0..37a3e04efe8e 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.native.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.native.js
@@ -1,10 +1,10 @@
 import React from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
 import sidebarPropTypes from './sidebarPropTypes';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function SidebarScreen(props) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js
index a72f0de4d257..143b58a37c2c 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.js
@@ -13,6 +13,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
@@ -28,7 +29,6 @@ import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import NavigationAwareCamera from './NavigationAwareCamera';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index dd0b944f73c8..c50d6bf7ec31 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -11,6 +11,7 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
@@ -23,7 +24,6 @@ import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 
 function CodesStep({account = defaultAccount, backTo}) {
     const theme = useTheme();
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 5d1b50523473..60a1e051eeb5 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -7,8 +7,8 @@ import _ from 'underscore';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import CustomStatusBar from '@components/CustomStatusBar';
 import useLocalize from '@hooks/useLocalize';
-import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';

From f6251db1dbe53dc13e6d9d4d58635e8939720ff0 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 8 Dec 2023 20:43:30 +0100
Subject: [PATCH 08/21] rename isSmallScreenWidth prop to shouldUseNarrowLayout

---
 src/libs/ComposerUtils/index.ts |  4 ++--
 src/styles/styles.ts            | 14 +++++++-------
 src/styles/utils/index.ts       | 10 +++++-----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/libs/ComposerUtils/index.ts b/src/libs/ComposerUtils/index.ts
index 32ebca9afee8..bc747f3bacad 100644
--- a/src/libs/ComposerUtils/index.ts
+++ b/src/libs/ComposerUtils/index.ts
@@ -17,10 +17,10 @@ function insertText(text: string, selection: Selection, textToInsert: string): s
 /**
  * Check whether we can skip trigger hotkeys on some specific devices.
  */
-function canSkipTriggerHotkeys(isSmallScreenWidth: boolean, isKeyboardShown: boolean): boolean {
+function canSkipTriggerHotkeys(shouldUseNarrowLayout: boolean, isKeyboardShown: boolean): boolean {
     // Do not trigger actions for mobileWeb or native clients that have the keyboard open
     // because for those devices, we want the return key to insert newlines rather than submit the form
-    return (isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen()) || isKeyboardShown;
+    return (shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen()) || isKeyboardShown;
 }
 
 export {getNumberOfLines, updateNumberOfLines, insertText, canSkipTriggerHotkeys};
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 9bde6b88698a..982b0dcdeb11 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -2189,16 +2189,16 @@ const styles = (theme: ThemeColors) =>
             outline: 'none',
         },
 
-        getPDFPasswordFormStyle: (isSmallScreenWidth: boolean) =>
+        getPDFPasswordFormStyle: (shouldUseNarrowLayout: boolean) =>
             ({
-                width: isSmallScreenWidth ? '100%' : 350,
-                ...(isSmallScreenWidth && flex.flex1),
+                width: shouldUseNarrowLayout ? '100%' : 350,
+                ...(shouldUseNarrowLayout && flex.flex1),
             } satisfies ViewStyle),
 
-        centeredModalStyles: (isSmallScreenWidth: boolean, isFullScreenWhenSmall: boolean) =>
+        centeredModalStyles: (shouldUseNarrowLayout: boolean, isFullScreenWhenSmall: boolean) =>
             ({
-                borderWidth: isSmallScreenWidth && !isFullScreenWhenSmall ? 1 : 0,
-                marginHorizontal: isSmallScreenWidth ? 0 : 20,
+                borderWidth: shouldUseNarrowLayout && !isFullScreenWhenSmall ? 1 : 0,
+                marginHorizontal: shouldUseNarrowLayout ? 0 : 20,
             } satisfies ViewStyle),
 
         imageModalImageCenterContainer: {
@@ -2403,7 +2403,7 @@ const styles = (theme: ThemeColors) =>
             borderRadius: 88,
         },
 
-        rootNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
+        rootNavigatorContainerStyles: (shouldUseNarrowLayout: boolean) => ({marginLeft: shouldUseNarrowLayout ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
         RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
 
         avatarInnerTextChat: {
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 8d52c8de200a..647c5db3729f 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -567,8 +567,8 @@ function getCodeFontSize(isInsideH1: boolean) {
 /**
  * Gives the width for Emoji picker Widget
  */
-function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle {
-    if (isSmallScreenWidth) {
+function getEmojiPickerStyle(shouldUseNarrowLayout: boolean): ViewStyle {
+    if (shouldUseNarrowLayout) {
         return {
             width: CONST.SMALL_EMOJI_PICKER_SIZE.WIDTH,
         };
@@ -728,10 +728,10 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv
 /**
  * Gets the correct size for the empty state background image based on screen dimensions
  */
-function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
+function getReportWelcomeBackgroundImageStyle(shouldUseNarrowLayout: boolean, isMoneyReport = false): ViewStyle {
     const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
 
-    if (isSmallScreenWidth) {
+    if (shouldUseNarrowLayout) {
         return {
             height: emptyStateBackground.SMALL_SCREEN.IMAGE_HEIGHT,
             width: '200%',
@@ -974,7 +974,7 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle {
 /**
  * Returns fitting fontSize and lineHeight values in order to prevent large amounts from being cut off on small screen widths.
  */
-function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth: number, displayAmountLength: number, numberOfParticipant: number): TextStyle {
+function getAmountFontSizeAndLineHeight(shouldUseNarrowLayout: boolean, windowWidth: number, displayAmountLength: number, numberOfParticipant: number): TextStyle {
     let toSubtract = 0;
     const baseFontSize = variables.fontSizeXLarge;
     const baseLineHeight = variables.lineHeightXXLarge;

From a790b14dd29d5c27b127ada1f1809331819fa716 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 8 Dec 2023 21:01:18 +0100
Subject: [PATCH 09/21] remove unused imports

---
 src/libs/Navigation/AppNavigator/AuthScreens.tsx                 | 1 -
 .../Navigation/AppNavigator/Navigators/RightModalNavigator.tsx   | 1 -
 src/pages/home/ReportScreen.js                                   | 1 -
 src/pages/home/sidebar/SidebarScreen/index.js                    | 1 -
 src/pages/home/sidebar/SidebarScreen/index.native.js             | 1 -
 src/pages/iou/request/step/IOURequestStepScan/index.js           | 1 -
 6 files changed, 6 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 152276ba3304..bc8e6dc97ab5 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -2,7 +2,6 @@ import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index 58ccb2c32cc7..3f226aef7d9c 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -3,7 +3,6 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
 import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 70c05c7ec6e0..cdefbc2fcbd1 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -18,7 +18,6 @@ import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector';
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js
index 04e8d2c030a1..36681d66e0b7 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.js
@@ -1,6 +1,5 @@
 import React, {useCallback, useRef} from 'react';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js
index 37a3e04efe8e..85261f996475 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.native.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.native.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js
index 143b58a37c2c..201d7afca57e 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.js
@@ -14,7 +14,6 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';

From 016d6aec4ed466076b152ed0150cec0a5fdd8dfc Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 8 Dec 2023 21:01:39 +0100
Subject: [PATCH 10/21] fix typescript error

---
 .../Navigation/AppNavigator/createCustomStackNavigator/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
index 707a0ff4498d..3035d0d1ed30 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
@@ -2,7 +2,7 @@ import {DefaultNavigatorOptions, ParamListBase, StackNavigationState, StackRoute
 import {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack';
 
 type ResponsiveStackNavigatorConfig = {
-    isSmallScreenWidth: boolean;
+    shouldUseNarrowLayout: boolean;
 };
 
 type ResponsiveStackNavigatorRouterOptions = StackRouterOptions;

From 6a4873c5fa8fbd48a801f93e31abde01df6b85df Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 8 Dec 2023 21:05:24 +0100
Subject: [PATCH 11/21] fix typescript error

---
 src/styles/utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 647c5db3729f..303d8e726063 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -983,7 +983,7 @@ function getAmountFontSizeAndLineHeight(shouldUseNarrowLayout: boolean, windowWi
     const differentWithMaxLength = 17 - displayAmountLength;
 
     // with a window width is more than 420px the maximum amount will not be cut off with the maximum avatar displays
-    if (isSmallScreenWidth && windowWidth < 420) {
+    if (shouldUseNarrowLayout && windowWidth < 420) {
         // Based on width Difference we can see the max length of amount can be displayed with the number of avatars.
         // From there we can calculate subtract in accordance with the number of avatar and the length of amount text
         const widthDifference = 420 - windowWidth;

From 19290b496762c8897fd92299e21695d536628ddd Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sat, 9 Dec 2023 13:30:13 +0100
Subject: [PATCH 12/21] revert replacing useWindowDimensions with
 useResponsiveLayout due to a bug

---
 src/libs/Navigation/AppNavigator/AuthScreens.tsx       | 10 +++++-----
 .../AppNavigator/createCustomStackNavigator/types.ts   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index bc8e6dc97ab5..3148954d82b1 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,7 +1,6 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
@@ -37,6 +36,7 @@ import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 
 type AuthScreensProps = {
     /** Session of currently logged in user */
@@ -132,8 +132,8 @@ const modalScreenListeners = {
 
 function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoomID, demoInfo, isUsingMemoryOnlyKeys = false}: AuthScreensProps) {
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles);
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
@@ -252,8 +252,8 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom
     }, []);
 
     return (
-        <View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}>
-            <RootStack.Navigator shouldUseNarrowLayout={shouldUseNarrowLayout}>
+        <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
+            <RootStack.Navigator isSmallScreenWidth>
                 <RootStack.Screen
                     name={SCREENS.HOME}
                     options={screenOptions.homeScreen}
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
index 3035d0d1ed30..707a0ff4498d 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
@@ -2,7 +2,7 @@ import {DefaultNavigatorOptions, ParamListBase, StackNavigationState, StackRoute
 import {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack';
 
 type ResponsiveStackNavigatorConfig = {
-    shouldUseNarrowLayout: boolean;
+    isSmallScreenWidth: boolean;
 };
 
 type ResponsiveStackNavigatorRouterOptions = StackRouterOptions;

From b7cd2093b66b598174be54f9e232baac09fb1827 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sat, 9 Dec 2023 14:08:27 +0100
Subject: [PATCH 13/21] fix lint error

---
 src/libs/Navigation/AppNavigator/AuthScreens.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 3148954d82b1..8b33bf64ae18 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,6 +1,7 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
@@ -36,7 +37,6 @@ import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 
 type AuthScreensProps = {
     /** Session of currently logged in user */

From ab3beedd80b7d47ffddc5055e4528cef6197bb58 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 10 Dec 2023 09:27:42 +0100
Subject: [PATCH 14/21] fix Typescript error

---
 src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index 9b9a304ac9aa..86646e7cd140 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -61,7 +61,7 @@ function createModalStackNavigator<TStackParams extends ParamListBase>(screens:
                         key={name}
                         name={name}
                         getComponent={(screens as Required<Screens>)[name as Screen]}
-                        initialParams={{isInRHP: true}}
+                        initialParams={{isInRHP: true}  as TStackParams[string]}
                     />
                 ))}
             </ModalStackNavigator.Navigator>

From 1d02130bbf4953e3b9017f42176fa660824cbebd Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 10 Dec 2023 09:34:04 +0100
Subject: [PATCH 15/21] run prettier

---
 src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index 86646e7cd140..9c57be25ab09 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -61,7 +61,7 @@ function createModalStackNavigator<TStackParams extends ParamListBase>(screens:
                         key={name}
                         name={name}
                         getComponent={(screens as Required<Screens>)[name as Screen]}
-                        initialParams={{isInRHP: true}  as TStackParams[string]}
+                        initialParams={{isInRHP: true} as TStackParams[string]}
                     />
                 ))}
             </ModalStackNavigator.Navigator>

From 285f68e015aaf790b51ccfdbf9e79bb7b7845978 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 10 Dec 2023 10:15:26 +0100
Subject: [PATCH 16/21] replace use of useWindowDimensions with
 useResponsiveLayout in AuthScreens.tsx

---
 src/libs/Navigation/AppNavigator/AuthScreens.tsx       | 10 +++++-----
 .../AppNavigator/createCustomStackNavigator/types.ts   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 8b33bf64ae18..bc8e6dc97ab5 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,7 +1,7 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
@@ -132,8 +132,8 @@ const modalScreenListeners = {
 
 function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoomID, demoInfo, isUsingMemoryOnlyKeys = false}: AuthScreensProps) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles);
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
@@ -252,8 +252,8 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom
     }, []);
 
     return (
-        <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
-            <RootStack.Navigator isSmallScreenWidth>
+        <View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}>
+            <RootStack.Navigator shouldUseNarrowLayout={shouldUseNarrowLayout}>
                 <RootStack.Screen
                     name={SCREENS.HOME}
                     options={screenOptions.homeScreen}
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
index 707a0ff4498d..3035d0d1ed30 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
@@ -2,7 +2,7 @@ import {DefaultNavigatorOptions, ParamListBase, StackNavigationState, StackRoute
 import {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack';
 
 type ResponsiveStackNavigatorConfig = {
-    isSmallScreenWidth: boolean;
+    shouldUseNarrowLayout: boolean;
 };
 
 type ResponsiveStackNavigatorRouterOptions = StackRouterOptions;

From a858dbba2293c79d6e04bc84ba8fc8a50f8be564 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 10 Dec 2023 10:48:23 +0100
Subject: [PATCH 17/21] fix bug: useResponsiveLayout shouldUseNarrowLayout is
 false when catch block is executed

---
 src/hooks/useResponsiveLayout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useResponsiveLayout.ts b/src/hooks/useResponsiveLayout.ts
index 5b746e0035b1..b386fc985604 100644
--- a/src/hooks/useResponsiveLayout.ts
+++ b/src/hooks/useResponsiveLayout.ts
@@ -18,7 +18,7 @@ export default function useResponsiveLayout(): ResponsiveLayoutResult {
         return {shouldUseNarrowLayout: isSmallScreenWidth || (params?.isInRHP ?? false)};
     } catch (error) {
         return {
-            shouldUseNarrowLayout: false,
+            shouldUseNarrowLayout: isSmallScreenWidth,
         };
     }
 }

From 9ce3c161131a1f6f8cb96c9c3aed3ade5ec0ba0b Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Thu, 14 Dec 2023 16:08:34 +0100
Subject: [PATCH 18/21] fix lint error

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

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index ac04ab34e366..ca950840a3e7 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -235,7 +235,7 @@ function WorkspaceNewRoomPage(props) {
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 style={[styles.mh5, styles.mb5]}
             />
-            {isSmallScreenWidth && <OfflineIndicator />}
+            {shouldUseNarrowLayout && <OfflineIndicator />}
         </>
     );
 

From 5d4b8aca1362aaa4d1e42513c806153b7c177849 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Thu, 21 Dec 2023 17:10:07 +0100
Subject: [PATCH 19/21] fix lint error

---
 src/pages/signin/LoginForm/BaseLoginForm.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index 97e1dafd2e79..2bf8cf4cae06 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -1,5 +1,4 @@
 import {useIsFocused, useRoute} from '@react-navigation/native';
-import {parsePhoneNumber} from 'awesome-phonenumber';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';

From 0ae04fb8b0969ff0acd680c86d8ee7ae6b2a855a Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Thu, 21 Dec 2023 17:16:08 +0100
Subject: [PATCH 20/21] readding deleted code when resolving conflicts

---
 src/styles/index.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index b390053a94f2..5e1118174df5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1391,6 +1391,30 @@ const styles = (theme: ThemeColors) =>
             textDecorationLine: 'none',
         },
 
+        breadcrumb: {
+            color: theme.textSupporting,
+            fontSize: variables.fontSizeh1,
+            lineHeight: variables.lineHeightSizeh1,
+            ...headlineFont,
+        },
+
+        breadcrumbStrong: {
+            color: theme.text,
+            fontSize: variables.fontSizeXLarge,
+        },
+
+        breadcrumbSeparator: {
+            color: theme.icon,
+            fontSize: variables.fontSizeXLarge,
+            lineHeight: variables.lineHeightSizeh1,
+            ...headlineFont,
+        },
+
+        breadcrumbLogo: {
+            top: 1.66, // Pixel-perfect alignment due to a small difference between logo height and breadcrumb text height
+            height: variables.lineHeightSizeh1,
+        },
+
         RHPNavigatorContainer: (shouldUseNarrowLayout: boolean) =>
             ({
                 ...modalNavigatorContainer(shouldUseNarrowLayout),

From 437a16dc8fb526280af5981b6483262d5b9ad931 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Thu, 21 Dec 2023 17:20:51 +0100
Subject: [PATCH 21/21] run prettier

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

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 4565797eb590..9ba12aa478c3 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -4,10 +4,10 @@ import {GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle} from 'reac
 import {AnimatedStyle} from 'react-native-reanimated';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';