@applicaster/zapp-react-native-utils/reactHooks/events/index.ts

Applicaster Zapp React Native utilities package

import * as React from "react";
import { scrollEndReached$ } from "@applicaster/zapp-react-native-ui-components/events";
import { filter } from "rxjs/operators";

/**
 * Subscribe to scroll-end-reached and call loadNextData only when this item is last in the river.
 * Use in Grid/List so they load next page when the user scrolls to the end (river or tabs scroll container).
 */
export function useScrollEndReachedLoadNext(
  isLast: boolean,
  loadNextData: () => void
): void {
  React.useEffect(() => {
    const sub = scrollEndReached$.pipe(filter(() => isLast)).subscribe(() => {
      loadNextData();
    });

    return () => sub.unsubscribe();
  }, [isLast, loadNextData]);
}