From 1014d69ee55df12aa36d2a6b5464bdfb8e61ed78 Mon Sep 17 00:00:00 2001 From: AmjedNazzal Date: Tue, 9 May 2023 03:46:56 +0300 Subject: [PATCH 1/5] Issue17760 --- src/components/AttachmentCarousel/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 11f48b12d9ae..2bcb22336833 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, FlatList} from 'react-native'; +import {View, FlatList, useWindowDimensions} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -252,7 +252,8 @@ class AttachmentCarousel extends React.Component { * @returns {JSX.Element} */ renderCell(props) { - const style = [props.style, styles.h100, {width: this.state.containerWidth}]; + // We are isolating the method this function uses to update the width of the container to make it respond faster + const style = [props.style, styles.h100, {width: useWindowDimensions().width}]; // eslint-disable-next-line react/jsx-props-no-spreading return ; From 487588c70ea82490c48b6a7e7d30b6e8a170cb75 Mon Sep 17 00:00:00 2001 From: Amjed Nazzal <74202751+AmjedNazzal@users.noreply.github.com> Date: Wed, 10 May 2023 10:30:28 +0300 Subject: [PATCH 2/5] Update src/components/AttachmentCarousel/index.js Co-authored-by: Aimane Chnaif <96077027+aimane-chnaif@users.noreply.github.com> --- src/components/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 2bcb22336833..3140534df479 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -253,7 +253,7 @@ class AttachmentCarousel extends React.Component { */ renderCell(props) { // We are isolating the method this function uses to update the width of the container to make it respond faster - const style = [props.style, styles.h100, {width: useWindowDimensions().width}]; + const style = [props.style, styles.h100, {width: this.props.isSmallScreenWidth ? this.props.windowWidth - 1 : this.props.windowWidth - 39}]; // eslint-disable-next-line react/jsx-props-no-spreading return ; From b1bbbf843170352cbb135d36a7fa0da41c5706fd Mon Sep 17 00:00:00 2001 From: AmjedNazzal Date: Thu, 11 May 2023 19:15:04 +0300 Subject: [PATCH 3/5] Common value for centered modals --- src/components/AttachmentCarousel/index.js | 8 +++++--- src/styles/getModalStyles/getBaseModalStyles.js | 13 +++++++++---- src/styles/styles.js | 5 +++++ 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 3140534df479..b58494b7bb31 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, FlatList, useWindowDimensions} from 'react-native'; +import {View, FlatList} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -252,8 +252,10 @@ class AttachmentCarousel extends React.Component { * @returns {JSX.Element} */ renderCell(props) { - // We are isolating the method this function uses to update the width of the container to make it respond faster - const style = [props.style, styles.h100, {width: this.props.isSmallScreenWidth ? this.props.windowWidth - 1 : this.props.windowWidth - 39}]; + // We are using a new style for central modals to address the issue in https://github.com/Expensify/App/issues/17760 + // Keep in mind that the +1 is to keep the layout stylings the exact same to prevent regressions + const modalStyles = styles.centeredModalStyles(this.props.isSmallScreenWidth); + const style = [props.style, styles.h100, {width: this.props.windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2 + 1}]; // eslint-disable-next-line react/jsx-props-no-spreading return ; diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js index 0475635a35f5..90e309dee1c0 100644 --- a/src/styles/getModalStyles/getBaseModalStyles.js +++ b/src/styles/getModalStyles/getBaseModalStyles.js @@ -1,6 +1,13 @@ import CONST from '../../CONST'; import variables from '../variables'; import themeColors from '../themes/default'; +import styles from '../styles'; + + +const getCenteredModalStyles = (windowWidth, isSmallScreenWidth) => ({ + borderWidth: styles.centeredModalStyles(isSmallScreenWidth).borderWidth, + width: isSmallScreenWidth ? '100%' : windowWidth - styles.centeredModalStyles(isSmallScreenWidth).marginHorizontal * 2, +}); export default (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}) => { const {isSmallScreenWidth, windowWidth} = windowDimensions; @@ -76,9 +83,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, innerContain marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, borderRadius: isSmallScreenWidth ? 0 : 12, - borderWidth: isSmallScreenWidth ? 1 : 0, overflow: 'hidden', - width: isSmallScreenWidth ? '100%' : windowWidth - 40, + ...getCenteredModalStyles(windowWidth, isSmallScreenWidth), }; // Allow this modal to be dismissed with a swipe down or swipe right @@ -112,9 +118,8 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, innerContain marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, borderRadius: isSmallScreenWidth ? 0 : 12, - borderWidth: isSmallScreenWidth ? 1 : 0, overflow: 'hidden', - width: isSmallScreenWidth ? '100%' : windowWidth - 40, + ...getCenteredModalStyles(windowWidth, isSmallScreenWidth), }; swipeDirection = undefined; animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn'; diff --git a/src/styles/styles.js b/src/styles/styles.js index e6a24c610595..0b20e1ef949c 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1967,6 +1967,11 @@ const styles = { backgroundColor: themeColors.modalBackdrop, }, + centeredModalStyles: (isSmallScreenWidth) => ({ + borderWidth: isSmallScreenWidth ? 1 : 0, + marginHorizontal: isSmallScreenWidth ? 0 : 20, + }), + imageModalImageCenterContainer: { alignItems: 'center', flex: 1, From bd4858e87269599c4d31101030b001400be468d3 Mon Sep 17 00:00:00 2001 From: Amjed Nazzal <74202751+AmjedNazzal@users.noreply.github.com> Date: Thu, 11 May 2023 20:30:18 +0300 Subject: [PATCH 4/5] Update src/components/AttachmentCarousel/index.js Co-authored-by: Aimane Chnaif <96077027+aimane-chnaif@users.noreply.github.com> --- src/components/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index e9946bf6d032..9fee0a885b47 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -242,7 +242,7 @@ class AttachmentCarousel extends React.Component { * @returns {JSX.Element} */ renderCell(props) { - // We are using a new style for central modals to address the issue in https://github.com/Expensify/App/issues/17760 + // Use window width instead of layout width to address the issue in https://github.com/Expensify/App/issues/17760 // Keep in mind that the +1 is to keep the layout stylings the exact same to prevent regressions const modalStyles = styles.centeredModalStyles(this.props.isSmallScreenWidth); const style = [props.style, styles.h100, {width: this.props.windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2 + 1}]; From 30d5628596e60f87b48313c7c8f4006e0e664125 Mon Sep 17 00:00:00 2001 From: Amjed Nazzal <74202751+AmjedNazzal@users.noreply.github.com> Date: Thu, 11 May 2023 20:30:37 +0300 Subject: [PATCH 5/5] Update src/components/AttachmentCarousel/index.js Co-authored-by: Aimane Chnaif <96077027+aimane-chnaif@users.noreply.github.com> --- src/components/AttachmentCarousel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js index 9fee0a885b47..b9315894a4b4 100644 --- a/src/components/AttachmentCarousel/index.js +++ b/src/components/AttachmentCarousel/index.js @@ -243,7 +243,7 @@ class AttachmentCarousel extends React.Component { */ renderCell(props) { // Use window width instead of layout width to address the issue in https://github.com/Expensify/App/issues/17760 - // Keep in mind that the +1 is to keep the layout stylings the exact same to prevent regressions + // considering horizontal margin and border width in centered modal const modalStyles = styles.centeredModalStyles(this.props.isSmallScreenWidth); const style = [props.style, styles.h100, {width: this.props.windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2 + 1}];