Keyboard does not cover input fields (KeyboardAvoidingView used)
Why it matters
When the keyboard opens and covers the active TextInput, users type blind — they cannot see validation errors, cannot confirm the autofill suggestion, and often submit the wrong value. Login and signup screens are the worst offenders because the password field is typically the last field and therefore the lowest on screen. Field-blind submission produces silent wrong-password lockouts that users attribute to the app, not the covered field.
Severity rationale
High because keyboard occlusion blocks the primary interaction on forms, which are the conversion path.
Remediation
Wrap every form in KeyboardAvoidingView with platform-correct behavior, and use keyboardShouldPersistTaps="handled" on any ScrollView containing inputs:
import { KeyboardAvoidingView, Platform } from 'react-native';
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
<TextInput placeholder="Email" />
<TextInput placeholder="Password" secureTextEntry />
<Button title="Sign In" onPress={submit} />
</KeyboardAvoidingView>
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile UX Patterns Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-ux-patterns·automated