Keyboard automatically dismisses when appropriate

A keyboard that lingers after form submit covers half the destination screen — users reach the home feed and see only the top row, then tap elsewhere to dismiss before they can scroll. On slow networks, this creates the impression that nothing happened after submit. Leaving the keyboard open during navigation transitions also makes screen-transition animations stutter on low-end Android because the keyboard reposition competes with the transition on the UI thread.

Call Keyboard.dismiss() at the top of every submit handler and on navigation transitions via React Navigation's beforeRemove listener:

import { Keyboard } from 'react-native';
const handleSubmit = async () => { Keyboard.dismiss(); await submitForm(); };
useEffect(() => navigation.addListener('beforeRemove', () => Keyboard.dismiss()), [navigation]);

Set keyboardShouldPersistTaps="handled" on any wrapping ScrollView so a tap outside the input also dismisses.

• ID: mobile-ux-patterns.keyboard-input.keyboard-dismiss

• Severity: low

• What to look for: Check all form submission handlers and navigation transitions. Look for Keyboard.dismiss() calls, onSubmitEditing handlers, and keyboardShouldPersistTaps settings. Count all forms and verify each has keyboard dismissal on submit.

• Pass criteria: Keyboard is dismissed after form submission via Keyboard.dismiss() or equivalent. Keyboard does not linger when navigating away from input screens. All form submit handlers include keyboard dismissal.

• Fail criteria: Keyboard remains open after form submission, or users must manually dismiss it by tapping outside the input area. Missing Keyboard.dismiss() in submit handlers.

• Skip (N/A) when: App has no text input fields.

• Detail on fail: Name the specific form or screen. "After signing in, keyboard remains open on the home screen — must tap elsewhere to dismiss." or "Navigating from login to home screen leaves keyboard open."

• Remediation: Dismiss keyboard on submit and navigation:

  import { Keyboard } from 'react-native';
  
  const handleSubmit = async () => {
    Keyboard.dismiss();
    await submitForm();
  };
  
  <TextInput
    placeholder="Message"
    returnKeyType="send"
    onSubmitEditing={handleSubmit}
  />
  
  // Or in useEffect for navigation
  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      Keyboard.dismiss();
    });
    return unsubscribe;
  }, [navigation]);