react-native-ui-lib/src/commons/withScrollEnabler.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';
import forwardRef from "./forwardRef";
import hoistStatics from 'hoist-non-react-statics';

function withScrollEnabler(WrappedComponent) {
  const ScrollEnabler = props => {
    const [scrollEnabled, setScrollEnabled] = useState(true);
    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 = props.horizontal ? contentWidth : contentHeight;

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

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

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

        if (contentSize.current > 0) {
          checkScroll();
        }
      }
    }, [props.horizontal, checkScroll]);
    return <WrappedComponent {...props} scrollEnablerProps={{
      onLayout,
      scrollEnabled,
      onContentSizeChange
    }} ref={props.forwardedRef} />;
  };

  hoistStatics(ScrollEnabler, WrappedComponent);
  ScrollEnabler.displayName = WrappedComponent.displayName; //@ts-ignore

  ScrollEnabler.propTypes = WrappedComponent.propTypes; //@ts-ignore

  ScrollEnabler.defaultProps = WrappedComponent.defaultProps;
  return forwardRef(ScrollEnabler);
}

export default withScrollEnabler;