Merge pull request #6291 from kakajann/iphonex-landscape-ui-fixes

iPhoneX Landscape UI
Expensify · Nov 16, 2021 · c7e618c · c7e618c
2 parents 239e326 + 2caddf0
commit c7e618c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 0 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,6 +9,7 @@ import {LocaleContextProvider} from './components/withLocalize';
 import OnyxProvider from './components/OnyxProvider';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import ComposeProviders from './components/ComposeProviders';
+import SafeArea from './components/SafeArea';
 
 LogBox.ignoreLogs([
     // Basically it means that if the app goes in the background and back to foreground on Android,
@@ -25,6 +26,7 @@ const App = () => (
         components={[
             OnyxProvider,
             SafeAreaProvider,
+            SafeArea,
             LocaleContextProvider,
             HTMLEngineProvider,
         ]}

diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
@@ -116,11 +116,15 @@ class BaseModal extends PureComponent {
                         const {
                             paddingTop: safeAreaPaddingTop,
                             paddingBottom: safeAreaPaddingBottom,
+                            paddingLeft: safeAreaPaddingLeft,
+                            paddingRight: safeAreaPaddingRight,
                         } = getSafeAreaPadding(insets);
 
                         const modalPaddingStyles = getModalPaddingStyles({
                             safeAreaPaddingTop,
                             safeAreaPaddingBottom,
+                            safeAreaPaddingLeft,
+                            safeAreaPaddingRight,
                             shouldAddBottomSafeAreaPadding,
                             shouldAddTopSafeAreaPadding,
                             modalContainerStylePaddingTop: modalContainerStyle.paddingTop,

diff --git a/src/components/SafeArea/index.ios.js b/src/components/SafeArea/index.ios.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+
+const SafeArea = props => (
+    <SafeAreaView style={[styles.iPhoneXSafeArea]} edges={['left', 'right']}>
+        {props.children}
+    </SafeAreaView>
+);
+
+SafeArea.propTypes = {
+    /** App content */
+    children: PropTypes.node.isRequired,
+};
+
+export default SafeArea;
diff --git a/src/components/SafeArea/index.js b/src/components/SafeArea/index.js
@@ -0,0 +1 @@
+export default ({children}) => children;
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2088,6 +2088,11 @@ const styles = {
     googleListView: {
         transform: [{scale: 0}],
     },
+
+    iPhoneXSafeArea: {
+        backgroundColor: colors.black,
+        flex: 1,
+    },
 };
 
 const baseCodeTagStyles = {
@@ -2191,6 +2196,8 @@ function getSafeAreaPadding(insets) {
     return {
         paddingTop: insets.top,
         paddingBottom: insets.bottom * variables.safeInsertPercentage,
+        paddingLeft: insets.left * variables.safeInsertPercentage,
+        paddingRight: insets.right * variables.safeInsertPercentage,
     };
 }
 
@@ -2403,6 +2410,8 @@ function getModalPaddingStyles({
     shouldAddTopSafeAreaPadding,
     safeAreaPaddingTop,
     safeAreaPaddingBottom,
+    safeAreaPaddingLeft,
+    safeAreaPaddingRight,
     modalContainerStylePaddingTop,
     modalContainerStylePaddingBottom,
 }) {
@@ -2413,6 +2422,8 @@ function getModalPaddingStyles({
         paddingBottom: shouldAddBottomSafeAreaPadding
             ? (modalContainerStylePaddingBottom || 0) + safeAreaPaddingBottom
             : modalContainerStylePaddingBottom || 0,
+        paddingLeft: safeAreaPaddingLeft || 0,
+        paddingRight: safeAreaPaddingRight || 0,
     };
 }