react-native-ui-lib/src/hooks/useScrollEnabler/index.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import React, { useState, useCallback, useRef } from 'react';

const useScrollEnabler = (props = {}) => {
  const {
    horizontal = false
  } = props;
  const [scrollEnabled, setScrollEnabled] = useState(false);
  const contentSize = useRef(0);
  const layoutSize = useRef(0);
  const checkScroll = useCallback(() => {
    const isScrollEnabled = contentSize.current > layoutSize.current;

    if (isScrollEnabled !== scrollEnabled) {
      setScrollEnabled(isScrollEnabled);
    }
  }, [scrollEnabled]);
  const onContentSizeChange = useCallback((contentWidth, contentHeight) => {
    const size = horizontal ? contentWidth : contentHeight;

    if (size !== contentSize.current) {
      contentSize.current = size;

      if (layoutSize.current > 0) {
        checkScroll();
      }
    }
  }, [horizontal, checkScroll]);
  const onLayout = useCallback(event => {
    const {
      nativeEvent: {
        layout: {
          width,
          height
        }
      }
    } = event;
    const size = horizontal ? width : height;

    if (size !== layoutSize.current) {
      layoutSize.current = size;

      if (contentSize.current > 0) {
        checkScroll();
      }
    }
  }, [horizontal, checkScroll]);
  return {
    onContentSizeChange,
    onLayout,
    scrollEnabled
  };
};

export default useScrollEnabler;