From 1014d69ee55df12aa36d2a6b5464bdfb8e61ed78 Mon Sep 17 00:00:00 2001
From: AmjedNazzal <amjednazzal@outlook.com>
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 <View {...props} style={style} />;

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 <View {...props} style={style} />;

From b1bbbf843170352cbb135d36a7fa0da41c5706fd Mon Sep 17 00:00:00 2001
From: AmjedNazzal <amjednazzal@outlook.com>
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 <View {...props} style={style} />;
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}];
 
