From 9966ebbd985404dc3e47e335e6bfda9b6baab1a6 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Fri, 11 Aug 2023 17:53:41 -0500 Subject: [PATCH 1/2] fix: calculate image size based on screen height --- src/components/ThumbnailImage.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js index 47516164864f..5eec7a77cb11 100644 --- a/src/components/ThumbnailImage.js +++ b/src/components/ThumbnailImage.js @@ -1,10 +1,11 @@ import lodashClamp from 'lodash/clamp'; import React, {useCallback, useState} from 'react'; -import {View} from 'react-native'; +import {View, Dimensions} from 'react-native'; import PropTypes from 'prop-types'; import ImageWithSizeCalculation from './ImageWithSizeCalculation'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; +import * as DeviceCapabilities from '../libs/DeviceCapabilities'; import useWindowDimensions from '../hooks/useWindowDimensions'; const propTypes = { @@ -41,12 +42,16 @@ const defaultProps = { */ function calculateThumbnailImageSize(width, height, windowHeight) { + if (!width || !height) { + return {}; + } // Width of the thumbnail works better as a constant than it does // a percentage of the screen width since it is relative to each screen // Note: Clamp minimum width 40px to support touch device let thumbnailScreenWidth = lodashClamp(width, 40, 250); const imageHeight = height / (width / thumbnailScreenWidth); - let thumbnailScreenHeight = lodashClamp(imageHeight, 40, windowHeight * 0.4); + const screenHeight = DeviceCapabilities.canUseTouchScreen() ? Dimensions.get('screen').height : windowHeight; + let thumbnailScreenHeight = lodashClamp(imageHeight, 40, screenHeight * 0.4); const aspectRatio = height / width; // If thumbnail height is greater than its width, then the image is portrait otherwise landscape. From dabf0a19ceaad7bdfc104f837808c2660761feb2 Mon Sep 17 00:00:00 2001 From: s-alves10 Date: Fri, 11 Aug 2023 18:36:15 -0500 Subject: [PATCH 2/2] fix: add comment --- src/components/ThumbnailImage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js index 5eec7a77cb11..d68d7530839b 100644 --- a/src/components/ThumbnailImage.js +++ b/src/components/ThumbnailImage.js @@ -50,6 +50,7 @@ function calculateThumbnailImageSize(width, height, windowHeight) { // Note: Clamp minimum width 40px to support touch device let thumbnailScreenWidth = lodashClamp(width, 40, 250); const imageHeight = height / (width / thumbnailScreenWidth); + // On mWeb, when soft keyboard opens, window height changes, making thumbnail height inconsistent. We use screen height instead. const screenHeight = DeviceCapabilities.canUseTouchScreen() ? Dimensions.get('screen').height : windowHeight; let thumbnailScreenHeight = lodashClamp(imageHeight, 40, screenHeight * 0.4); const aspectRatio = height / width;