From 26d9c88190746c23109aacca597ca598c4827907 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 5 Sep 2023 16:54:49 +0700 Subject: [PATCH 1/2] fix: window height changes --- src/hooks/useWindowDimensions.js | 6 ++++-- src/styles/variables.ts | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/hooks/useWindowDimensions.js b/src/hooks/useWindowDimensions.js index 58e6b8758927..b09e0c0754b1 100644 --- a/src/hooks/useWindowDimensions.js +++ b/src/hooks/useWindowDimensions.js @@ -1,5 +1,5 @@ // eslint-disable-next-line no-restricted-imports -import {useWindowDimensions} from 'react-native'; +import {Dimensions, useWindowDimensions} from 'react-native'; import variables from '../styles/variables'; /** @@ -8,7 +8,9 @@ import variables from '../styles/variables'; */ export default function () { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); - const isExtraSmallScreenHeight = windowHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint; + // On mWeb, when soft keyboard opens, window height changes. We use screen height instead. + const screenHeight = Dimensions.get('screen').height; + const isExtraSmallScreenHeight = screenHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint; const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint; const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint; const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f584e657c693..89cc2c2e5ec6 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -74,7 +74,7 @@ export default { emojiLineHeight: 28, iouAmountTextSize: 40, extraSmallMobileResponsiveWidthBreakpoint: 320, - extraSmallMobileResponsiveHeightBreakpoint: 550, + extraSmallMobileResponsiveHeightBreakpoint: 667, mobileResponsiveWidthBreakpoint: 800, modalFullscreenBackdropOpacity: 0.5, tabletResponsiveWidthBreakpoint: 1024, From 3ae81481626f2dd53c774a87f0d9c0110d74c16e Mon Sep 17 00:00:00 2001 From: Tienifr <113963320+tienifr@users.noreply.github.com> Date: Tue, 5 Sep 2023 20:15:46 +0700 Subject: [PATCH 2/2] Update comment Co-authored-by: Rajat Parashar --- src/hooks/useWindowDimensions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useWindowDimensions.js b/src/hooks/useWindowDimensions.js index b09e0c0754b1..6ef46e65473d 100644 --- a/src/hooks/useWindowDimensions.js +++ b/src/hooks/useWindowDimensions.js @@ -8,7 +8,7 @@ import variables from '../styles/variables'; */ export default function () { const {width: windowWidth, height: windowHeight} = useWindowDimensions(); - // On mWeb, when soft keyboard opens, window height changes. We use screen height instead. + // When the soft keyboard opens on mWeb, the window height changes. Use static screen height instead to get real screenHeight. const screenHeight = Dimensions.get('screen').height; const isExtraSmallScreenHeight = screenHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint; const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;