Skip to content
Advertisement

Callback when Keyboard Dismiss in React Native

I have a date picker and a text input in my screen. To avoid ugly transitions, I want to dismiss the keyboard before showing the date picker.

Currently, as I don’t know how to invoke a callback when the Keyboard is dismissed, I am doing something like this:

 const showBirthdayPicker = () => {
    // Dismiss the keyboard to avoid ugly transitions
    Keyboard.dismiss();

    setTimeout(() => {
      datePickerRef.current.show();
    }, 500);
 };

This works, but this solution has a problem… If the keyboard was dismissed before running this function, the user will experiment an unnecessary delay of 0.5 secs…

Is there any other way to do this? I have been looking at the documentation of Keyboard but no callback when dismissing.

Advertisement

Answer

As per the documentation, you can listen to the keyboardDidHide event to watch if the keyboard is dismissed. A quick example is following

  const showBirthdayPicker = () => {
    // Dismiss the keyboard to avoid ugly transitions
    Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
    Keyboard.dismiss();
  };
  const onKeyboardDidHide = (event) => {
    Keyboard.removeListener('keyboardDidHide', onKeyboardDidHide);
    datePickerRef.current.show();
  };

According to the document

Note that if you set android:windowSoftInputMode to adjustResize or adjustPan, only keyboardDidShow and keyboardDidHide events will be available on Android. If you set android:windowSoftInputMode to adjustNothing, no events will be available on Android. keyboardWillShow as well as keyboardWillHide are generally not available on Android since there is no native corresponding event.

Advertisement