diff --git a/src/CONST.ts b/src/CONST.ts index 9aa0841092ad..17f25edb6805 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -6501,6 +6501,7 @@ const CONST = { LHN_WORKSPACE_CHAT_TOOLTIP: 'workspaceChatLHNTooltip', GLOBAL_CREATE_TOOLTIP: 'globalCreateTooltip', }, + SMART_BANNER_HEIGHT: 152, } as const; type Country = keyof typeof CONST.ALL_COUNTRIES; diff --git a/src/utils/keyboard/index.website.ts b/src/utils/keyboard/index.website.ts index f2ea9c673fdf..d0c00b5ad794 100644 --- a/src/utils/keyboard/index.website.ts +++ b/src/utils/keyboard/index.website.ts @@ -1,23 +1,20 @@ import {Keyboard} from 'react-native'; +import CONST from '@src/CONST'; let isVisible = false; const initialViewportHeight = window?.visualViewport?.height; const handleResize = () => { - const currentHeight = window?.visualViewport?.height; + const viewportHeight = window?.visualViewport?.height; - if (!currentHeight || !initialViewportHeight) { + if (!viewportHeight || !initialViewportHeight) { return; } - if (currentHeight < initialViewportHeight) { - isVisible = true; - return; - } - - if (currentHeight === initialViewportHeight) { - isVisible = false; - } + // Determine if the keyboard is visible by checking if the height difference exceeds 152px. + // The 152px threshold accounts for UI elements such as smart banners on iOS Retina (max ~152px) + // and smaller overlays like offline indicators on Android. Height differences > 152px reliably indicate keyboard visibility. + isVisible = initialViewportHeight - viewportHeight > CONST.SMART_BANNER_HEIGHT; }; window.visualViewport?.addEventListener('resize', handleResize); @@ -30,7 +27,14 @@ const dismiss = (): Promise => { } const handleDismissResize = () => { - if (window.visualViewport?.height !== initialViewportHeight) { + const viewportHeight = window?.visualViewport?.height; + + if (!viewportHeight || !initialViewportHeight) { + return; + } + + const isKeyboardVisible = initialViewportHeight - viewportHeight > CONST.SMART_BANNER_HEIGHT; + if (isKeyboardVisible) { return; }