Keyboard

Keyboard

The Keyboard module reports and controls the soft keyboard. Keyboard.addListener() subscribes to keyboardDidShow and keyboardDidHide (both platforms) and to keyboardWillShow, keyboardWillHide and keyboardWillChangeFrame (iOS only, because Android does not announce the keyboard in advance). The event's endCoordinates gives its frame. Keyboard.dismiss() closes it and blurs the focused input, isVisible() and metrics() report the current state, and scheduleLayoutAnimation(event) animates a layout change in step with the keyboard on iOS.

src/interact/KeyboardDemo.tsx: logging the keyboard and dismissing it (excerpt)TSX

  useEffect(() => {
    const subs = [
      Keyboard.addListener('keyboardDidShow', (e) =>
        console.log('shown, height', Math.round(e.endCoordinates.height), 'dp,',
          'visible:', Keyboard.isVisible())),
      Keyboard.addListener('keyboardDidHide', () =>
        console.log('hidden, visible:', Keyboard.isVisible(), 'metrics:', Keyboard.metrics())),
    ];
    return () => subs.forEach((s) => s.remove());
  }, []);
// ...a TextInput, and a Done button whose onPress calls Keyboard.dismiss()

Tapping the search field, then Done:

Output of 110

 LOG  shown, height 312 dp, visible: true
 LOG  hidden, visible: false metrics: undefined

The 312 dp is Gboard's height on this emulator, the same figure Keyboard Handling measured. Use the events for things the layout cannot do by itself, such as hiding a bottom tab bar while typing; for keeping inputs visible, prefer KeyboardAvoidingView (Keyboard Handling) or react-native-keyboard-controller 3,738 . Always remove listeners in the effect's cleanup, or every remount adds another.

MENU