react-native-onboarding-swiper icon indicating copy to clipboard operation
react-native-onboarding-swiper copied to clipboard

Auto Scroll function

Open creativeoutlet-ranique opened this issue 1 year ago • 0 comments

I just wanted to share that an auto scroll Boolean property would be a great feature to include. It seems like a great way to improve user experience.

Currently this is how I have my auto scroller set, but its still kinda wonky.

` const onboardingRef = useRef(null); //reference to onboarding component const [currentIndex, setCurrentIndex] = useState(0); const [isUserInteracting, setIsUserInteracting] = useState(false); // Track manual swiping const totalSlides = 5;

useEffect(() => {

    const interval = setInterval(() => {
    if (!isUserInteracting && onboardingRef.current) {
        setCurrentIndex((prevIndex) => {
            const nextIndex = (prevIndex + 1) % totalSlides;
            onboardingRef.current.goToPage(nextIndex, true);
            return nextIndex;
        });
    }
}, 6000);

    return () => clearInterval(interval); // Clean up interval on component unmount
}, [isUserInteracting, currentIndex]);

// Handle manual page change (swipe interaction)
const handlePageChange = (index) => {
    setCurrentIndex(index);
    setIsUserInteracting(true); // Set flag when user interacts

    setTimeout(() => {
        setIsUserInteracting(false); //Allow autoscroling again after 2 seconds delay
    }, 2000);
}; 

`

Issues im having with this:

  1. If the user tries to swipe manually, it pulls them back to the previous page. Manually swiping creates scroll issue.
  2. It cycles back to the first page after reaching the end, but instead of flowing from eg. Page [3] -> Page [0], it flashes through the pages like Page [3] ->Page [2] -> Page [1] -> Page [0] which comes off as glitchy and poor ui

Definitely looking for suggestions on how to improve this scroller as well as sharing my interest in a built in auto scroller as part of this library, thank you.

creativeoutlet-ranique avatar Mar 18 '25 00:03 creativeoutlet-ranique