react-native-reanimated-carousel/src/hooks/useAutoPlay.ts

Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.

import * as React from "react";

import type { ICarouselController } from "./useCarouselController";

export function useAutoPlay(opts: {
  autoPlay?: boolean;
  autoPlayInterval?: number;
  autoPlayReverse?: boolean;
  carouselController: ICarouselController;
}) {
  const { autoPlay = false, autoPlayReverse = false, autoPlayInterval, carouselController } = opts;

  const { prev, next } = carouselController;
  const timer = React.useRef<ReturnType<typeof setTimeout>>();
  const stopped = React.useRef<boolean>(!autoPlay);

  const play = React.useCallback(() => {
    if (stopped.current) return;

    timer.current && clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      autoPlayReverse ? prev({ onFinished: play }) : next({ onFinished: play });
    }, autoPlayInterval);
  }, [autoPlayReverse, autoPlayInterval, prev, next]);

  const pause = React.useCallback(() => {
    if (!autoPlay) return;

    timer.current && clearTimeout(timer.current);
    stopped.current = true;
  }, [autoPlay]);

  const start = React.useCallback(() => {
    if (!autoPlay) return;

    stopped.current = false;
    play();
  }, [play, autoPlay]);

  React.useEffect(() => {
    if (autoPlay) start();
    else pause();

    return pause;
  }, [pause, start, autoPlay]);

  return {
    pause,
    start,
  };
}