AutoScroll stops when clicked and scrolled the entire screen vertically

[suhask-iprogrammer]

I have a horizontal carousal at the bottom of my screen and when I scroll the screen vertically by holding the click on the carousal autoscroll stops and when I scroll the carousal manually the carousal again starts autoscrolling.

Need to solution for this.

[ZeroPie]

Can reproduce: Seems it happens when the carousel is inside a ScrollView. I am not sure what exactly is triggering it, try scrolling upwards and downwards repeatedly and tapping on the items and at some point it will stop autplaying https://snack.expo.io/@alejkun/snap-bug

[ZeroPie]

Anyways! A solution for reliable autplay after user Interactions: Don't use autoplay and snapToNext programmatically:

const carouselRef = useRef(null);

  useEffect(() => {
    const interval = setInterval(() => {
      carouselRef?.current?.snapToNext();
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  <Carousel
          ref={carouselRef}
          data={data}
          renderItem={renderNewsStage}
          itemWidth={deviceWidth}
          sliderWidth={deviceWidth}
          onSnapToItem={(index) => setCarouselCurrentIndex(index)}
          enableMomentum={false}
          lockScrollWhileSnapping
          loop
        />

[suhask-iprogrammer]

@ZeroPie this solved my problem...thanks :smiley:

[suhask-iprogrammer]

@ZeroPie in the above solution images are auto-scrolling while we are scrolling the images manually by swiping, due to which carousal seems to be flickering.... any solution to lock the scroll while snapping on this. How to pause interval while snapping manually.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2