From 1ada3f45dc1b88555969debbb0bc52c0ed64e620 Mon Sep 17 00:00:00 2001 From: OtavioStasiak Date: Mon, 8 Jun 2026 16:31:57 -0300 Subject: [PATCH] fix: stop composer keyboard from dismissing itself on small Android screens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit useCloseKeyboardWhenOrientationChanges read useSafeAreaFrame to detect rotation, but under adjustResize + edge-to-edge that frame shrinks when the soft keyboard opens. On small screens (e.g. Zebra TC21) the reduced height drops to roughly the width, flipping the portrait check, so the hook fired Keyboard.dismiss() immediately after the keyboard appeared — Gboard opened and instantly closed. Detect rotation from Dimensions.get('screen'), which reflects the physical display and is unaffected by the keyboard, and react to genuine dimension changes via a subscription instead of a render-time side effect. Co-Authored-By: Claude Opus 4.8 --- .../useCloseKeyboardWhenOrientationChanges.ts | 33 +++++++++++++------ 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/app/containers/MessageComposer/hooks/useCloseKeyboardWhenOrientationChanges.ts b/app/containers/MessageComposer/hooks/useCloseKeyboardWhenOrientationChanges.ts index 2bc0697bb8e..9c35372f908 100644 --- a/app/containers/MessageComposer/hooks/useCloseKeyboardWhenOrientationChanges.ts +++ b/app/containers/MessageComposer/hooks/useCloseKeyboardWhenOrientationChanges.ts @@ -1,13 +1,26 @@ -import { useRef } from 'react'; -import { Keyboard } from 'react-native'; -import { useSafeAreaFrame } from 'react-native-safe-area-context'; +import { useEffect, useRef } from 'react'; +import { Dimensions, Keyboard } from 'react-native'; + +const getIsPortrait = () => { + // 'screen' is the physical display size and is NOT affected by the soft keyboard. + // 'window'/safe-area frame shrink when the keyboard opens under adjustResize, which + // on small screens can make a keyboard-open look like a rotation and wrongly dismiss + // the keyboard right after it appears. Using 'screen' only reacts to real rotations. + const { width, height } = Dimensions.get('screen'); + return width < height; +}; export const useCloseKeyboardWhenOrientationChanges = () => { - const { width, height } = useSafeAreaFrame(); - const isPortrait = width < height; - const previousOrientation = useRef(isPortrait); - if (previousOrientation.current !== isPortrait) { - Keyboard.dismiss(); - previousOrientation.current = isPortrait; - } + const isPortrait = useRef(getIsPortrait()); + + useEffect(() => { + const subscription = Dimensions.addEventListener('change', () => { + const portrait = getIsPortrait(); + if (portrait !== isPortrait.current) { + isPortrait.current = portrait; + Keyboard.dismiss(); + } + }); + return () => subscription.remove(); + }, []); };