react-native-ui-lib/lib/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.js

[](https://stand-with-ukraine.pp.ua)

import { useCallback, useEffect, useState } from 'react';
import { Keyboard, Platform } from 'react-native';
import TextInputKeyboardManager from "../TextInputKeyboardManager";
const IS_IOS = Platform.OS === 'ios';
const DEFAULT_KEYBOARD_HEIGHT = IS_IOS ? 216 : 312; // TODO: verify this value for iOS

export default class KeyboardUtils {
  static displayName = 'KeyboardUtils';
  static listeners = {};
  static addListener = (id, onDismiss) => {
    if (id && onDismiss && !KeyboardUtils.listeners[id]) {
      KeyboardUtils.listeners[id] = onDismiss;
    }
  };
  static removeListener = id => {
    if (id && KeyboardUtils.listeners[id]) {
      delete KeyboardUtils.listeners[id];
    }
  };

  /**
   * Used to dismiss (close) the keyboard.
   */
  static dismiss = () => {
    Keyboard.dismiss();
    TextInputKeyboardManager.dismissKeyboard();
    Object.keys(KeyboardUtils.listeners).forEach(key => {
      KeyboardUtils.listeners[key]();
    });
  };
}
const useKeyboardHeight = ({
  id,
  onDismiss
}) => {
  const [isInitialized, setIsInitialized] = useState(false);
  const [keyboardHeight, setKeyboardHeight] = useState(DEFAULT_KEYBOARD_HEIGHT);
  const [isVisible, setIsVisible] = useState(false);
  const keyboardDidShow = useCallback(e => {
    if (!isInitialized) {
      setIsInitialized(true);
      setKeyboardHeight(e.endCoordinates.height);
    }
    setIsVisible(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const keyboardDidHide = useCallback(() => {
    setIsVisible(false);
  }, []);
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
    // @ts-ignore
    KeyboardUtils.addListener(id, onDismiss);
    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
      // @ts-ignore
      KeyboardUtils.removeListener(id);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return {
    keyboardHeight,
    isKeyboardVisible: isVisible
  };
};
const KeyboardHeightListener = ({
  id,
  onDismiss,
  onKeyboardHeightChange,
  onKeyboardVisibilityChange
}) => {
  const {
    keyboardHeight,
    isKeyboardVisible
  } = useKeyboardHeight({
    id,
    onDismiss
  });
  useEffect(() => {
    onKeyboardHeightChange?.(keyboardHeight);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [keyboardHeight]);
  useEffect(() => {
    onKeyboardVisibilityChange?.(isKeyboardVisible);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isKeyboardVisible]);
  return null;
};
export { useKeyboardHeight, KeyboardHeightListener };