Merge pull request #27004 from shubham1206agra/ipad-layout-fix

[CP Staging] iPad layout fix (by forcing narrow layout)

android/app/src/main/res/values-large/orientation.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <bool name="portrait_only">false</bool>
+    <bool name="portrait_only">true</bool>
 </resources>

android/app/src/main/res/values-sw600dp/orientation.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <bool name="portrait_only">false</bool>
+    <bool name="portrait_only">true</bool>
 </resources>

ios/NewExpensify/Info.plist

@@ -117,8 +117,6 @@
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
 	</array>
 	<key>UIUserInterfaceStyle</key>
 	<string>Dark</string>

src/components/withWindowDimensions.js → src/components/withWindowDimensions/index.js

@@ -2,9 +2,9 @@ import React, {forwardRef, createContext, useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {Dimensions} from 'react-native';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import variables from '../styles/variables';
-import getWindowHeightAdjustment from '../libs/getWindowHeightAdjustment';
+import getComponentDisplayName from '../../libs/getComponentDisplayName';
+import variables from '../../styles/variables';
+import getWindowHeightAdjustment from '../../libs/getWindowHeightAdjustment';
 
 const WindowDimensionsContext = createContext(null);
 const windowDimensionsPropTypes = {

src/components/withWindowDimensions/index.native.js

@@ -0,0 +1,116 @@
+import React, {forwardRef, createContext, useState, useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {Dimensions} from 'react-native';
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import getComponentDisplayName from '../../libs/getComponentDisplayName';
+import variables from '../../styles/variables';
+import getWindowHeightAdjustment from '../../libs/getWindowHeightAdjustment';
+
+const WindowDimensionsContext = createContext(null);
+const windowDimensionsPropTypes = {
+    // Width of the window
+    windowWidth: PropTypes.number.isRequired,
+
+    // Height of the window
+    windowHeight: PropTypes.number.isRequired,
+
+    // Is the window width extra narrow, like on a Fold mobile device?
+    isExtraSmallScreenWidth: PropTypes.bool.isRequired,
+
+    // Is the window width narrow, like on a mobile device?
+    isSmallScreenWidth: PropTypes.bool.isRequired,
+
+    // Is the window width medium sized, like on a tablet device?
+    isMediumScreenWidth: PropTypes.bool.isRequired,
+
+    // Is the window width wide, like on a browser or desktop?
+    isLargeScreenWidth: PropTypes.bool.isRequired,
+};
+
+const windowDimensionsProviderPropTypes = {
+    /* Actual content wrapped by this component */
+    children: PropTypes.node.isRequired,
+};
+
+function WindowDimensionsProvider(props) {
+    const [windowDimension, setWindowDimension] = useState(() => {
+        const initialDimensions = Dimensions.get('window');
+        return {
+            windowHeight: initialDimensions.height,
+            windowWidth: initialDimensions.width,
+        };
+    });
+
+    useEffect(() => {
+        const onDimensionChange = (newDimensions) => {
+            const {window} = newDimensions;
+
+            setWindowDimension({
+                windowHeight: window.height,
+                windowWidth: window.width,
+            });
+        };
+
+        const dimensionsEventListener = Dimensions.addEventListener('change', onDimensionChange);
+
+        return () => {
+            if (!dimensionsEventListener) {
+                return;
+            }
+            dimensionsEventListener.remove();
+        };
+    }, []);
+
+    return (
+        <SafeAreaInsetsContext.Consumer>
+            {(insets) => {
+                const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
+                const isSmallScreenWidth = true;
+                const isMediumScreenWidth = false;
+                const isLargeScreenWidth = false;
+                return (
+                    <WindowDimensionsContext.Provider
+                        value={{
+                            windowHeight: windowDimension.windowHeight + getWindowHeightAdjustment(insets),
+                            windowWidth: windowDimension.windowWidth,
+                            isExtraSmallScreenWidth,
+                            isSmallScreenWidth,
+                            isMediumScreenWidth,
+                            isLargeScreenWidth,
+                        }}
+                    >
+                        {props.children}
+                    </WindowDimensionsContext.Provider>
+                );
+            }}
+        </SafeAreaInsetsContext.Consumer>
+    );
+}
+
+WindowDimensionsProvider.propTypes = windowDimensionsProviderPropTypes;
+WindowDimensionsProvider.displayName = 'WindowDimensionsProvider';
+
+/**
+ * @param {React.Component} WrappedComponent
+ * @returns {React.Component}
+ */
+export default function withWindowDimensions(WrappedComponent) {
+    const WithWindowDimensions = forwardRef((props, ref) => (
+        <WindowDimensionsContext.Consumer>
+            {(windowDimensionsProps) => (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...windowDimensionsProps}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={ref}
+                />
+            )}
+        </WindowDimensionsContext.Consumer>
+    ));
+
+    WithWindowDimensions.displayName = `withWindowDimensions(${getComponentDisplayName(WrappedComponent)})`;
+    return WithWindowDimensions;
+}
+
+export {WindowDimensionsProvider, windowDimensionsPropTypes};

src/hooks/useWindowDimensions.js → src/hooks/useWindowDimensions/index.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import {useWindowDimensions} from 'react-native';
-import variables from '../styles/variables';
+import variables from '../../styles/variables';
 
 /**
  * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints.

src/hooks/useWindowDimensions/index.native.js

@@ -0,0 +1,23 @@
+// eslint-disable-next-line no-restricted-imports
+import {useWindowDimensions} from 'react-native';
+import variables from '../../styles/variables';
+
+/**
+ * A convenience wrapper around React Native's useWindowDimensions hook that also provides booleans for our breakpoints.
+ * @returns {Object}
+ */
+export default function () {
+    const {width: windowWidth, height: windowHeight} = useWindowDimensions();
+    const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint;
+    const isSmallScreenWidth = true;
+    const isMediumScreenWidth = false;
+    const isLargeScreenWidth = false;
+    return {
+        windowWidth,
+        windowHeight,
+        isExtraSmallScreenHeight,
+        isSmallScreenWidth,
+        isMediumScreenWidth,
+        isLargeScreenWidth,
+    };
+}