Fix - On increasing the screen size the user can see the previous image in the list #17760

src/components/AttachmentCarousel/index.js

@@ -252,7 +252,10 @@ class AttachmentCarousel extends React.Component {
      * @returns {JSX.Element}
      */
     renderCell(props) {
-        const style = [props.style, styles.h100, {width: this.state.containerWidth}];
+        // 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} />;

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';

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,