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 fbfe954f80f8..9bf0554ed7ec 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..e147a20c9f4e
--- /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 = true;
+ 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..358e43f1b75d
--- /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 = true;
+ const isMediumScreenWidth = false;
+ const isLargeScreenWidth = false;
+ return {
+ windowWidth,
+ windowHeight,
+ isExtraSmallScreenHeight,
+ isSmallScreenWidth,
+ isMediumScreenWidth,
+ isLargeScreenWidth,
+ };
+}