react-native-ui-lib/src/hooks/useScrollReached/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 } from 'react';
import { Constants } from "../../commons/new";
const DEFAULT_THRESHOLD = Constants.isAndroid ? 1 : 0;

const useScrollReached = (props = {}) => {
  const {
    horizontal = false,
    threshold = DEFAULT_THRESHOLD
  } = props;
  const [isScrollAtStart, setScrollAtStart] = useState(true);
  const [isScrollAtEnd, setScrollAtEnd] = useState(false);
  const onScroll = useCallback(event => {
    const {
      nativeEvent: {
        layoutMeasurement: {
          width: layoutWidth,
          height: layoutHeight
        },
        contentOffset: {
          x: offsetX,
          y: offsetY
        },
        contentSize: {
          width: contentWidth,
          height: contentHeight
        }
      }
    } = event;
    const layoutSize = horizontal ? layoutWidth : layoutHeight;
    let offset = horizontal ? offsetX : offsetY;
    const contentSize = horizontal ? contentWidth : contentHeight;

    if (horizontal && Constants.isRTL && Constants.isAndroid) {
      const scrollingWidth = Math.max(0, contentSize - layoutSize);
      offset = scrollingWidth - offset;
    }

    const closeToStart = offset <= threshold;

    if (closeToStart !== isScrollAtStart) {
      setScrollAtStart(closeToStart);
    }

    const closeToEnd = layoutSize + offset >= contentSize - threshold;

    if (closeToEnd !== isScrollAtEnd) {
      setScrollAtEnd(closeToEnd);
    }
  }, [horizontal, threshold, isScrollAtStart, isScrollAtEnd]);
  return {
    onScroll,
    isScrollAtStart,
    isScrollAtEnd
  };
};

export default useScrollReached;