@livelike/react-native/lib/module/hooks/useAutoScroll.js

LiveLike React Native package

import { useCallback, useEffect, useRef, useState } from 'react';
import { Keyboard } from 'react-native';
const MIN_MESSAGE_HEIGHT = 50;
const DEFAULT_SCROLL_TO_END_DELAY = 500;
export function useAutoScroll(_ref) {
  let {
    ref
  } = _ref;
  const [currentContentHeight, setCurrentContentHeight] = useState(0);
  const userScrolled = useRef(false);
  const scrollToEnd = useCallback(_ref2 => {
    let {
      delay
    } = _ref2;
    if (ref.current && !userScrolled.current) {
      setTimeout(() => {
        var _ref$current;
        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.scrollToEnd();
      }, delay);
    }
  }, [ref, userScrolled.current]);
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
      scrollToEnd({
        delay: DEFAULT_SCROLL_TO_END_DELAY
      });
    });
    return () => {
      keyboardDidShowListener.remove();
    };
  }, [scrollToEnd, userScrolled.current]);
  const onScrollEndDrag = useCallback(() => {
    if (!userScrolled.current) {
      userScrolled.current = true;
    }
  }, [userScrolled.current]);
  const onContentSizeChangeHandler = (width, height) => {
    if (height - currentContentHeight > MIN_MESSAGE_HEIGHT && !userScrolled.current) {
      scrollToEnd({
        delay: DEFAULT_SCROLL_TO_END_DELAY
      });
    }
    setCurrentContentHeight(height);
  };
  return {
    onScrollEndDrag,
    onContentSizeChangeHandler
  };
}
//# sourceMappingURL=useAutoScroll.js.map