@sendbird/uikit-react-native/lib/module/hooks/useKeyboardStatus.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import { useEffect, useState } from 'react';
import { Keyboard, LayoutAnimation, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NOOP } from '@sendbird/uikit-utils';
let isLayoutAnimationConfigured = false;
const configureNextLayoutAnimation = event => {
  if (isLayoutAnimationConfigured) return;
  const config = LayoutAnimation.create(event.duration, event.easing, LayoutAnimation.Properties.scaleY);
  isLayoutAnimationConfigured = true;
  const onEnd = () => isLayoutAnimationConfigured = false;
  LayoutAnimation.configureNext(config, onEnd, onEnd);
};
const {
  showEvent,
  hideEvent
} = Platform.select({
  android: {
    showEvent: 'keyboardDidShow',
    hideEvent: 'keyboardDidHide'
  },
  default: {
    showEvent: 'keyboardWillShow',
    hideEvent: 'keyboardWillHide'
  }
});
const useKeyboardStatus = () => {
  const [keyboardStatus, setKeyboardStatus] = useState({
    visible: false,
    height: 0,
    bottomSpace: 0
  });
  const {
    bottom: bottomInset
  } = useSafeAreaInsets();
  useEffect(() => {
    const subscriptions = [Keyboard.addListener(showEvent, event => {
      const height = event.endCoordinates.height;
      const bottomSpace = Platform.select({
        ios: height - bottomInset,
        default: 0
      });
      const nextLayoutAnimation = Platform.select({
        ios: configureNextLayoutAnimation,
        default: NOOP
      });
      nextLayoutAnimation(event);
      setKeyboardStatus({
        visible: true,
        height,
        bottomSpace
      });
    }), Keyboard.addListener(hideEvent, () => {
      const height = 0;
      const bottomSpace = Platform.select({
        default: height
      });
      // const nextLayoutAnimation = Platform.select({ ios: configureNextLayoutAnimation, default: NOOP });

      // nextLayoutAnimation(event);
      setKeyboardStatus({
        visible: false,
        height,
        bottomSpace
      });
    })];
    return () => {
      subscriptions.forEach(it => it.remove());
    };
  }, []);
  return keyboardStatus;
};
export default useKeyboardStatus;
//# sourceMappingURL=useKeyboardStatus.js.map