Repository navigation
fix(mobile): prevent soft keyboard from obscuring chat input on Android - #142
Conversation
On Android devices, tapping the message input caused the soft keyboard to
display directly over the text input field, obscuring what the user was typing.
Root cause:
In `ChatScreen`, `KeyboardAvoidingView` was configured with:
`behavior={Platform.OS === 'ios' ? 'padding' : undefined}`.
On Android, behavior resolved to `undefined`. With React Native 0.81 and
edge-to-edge display enabled (`edgeToEdgeEnabled=true`), `KeyboardAvoidingView`
calculates displacement using `frame.y + frame.height - keyboardY`. On Android
edge-to-edge, `keyboardY` reports the window display bottom area, which results
in zero or negative displacement.
Fix:
- Register Android `keyboardDidShow` and `keyboardDidHide` listeners to track the
exact virtual keyboard height.
- Compute dynamic bottom padding offset subtracting the bottom navigation bar height (74dp).
- Apply this padding to `KeyboardAvoidingView` on Android while leaving iOS `behavior="padding"` untouched.
- Tested and verified on physical Samsung Galaxy Android device.
jerelvelarde
left a comment
jerelvelarde
left a comment
There was a problem hiding this comment.
Value: makes Android chat input visible above the keyboard, with scoped listeners and cleanup. Template: extensive checks and a reported physical Samsung test; please add the required screenshot/recording. I inspected layout/lifecycle but did not repeat native-device testing. No actionable security/correctness finding. Updated-main diff reviewed. Merge after required CI.
jerelvelarde
left a comment
jerelvelarde
left a comment
There was a problem hiding this comment.
Re-reviewed integration with #54: retained both historical error replay handling and Android keyboard adjustment. Diff against current main remains the original keyboard fix. Three SDK regressions and mobile typecheck pass. Previous value/template/security assessment holds; merge after required CI.
2 participants
Problem
On Android devices, tapping into the chat message
TextInputopens the virtual soft keyboard directly over the text input container, obscuring the input field and preventing the user from seeing what they are typing until dismissing the keyboard.Root Cause
In
apps/mobile/src/chat.tsx,KeyboardAvoidingViewwas configured with:behaviorresolved toundefined.behavior="padding", React Native 0.81 with edge-to-edge drawing enabled (edgeToEdgeEnabled=true) calculates displacement usingframe.y + frame.height - keyboardY. On Android edge-to-edge,keyboardYreports the window display bottom (mVisibleViewArea.bottom), resulting in zero displacement.Solution
Keyboard.addListener("keyboardDidShow")andkeyboardDidHidespecifically for Android to track the exact keyboard end coordinate height.paddingBottomtoKeyboardAvoidingViewon Android.behavior="padding") and web behavior untouched.Verification (
CONTRIBUTING.mdchecks)pnpm lint(biome check .) — Passed (Checked 143 files, 0 errors).pnpm typecheck(tsc --noEmit && pnpm --dir apps/mobile typecheck) — Passed cleanly.pnpm --dir apps/worker typecheck— Passed cleanly.pnpm test— Passed all unit tests.pnpm build:server— TypeScript compilation passed.pnpm build:web— Metro web platform export bundled successfully.pnpm build:ios— Metro iOS platform export bundled successfully.pnpm build:android— Metro Android platform export bundled successfully../gradlew assembleRelease) on a physical Samsung Galaxy Android device (SM-A366E). Verified that tapping the chat input smoothly shifts the text box above the keyboard, keeping full visibility while typing.