diff --git a/src/App.js b/src/App.js index 25f568dbb95e..bcbd148aa63d 100644 --- 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 index 3e84837245f8..bb010e8ad703 100644 --- 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 new file mode 100644 index 000000000000..ead107f90a22 --- /dev/null +++ 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 => ( + + {props.children} + +); + +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 new file mode 100644 index 000000000000..e68fd1c402ce --- /dev/null +++ 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 index eca40d3f4aec..0b9ed2ed7182 100644 --- 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, }; }