This custom react native hook detects when a ScrollView reaches the end of its scroll so you can do stuff like infinite scroll and what not

useDetectScrollEnd.tsx

import { useCallback, useState } from "react";
import { NativeScrollEvent, NativeSyntheticEvent } from "react-native";

interface UseDetectScrollEndProps {
    onEndReached: () => void;
    offset?: number;
}

const useDetectScrollEnd = ({
    onEndReached,
    offset = 20,
}: UseDetectScrollEndProps) => {
    const [isEndReached, setIsEndReached] = useState(false);

    const onScroll = useCallback(
        (event: NativeSyntheticEvent<NativeScrollEvent>) => {
            const { nativeEvent } = event;
            const { layoutMeasurement, contentOffset, contentSize } =
                nativeEvent;

            const isEnd =
                layoutMeasurement.height + contentOffset.y >=
                contentSize.height - offset;

            if (isEnd && !isEndReached) {
                setIsEndReached(true);
                onEndReached();
            } else if (!isEnd) {
                setIsEndReached(false);
            }
        },
        [isEndReached, onEndReached, offset]
    );

    return { onScroll };
};

export { useDetectScrollEnd };