fix issue 6326: Chat - Magnifying glass displayed anywhere

railway17 · Nov 23, 2021 · dd96f3e · dd96f3e
1 parent c95c2dd
commit dd96f3e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
@@ -19,6 +19,7 @@ class ImageView extends PureComponent {
         this.scrollableRef = null;
         this.canUseTouchScreen = canUseTouchScreen();
         this.state = {
+            containerHeight: 0,
             isZoomed: false,
             isDragging: false,
             isMouseDown: false,
@@ -162,19 +163,23 @@ class ImageView extends PureComponent {
         return (
             <View
                 ref={el => this.scrollableRef = el}
+                onLayout={(e) => {
+                    this.setState({containerHeight: e.nativeEvent.layout.height});
+                }}
                 style={[
                     styles.imageViewContainer,
                     styles.overflowScroll,
                     styles.noScrollbars,
+                    styles.pRelative,
                 ]}
             >
                 <Pressable
-                    style={[
-                        styles.w100,
-                        styles.h100,
-                        styles.flex1,
-                        getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
-                    ]}
+                    style={{
+                        ...getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale, this.state.containerHeight),
+                        ...getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
+                        ...this.state.isZoomed ? styles.pRelative : styles.pAbsolute,
+                        ...styles.flex1,
+                    }}
                     onPressIn={(e) => {
                         const {pageX, pageY} = e.nativeEvent;
                         this.setState({
@@ -212,7 +217,10 @@ class ImageView extends PureComponent {
                 >
                     <Image
                         source={{uri: this.props.url}}
-                        style={getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale)}
+                        style={[
+                            styles.h100,
+                            styles.w100,
+                        ]}
                         resizeMode={this.state.isZoomed ? 'contain' : 'center'}
                     />
                 </Pressable>

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2296,18 +2296,30 @@ function getZoomCursorStyle(isZoomed, isDragging) {
  * @param {Number} imgWidth
  * @param {Number} imgHeight
  * @param {Number} zoomScale
+ * @param {Number} containerHeight
  * @return {Object}
  */
-function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale) {
+function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight) {
     if (imgWidth === 0 || imgHeight === 0) {
         return {
             height: isZoomed ? '250%' : '100%',
             width: isZoomed ? '250%' : '100%',
         };
     }
+    if (isZoomed) {
+        return {
+            height: `${(imgHeight * zoomScale)}px`,
+            width: `${(imgWidth * zoomScale)}px`,
+        };
+    }
+
+    const top = `${(containerHeight - imgHeight) / 2}px`;
+    const left = `calc(50% - ${imgWidth / 2}px)`;
     return {
-        height: isZoomed ? `${(imgHeight * zoomScale)}px` : '100%',
-        width: isZoomed ? `${(imgWidth * zoomScale)}px` : '100%',
+        height: `${imgHeight}px`,
+        width: `${imgWidth}px`,
+        top,
+        left,
     };
 }