Merge pull request #8804 from mollfpr/fix-8115

Fix image looks cropped In the Preview page

src/components/ImageView/index.native.js

@@ -34,6 +34,7 @@ class ImageView extends PureComponent {
             imageWidth: undefined,
             imageHeight: undefined,
             interactionPromise: undefined,
+            containerHeight: undefined,
         };
 
         // Use the default double click interval from the ImageZoom library
@@ -72,7 +73,7 @@ class ImageView extends PureComponent {
             let imageWidth = width;
             let imageHeight = height;
             const containerWidth = Math.round(this.props.windowWidth);
-            const containerHeight = Math.round(this.props.windowHeight - variables.contentHeaderHeight);
+            const containerHeight = Math.round(this.state.containerHeight);
 
             const aspectRatio = Math.min(containerHeight / imageHeight, containerWidth / imageWidth);
 
@@ -134,6 +135,12 @@ class ImageView extends PureComponent {
                         styles.overflowHidden,
                         styles.errorOutline,
                     ]}
+                    onLayout={(event) => {
+                        const layout = event.nativeEvent.layout;
+                        this.setState({
+                            containerHeight: layout.height,
+                        });
+                    }}
                 >
                     <Image
                         source={{uri: this.props.url}}

src/components/Modal/BaseModal.js

@@ -7,8 +7,8 @@ import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes';
-import getModalStyles from '../../styles/getModalStyles';
 import * as Modal from '../../libs/actions/Modal';
+import getModalStyles from '../../styles/getModalStyles';
 
 const propTypes = {
     ...modalPropTypes,

src/styles/getModalStyles.js → src/styles/getModalStyles/getBaseModalStyles.js

@@ -1,7 +1,7 @@
-import CONST from '../CONST';
-import colors from './colors';
-import variables from './variables';
-import themeColors from './themes/default';
+import CONST from '../../CONST';
+import colors from '../colors';
+import variables from '../variables';
+import themeColors from '../themes/default';
 
 export default (type, windowDimensions, popoverAnchorPosition = {}, containerStyle = {}) => {
     const {isSmallScreenWidth, windowWidth} = windowDimensions;

src/styles/getModalStyles/index.android.js

@@ -0,0 +1,7 @@
+import getBaseModalStyles from './getBaseModalStyles';
+
+// Only apply top padding on iOS since it's the only platform using SafeAreaView
+export default (type, windowDimensions, popoverAnchorPosition = {}, containerStyle = {}) => ({
+    ...getBaseModalStyles(type, windowDimensions, popoverAnchorPosition, containerStyle),
+    shouldAddTopSafeAreaPadding: false,
+});

src/styles/getModalStyles/index.js

@@ -0,0 +1,3 @@
+import getBaseModalStyles from './getBaseModalStyles';
+
+export default getBaseModalStyles;