[No QA] Replace usages of useWindowDimensions with useResponsiveLayout

.storybook/preview.tsx

@@ -9,7 +9,6 @@ import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
 import OnyxProvider from '@src/components/OnyxProvider';
 import {EnvironmentProvider} from '@src/components/withEnvironment';
 import {KeyboardStateProvider} from '@src/components/withKeyboardState';
-import {WindowDimensionsProvider} from '@src/components/withWindowDimensions';
 import ONYXKEYS from '@src/ONYXKEYS';
 import './fonts.css';
 
@@ -22,9 +21,7 @@ Onyx.init({
 
 const decorators = [
     (Story: React.ElementType) => (
-        <ComposeProviders
-            components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider, EnvironmentProvider, KeyboardStateProvider, WindowDimensionsProvider]}
-        >
+        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider, EnvironmentProvider, KeyboardStateProvider]}>
             <Story />
         </ComposeProviders>
     ),

src/App.tsx

@@ -30,7 +30,6 @@ import {VolumeContextProvider} from './components/VideoPlayerContexts/VolumeCont
 import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
 import {EnvironmentProvider} from './components/withEnvironment';
 import {KeyboardStateProvider} from './components/withKeyboardState';
-import {WindowDimensionsProvider} from './components/withWindowDimensions';
 import CONFIG from './CONFIG';
 import Expensify from './Expensify';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
@@ -77,7 +76,6 @@ function App({url}: AppProps) {
                             SafeArea,
                             LocaleContextProvider,
                             HTMLEngineProvider,
-                            WindowDimensionsProvider,
                             KeyboardStateProvider,
                             PopoverContextProvider,
                             CurrentReportIDContextProvider,

src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx

@@ -6,8 +6,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 
@@ -29,7 +29,7 @@ type PaymentCardCurrencyModalProps = {
 };
 
 function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONST.PAYMENT_CARD_CURRENCY.USD, onCurrencyChange, onClose}: PaymentCardCurrencyModalProps) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {sections} = useMemo(
@@ -55,7 +55,7 @@ function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONS
             onClose={() => onClose?.()}
             onModalHide={onClose}
             hideModalContentWhileAnimating
-            innerContainerStyle={styles.RHPNavigatorContainer(isSmallScreenWidth)}
+            innerContainerStyle={styles.RHPNavigatorContainer(shouldUseNarrowLayout)}
             onBackdropPress={Navigation.dismissModal}
             useNativeDriver
         >

src/components/ApprovalWorkflowSection.tsx

@@ -1,9 +1,9 @@
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import type ApprovalWorkflow from '@src/types/onyx/ApprovalWorkflow';
 import Icon from './Icon';
@@ -24,7 +24,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate, toLocaleOrdinal} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const approverTitle = useCallback(
         (index: number) =>
@@ -45,7 +45,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
     return (
         <PressableWithoutFeedback
             accessibilityRole="button"
-            style={[styles.border, isSmallScreenWidth ? styles.p3 : styles.p4, styles.flexRow, styles.justifyContentBetween, styles.mt6, styles.mbn3]}
+            style={[styles.border, shouldUseNarrowLayout ? styles.p3 : styles.p4, styles.flexRow, styles.justifyContentBetween, styles.mt6, styles.mbn3]}
             onPress={onPress}
             accessibilityLabel={translate('workflowsPage.addApprovalsTitle')}
         >

src/components/Attachments/AttachmentCarousel/index.tsx

@@ -12,6 +12,7 @@ import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
 import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -40,7 +41,8 @@ const MIN_FLING_VELOCITY = 500;
 function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose}: AttachmentCarouselProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {isFullScreenRef} = useFullScreenContext();
     const scrollRef = useAnimatedRef<Animated.FlatList<ListRenderItemInfo<Attachment>>>();
@@ -49,7 +51,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
-    const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true);
+    const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, true);
     const cellWidth = useMemo(
         () => PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2),
         [modalStyles.borderWidth, modalStyles.marginHorizontal, windowWidth],

src/components/AutoCompleteSuggestions/index.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
 import useKeyboardState from '@hooks/useKeyboardState';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -53,7 +54,8 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
     const isSuggestionMenuAboveRef = React.useRef<boolean>(false);
     const leftValue = React.useRef<number>(0);
     const prevLeftValue = React.useRef<number>(0);
-    const {windowHeight, windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {windowHeight, windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [suggestionHeight, setSuggestionHeight] = React.useState(0);
     const [containerState, setContainerState] = React.useState(initialContainerState);
     const StyleUtils = useStyleUtils();
@@ -96,12 +98,12 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
             const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false);
             let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight;
-            const widthValue = isSmallScreenWidth ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH;
+            const widthValue = shouldUseNarrowLayout ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH;
 
             const isEnoughSpaceToRenderMenuAboveForBig = isEnoughSpaceToRenderMenuAboveCursor({y, cursorCoordinates, scrollValue, contentHeight: contentMaxHeight, topInset});
             const isEnoughSpaceToRenderMenuAboveForSmall = isEnoughSpaceToRenderMenuAboveCursor({y, cursorCoordinates, scrollValue, contentHeight: contentMinHeight, topInset});
 
-            const newLeftOffset = isSmallScreenWidth ? x : bigScreenLeftOffset;
+            const newLeftOffset = shouldUseNarrowLayout ? x : bigScreenLeftOffset;
             // If the suggested word is longer than 150 (approximately half the width of the suggestion popup), then adjust a new position of popup
             const isAdjustmentNeeded = Math.abs(prevLeftValue.current - bigScreenLeftOffset) > 150;
             if (isInitialRender.current || isAdjustmentNeeded) {
@@ -131,7 +133,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
                 cursorCoordinates,
             });
         });
-    }, [measureParentContainerAndReportCursor, windowHeight, windowWidth, keyboardHeight, isSmallScreenWidth, suggestionsLength, bottomInset, topInset]);
+    }, [measureParentContainerAndReportCursor, windowHeight, windowWidth, keyboardHeight, shouldUseNarrowLayout, suggestionsLength, bottomInset, topInset]);
 
     if ((containerState.width === 0 && containerState.left === 0 && containerState.bottom === 0) || (containerState.cursorCoordinates.x === 0 && containerState.cursorCoordinates.y === 0)) {
         return null;

src/components/ConfirmModal.tsx

@@ -132,6 +132,7 @@ function ConfirmModal({
     shouldEnableNewFocusManagement,
     restoreFocusType,
 }: ConfirmModalProps) {
+    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type
     const {isSmallScreenWidth} = useResponsiveLayout();
     const styles = useThemeStyles();
 

src/components/ConnectToNetSuiteFlow/index.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PopoverMenu from '@components/PopoverMenu';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {getAdminPoliciesConnectedToNetSuite} from '@libs/actions/Policy/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import {useAccountingContext} from '@pages/workspace/accounting/AccountingContext';
@@ -15,7 +15,7 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
     const {translate} = useLocalize();
 
     const hasPoliciesConnectedToNetSuite = !!getAdminPoliciesConnectedToNetSuite()?.length;
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [isReuseConnectionsPopoverOpen, setIsReuseConnectionsPopoverOpen] = useState(false);
     const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
     const {popoverAnchorRefs} = useAccountingContext();
@@ -52,7 +52,7 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
     }, []);
 
     if (threeDotsMenuContainerRef) {
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
                 setReuseConnectionPopoverPosition({
                     horizontal: x + width,

src/components/ConnectToSageIntacctFlow/index.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PopoverMenu from '@components/PopoverMenu';
 import useLocalize from '@hooks/useLocalize';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {getAdminPoliciesConnectedToSageIntacct} from '@libs/actions/Policy/Policy';
 import Navigation from '@libs/Navigation/Navigation';
 import {useAccountingContext} from '@pages/workspace/accounting/AccountingContext';
@@ -18,7 +18,7 @@ function ConnectToSageIntacctFlow({policyID}: ConnectToSageIntacctFlowProps) {
     const {translate} = useLocalize();
 
     const hasPoliciesConnectedToSageIntacct = !!getAdminPoliciesConnectedToSageIntacct().length;
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [isReuseConnectionsPopoverOpen, setIsReuseConnectionsPopoverOpen] = useState(false);
     const [reuseConnectionPopoverPosition, setReuseConnectionPopoverPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
     const {popoverAnchorRefs} = useAccountingContext();
@@ -54,7 +54,7 @@ function ConnectToSageIntacctFlow({policyID}: ConnectToSageIntacctFlowProps) {
     }, []);
 
     if (threeDotsMenuContainerRef) {
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
                 setReuseConnectionPopoverPosition({
                     horizontal: x + width,

src/components/ExpensifyWordmark.tsx

@@ -6,15 +6,14 @@ import DevLogo from '@assets/images/expensify-logo--dev.svg';
 import StagingLogo from '@assets/images/expensify-logo--staging.svg';
 import ProductionLogo from '@assets/images/expensify-wordmark.svg';
 import useEnvironment from '@hooks/useEnvironment';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ImageSVG from './ImageSVG';
-import withWindowDimensions from './withWindowDimensions';
-import type {WindowDimensionsProps} from './withWindowDimensions/types';
 
-type ExpensifyWordmarkProps = WindowDimensionsProps & {
+type ExpensifyWordmarkProps = {
     /** Additional styles to add to the component */
     style?: StyleProp<ViewStyle>;
 };
@@ -26,19 +25,21 @@ const logoComponents = {
     [CONST.ENVIRONMENT.ADHOC]: AdHocLogo,
 };
 
-function ExpensifyWordmark({isSmallScreenWidth, style}: ExpensifyWordmarkProps) {
+function ExpensifyWordmark({style}: ExpensifyWordmarkProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
     const LogoComponent = logoComponents[environment];
 
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
     return (
         <View
             style={[
-                StyleUtils.getSignInWordmarkWidthStyle(isSmallScreenWidth, environment),
-                StyleUtils.getHeight(isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
-                isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
+                StyleUtils.getSignInWordmarkWidthStyle(shouldUseNarrowLayout, environment),
+                StyleUtils.getHeight(shouldUseNarrowLayout ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
+                shouldUseNarrowLayout && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
                 style,
             ]}
         >
@@ -52,4 +53,4 @@ function ExpensifyWordmark({isSmallScreenWidth, style}: ExpensifyWordmarkProps)
 
 ExpensifyWordmark.displayName = 'ExpensifyWordmark';
 
-export default withWindowDimensions(ExpensifyWordmark);
+export default ExpensifyWordmark;

src/components/FeatureTrainingModal.tsx

@@ -4,7 +4,6 @@ import {View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useOnboardingLayout from '@hooks/useOnboardingLayout';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -89,7 +88,7 @@ function FeatureTrainingModal({
 }: FeatureTrainingModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isMediumOrLargerScreenWidth} = useOnboardingLayout();
+    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
     const [isModalVisible, setIsModalVisible] = useState(true);
     const [willShowAgain, setWillShowAgain] = useState(true);
     const [videoStatus, setVideoStatus] = useState<VideoStatus>('video');
@@ -185,14 +184,14 @@ function FeatureTrainingModal({
             {({safeAreaPaddingBottomStyle}) => (
                 <Modal
                     isVisible={isModalVisible}
-                    type={isMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+                    type={onboardingIsMediumOrLargerScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
                     onClose={closeModal}
                     innerContainerStyle={{
                         boxShadow: 'none',
                         borderRadius: 16,
                         paddingBottom: 20,
-                        paddingTop: isMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
-                        ...(isMediumOrLargerScreenWidth
+                        paddingTop: onboardingIsMediumOrLargerScreenWidth ? undefined : MODAL_PADDING,
+                        ...(onboardingIsMediumOrLargerScreenWidth
                             ? // Override styles defined by MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
                               // To make it take as little space as possible.
                               {
@@ -202,11 +201,11 @@ function FeatureTrainingModal({
                             : {}),
                     }}
                 >
-                    <View style={[styles.mh100, isMediumOrLargerScreenWidth && styles.welcomeVideoNarrowLayout, safeAreaPaddingBottomStyle]}>
-                        <View style={isMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}}>{renderIllustration()}</View>
+                    <View style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && styles.welcomeVideoNarrowLayout, safeAreaPaddingBottomStyle]}>
+                        <View style={onboardingIsMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}}>{renderIllustration()}</View>
                         <View style={[styles.mt5, styles.mh5]}>
                             {!!title && !!description && (
-                                <View style={[isMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10]]}>
+                                <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10]]}>
                                     <Text style={[styles.textHeadlineH1]}>{title}</Text>
                                     <Text style={styles.textSupporting}>{description}</Text>
                                     {secondaryDescription.length > 0 && <Text style={[styles.textSupporting, styles.mt4]}>{secondaryDescription}</Text>}