react-native KeyboardListener

KeyboardListener.ts

import React, {useEffect} from 'react';
import {Keyboard} from 'react-native';

const KeyboardListener: React.FC<{
  onDidShow: (e: any) => void;
  onDidHide: (e: any) => void;
}> = ({onDidShow, onDidHide}) => {
  useEffect(() => {
    if (onDidShow) Keyboard.addListener('keyboardDidShow', onDidShow);
    if (onDidHide) Keyboard.addListener('keyboardDidHide', onDidHide);

    return () => {
      Keyboard.removeListener('keyboardDidShow', onDidShow);
      Keyboard.removeListener('keyboardDidHide', onDidHide);
    };
  }, []);

  return null;
};

export default KeyboardListener;


// using like: <KeyboardListener onDidShow={() => setKeyboardOpen(true)} onDidHide={() => setKeyboardOpen(false)} />