From 23d567630344e4af47e44fa0f6b0ce2270e67b24 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Fri, 8 Sep 2023 13:23:47 +0530 Subject: [PATCH 1/2] ipad layout fix (by forcing narrow layout) --- .../src/main/res/values-large/orientation.xml | 2 +- .../main/res/values-sw600dp/orientation.xml | 2 +- ios/NewExpensify/Info.plist | 2 - .../index.js} | 6 +- .../withWindowDimensions/index.native.js | 116 ++++++++++++++++++ .../index.js} | 2 +- src/hooks/useWindowDimensions/index.native.js | 23 ++++ 7 files changed, 145 insertions(+), 8 deletions(-) rename src/components/{withWindowDimensions.js => withWindowDimensions/index.js} (95%) create mode 100644 src/components/withWindowDimensions/index.native.js rename src/hooks/{useWindowDimensions.js => useWindowDimensions/index.js} (95%) create mode 100644 src/hooks/useWindowDimensions/index.native.js diff --git a/android/app/src/main/res/values-large/orientation.xml b/android/app/src/main/res/values-large/orientation.xml index c06e0147ee73..9f60d109a2fc 100644 --- a/android/app/src/main/res/values-large/orientation.xml +++ b/android/app/src/main/res/values-large/orientation.xml @@ -1,4 +1,4 @@ - false + true diff --git a/android/app/src/main/res/values-sw600dp/orientation.xml b/android/app/src/main/res/values-sw600dp/orientation.xml index c06e0147ee73..9f60d109a2fc 100644 --- a/android/app/src/main/res/values-sw600dp/orientation.xml +++ b/android/app/src/main/res/values-sw600dp/orientation.xml @@ -1,4 +1,4 @@ - false + true diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 39e7d354e4b6..a278e2b1245e 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -117,8 +117,6 @@ UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown - UIInterfaceOrientationLandscapeRight - UIInterfaceOrientationLandscapeLeft UIUserInterfaceStyle Dark diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions/index.js similarity index 95% rename from src/components/withWindowDimensions.js rename to src/components/withWindowDimensions/index.js index 9ec9c5d4acbd..a3836fa99e6b 100644 --- a/src/components/withWindowDimensions.js +++ b/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 = { diff --git a/src/components/withWindowDimensions/index.native.js b/src/components/withWindowDimensions/index.native.js new file mode 100644 index 000000000000..0fd4fe4794f3 --- /dev/null +++ b/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 ( + + {(insets) => { + const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint; + const isSmallScreenWidth = !isExtraSmallScreenWidth; + const isMediumScreenWidth = false; + const isLargeScreenWidth = false; + return ( + + {props.children} + + ); + }} + + ); +} + +WindowDimensionsProvider.propTypes = windowDimensionsProviderPropTypes; +WindowDimensionsProvider.displayName = 'WindowDimensionsProvider'; + +/** + * @param {React.Component} WrappedComponent + * @returns {React.Component} + */ +export default function withWindowDimensions(WrappedComponent) { + const WithWindowDimensions = forwardRef((props, ref) => ( + + {(windowDimensionsProps) => ( + + )} + + )); + + WithWindowDimensions.displayName = `withWindowDimensions(${getComponentDisplayName(WrappedComponent)})`; + return WithWindowDimensions; +} + +export {WindowDimensionsProvider, windowDimensionsPropTypes}; diff --git a/src/hooks/useWindowDimensions.js b/src/hooks/useWindowDimensions/index.js similarity index 95% rename from src/hooks/useWindowDimensions.js rename to src/hooks/useWindowDimensions/index.js index 58e6b8758927..86ff7ce85d3d 100644 --- a/src/hooks/useWindowDimensions.js +++ b/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. diff --git a/src/hooks/useWindowDimensions/index.native.js b/src/hooks/useWindowDimensions/index.native.js new file mode 100644 index 000000000000..187c7fe1e66c --- /dev/null +++ b/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 = !isExtraSmallScreenHeight; + const isMediumScreenWidth = false; + const isLargeScreenWidth = false; + return { + windowWidth, + windowHeight, + isExtraSmallScreenHeight, + isSmallScreenWidth, + isMediumScreenWidth, + isLargeScreenWidth, + }; +} From 1955e934f1cbc483499bb52d34fe0289ccac1cf4 Mon Sep 17 00:00:00 2001 From: Shubham Agrawal Date: Fri, 8 Sep 2023 15:14:31 +0530 Subject: [PATCH 2/2] minor bug --- src/components/withWindowDimensions/index.native.js | 2 +- src/hooks/useWindowDimensions/index.native.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/withWindowDimensions/index.native.js b/src/components/withWindowDimensions/index.native.js index 0fd4fe4794f3..e147a20c9f4e 100644 --- a/src/components/withWindowDimensions/index.native.js +++ b/src/components/withWindowDimensions/index.native.js @@ -65,7 +65,7 @@ function WindowDimensionsProvider(props) { {(insets) => { const isExtraSmallScreenWidth = windowDimension.windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint; - const isSmallScreenWidth = !isExtraSmallScreenWidth; + const isSmallScreenWidth = true; const isMediumScreenWidth = false; const isLargeScreenWidth = false; return ( diff --git a/src/hooks/useWindowDimensions/index.native.js b/src/hooks/useWindowDimensions/index.native.js index 187c7fe1e66c..358e43f1b75d 100644 --- a/src/hooks/useWindowDimensions/index.native.js +++ b/src/hooks/useWindowDimensions/index.native.js @@ -9,7 +9,7 @@ import variables from '../../styles/variables'; export default function () { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint; - const isSmallScreenWidth = !isExtraSmallScreenHeight; + const isSmallScreenWidth = true; const isMediumScreenWidth = false; const isLargeScreenWidth = false; return {