From 38932d58f4b65d66c30d19bd27cb188043271b0f Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 21 Mar 2023 13:28:03 +0700 Subject: [PATCH 1/4] remove statusBarTranslucent={false} and update the paddingTop and marginTop of the modal --- src/components/AttachmentModal.js | 1 - src/components/AvatarCropModal/AvatarCropModal.js | 1 - src/libs/getSafeAreaPaddingTop/index.android.js | 5 +++++ src/libs/getSafeAreaPaddingTop/index.js | 3 +++ src/styles/StyleUtils.js | 3 ++- src/styles/getModalStyles/index.android.js | 8 -------- 6 files changed, 10 insertions(+), 11 deletions(-) create mode 100644 src/libs/getSafeAreaPaddingTop/index.android.js create mode 100644 src/libs/getSafeAreaPaddingTop/index.js delete mode 100644 src/styles/getModalStyles/index.android.js diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index a812a293746..e0c7f6e6bc9 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -248,7 +248,6 @@ class AttachmentModal extends PureComponent { return ( <> this.setState({isModalOpen: false})} diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js index 0d102d3b341..b9b276520ff 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.js +++ b/src/components/AvatarCropModal/AvatarCropModal.js @@ -363,7 +363,6 @@ const AvatarCropModal = (props) => { isVisible={props.isVisible} type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} onModalHide={resetState} - statusBarTranslucent={false} > {props.isSmallScreenWidth && } ({ - ...getBaseModalStyles(type, windowDimensions, popoverAnchorPosition, innerContainerStyle), - shouldAddTopSafeAreaMargin: false, - shouldAddTopSafeAreaPadding: false, -}); From 1ccd0b40379be4c0acf5752b4cab8f5cf4f23010 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 22 Mar 2023 00:18:11 +0700 Subject: [PATCH 2/4] fix: add statusBarTranslucent --- src/components/Modal/BaseModal.js | 2 +- src/libs/getSafeAreaPaddingTop/index.android.js | 4 ++-- src/styles/StyleUtils.js | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index a4b7ed90a8f..8c14ee72884 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -139,7 +139,7 @@ class BaseModal extends PureComponent { paddingBottom: safeAreaPaddingBottom, paddingLeft: safeAreaPaddingLeft, paddingRight: safeAreaPaddingRight, - } = StyleUtils.getSafeAreaPadding(insets); + } = StyleUtils.getSafeAreaPadding(insets, this.props.statusBarTranslucent); const modalPaddingStyles = StyleUtils.getModalPaddingStyles({ safeAreaPaddingTop, diff --git a/src/libs/getSafeAreaPaddingTop/index.android.js b/src/libs/getSafeAreaPaddingTop/index.android.js index cec9bc3a874..cbf42caf2c2 100644 --- a/src/libs/getSafeAreaPaddingTop/index.android.js +++ b/src/libs/getSafeAreaPaddingTop/index.android.js @@ -1,5 +1,5 @@ import {StatusBar} from 'react-native'; -export default function getSafeAreaPaddingTop() { - return StatusBar.currentHeight || 0; +export default function getSafeAreaPaddingTop(insets, statusBarTranslucent) { + return (statusBarTranslucent && StatusBar.currentHeight) || 0; } diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index c77ce19ffed..95eeb171523 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -126,11 +126,12 @@ function getDefaultWorspaceAvatarColor(workspaceName) { * Takes safe area insets and returns padding to use for a View * * @param {Object} insets + * @param {boolean} statusBarTranslucent * @returns {Object} */ -function getSafeAreaPadding(insets) { +function getSafeAreaPadding(insets, statusBarTranslucent) { return { - paddingTop: getSafeAreaPaddingTop(insets), + paddingTop: getSafeAreaPaddingTop(insets, statusBarTranslucent), paddingBottom: insets.bottom * variables.safeInsertPercentage, paddingLeft: insets.left * variables.safeInsertPercentage, paddingRight: insets.right * variables.safeInsertPercentage, From 8e84ce87f4e2763f22dc595bfe9273cda55f06b8 Mon Sep 17 00:00:00 2001 From: tienifr <113963320+tienifr@users.noreply.github.com> Date: Wed, 22 Mar 2023 00:48:28 +0700 Subject: [PATCH 3/4] fix: update src/styles/StyleUtils.js Co-authored-by: Aimane Chnaif <96077027+aimane-chnaif@users.noreply.github.com> --- src/styles/StyleUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 95eeb171523..a6d00d44d15 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -126,7 +126,7 @@ function getDefaultWorspaceAvatarColor(workspaceName) { * Takes safe area insets and returns padding to use for a View * * @param {Object} insets - * @param {boolean} statusBarTranslucent + * @param {Boolean} statusBarTranslucent * @returns {Object} */ function getSafeAreaPadding(insets, statusBarTranslucent) { From 0befe08e04c450c2a39dd7059f83da4acaf28900 Mon Sep 17 00:00:00 2001 From: christianwenifr Date: Wed, 22 Mar 2023 00:54:58 +0700 Subject: [PATCH 4/4] fix: add jsdocs definitions for the new functions --- src/libs/getSafeAreaPaddingTop/index.android.js | 7 +++++++ src/libs/getSafeAreaPaddingTop/index.js | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/src/libs/getSafeAreaPaddingTop/index.android.js b/src/libs/getSafeAreaPaddingTop/index.android.js index cbf42caf2c2..db66c1739ff 100644 --- a/src/libs/getSafeAreaPaddingTop/index.android.js +++ b/src/libs/getSafeAreaPaddingTop/index.android.js @@ -1,5 +1,12 @@ import {StatusBar} from 'react-native'; +/** + * Returns safe area padding top to use for a View + * + * @param {Object} insets + * @param {Boolean} statusBarTranslucent + * @returns {Number} + */ export default function getSafeAreaPaddingTop(insets, statusBarTranslucent) { return (statusBarTranslucent && StatusBar.currentHeight) || 0; } diff --git a/src/libs/getSafeAreaPaddingTop/index.js b/src/libs/getSafeAreaPaddingTop/index.js index 8c7ca1fb6fe..89b3579587e 100644 --- a/src/libs/getSafeAreaPaddingTop/index.js +++ b/src/libs/getSafeAreaPaddingTop/index.js @@ -1,3 +1,9 @@ +/** + * Takes safe area insets and returns padding top to use for a View + * + * @param {Object} insets + * @returns {Number} + */ export default function getSafeAreaPaddingTop(insets) { return insets.top; }