diff --git a/.changeset/cyan-snails-move.md b/.changeset/cyan-snails-move.md new file mode 100644 index 00000000..8f0ee636 --- /dev/null +++ b/.changeset/cyan-snails-move.md @@ -0,0 +1,5 @@ +--- +"react-native-reanimated-carousel": patch +--- + +revert autoPlay changes diff --git a/src/hooks/useAutoPlay.ts b/src/hooks/useAutoPlay.ts index 0799ad75..64ef1d78 100644 --- a/src/hooks/useAutoPlay.ts +++ b/src/hooks/useAutoPlay.ts @@ -16,37 +16,26 @@ export function useAutoPlay(opts: { } = opts; const { prev, next } = carouselController; - const lastTimestampRef = React.useRef(null); + const timer = React.useRef>(); const stopped = React.useRef(!autoPlay); const play = React.useCallback(() => { if (stopped.current) return; - const currentTimestamp = Date.now(); - - if (lastTimestampRef.current) { - const elapsed = currentTimestamp - lastTimestampRef.current; - - if (elapsed >= (autoPlayInterval ?? 1000)) { - autoPlayReverse - ? prev({ onFinished: play }) - : next({ onFinished: play }); - lastTimestampRef.current = currentTimestamp; - } - } - else { - lastTimestampRef.current = currentTimestamp; - } - - requestAnimationFrame(play); + 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; - lastTimestampRef.current = null; + timer.current && clearTimeout(timer.current); stopped.current = true; }, [autoPlay]); @@ -55,8 +44,7 @@ export function useAutoPlay(opts: { return; stopped.current = false; - lastTimestampRef.current = Date.now(); - requestAnimationFrame(play); + play(); }, [play, autoPlay]); React.useEffect(() => { @@ -65,10 +53,7 @@ export function useAutoPlay(opts: { else pause(); - return () => { - lastTimestampRef.current = null; - stopped.current = true; - }; + return pause; }, [pause, start, autoPlay]); return {