AutoPlay stop after first slide

[tanmayR18]

Describe the bug
The normal layout carousel stops after the second slide. I have copied the exact code snippet from the docs. For your information, the carousel is in a component inside a vertical scrollview.

To Reproduce
Steps to reproduce the behavior:

import Carousel from "react-native-reanimated-carousel";
const defaultDataWith6Colors = [
	"#B0604D",
	"#899F9C",
	"#B3C680",
	"#5C6265",
	"#F5D399",
	"#F1F1F1",
];

function Index() {
	const scrollOffsetValue = useSharedValue(0);
 
	return (
		<View
			
		>
			<Carousel
				testID={"xxx"}
				loop={true}
				width={430}
				height={258}
				snapEnabled={true}
				pagingEnabled={true}
				autoPlayInterval={2000}
				data={defaultDataWith6Colors}
				defaultScrollOffsetValue={scrollOffsetValue}
				style={{ width: "100%" }}
				onScrollStart={() => {
					console.log("Scroll start");
				}}
				onScrollEnd={() => {
					console.log("Scroll end");
				}}
				onSnapToItem={(index: number) => console.log("current index:", index)}
				renderItem={({item, index}) => <View><Text>index no. {index}</Text></View>}
			/>
		</View>
	);
}
 
export default Index;

Expected behavior
The carousel should autoplay each slide and continue infinitely without any user interaction.

**Versions **

• "react": "18.3.1",
  -"react-native": "0.75.3",
• "react-native-reanimated": "^3.16.3",
• "react-native-reanimated-carousel": "^4.0.2",
• "react-native-gesture-handler": "^2.22.1",

Smartphone ]

• Device: Samsung Galaxy A12
• OS: Android 12

[dosubot]

Hello @tanmayR18! I'm here to assist you with any technical issues or questions you have. Let's work together to solve the problem you're encountering.

There is a similar open issue regarding the autoPlay feature not working as expected when the carousel is placed inside a ScrollView on Android. The suggested solution involves manually controlling the autoPlay feature based on the ScrollView's scroll activity. This can be done by pausing autoPlay when scrolling starts and resuming it once scrolling stops. You can achieve this by using onScrollStart and onScrollEnd handlers to manage the autoPlay state effectively ^[1].

Here's a brief example of how you might implement this:

const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({
  autoPlay: true,
  autoPlayInterval: 2000,
  carouselController,
});

const scrollViewGestureOnScrollStart = React.useCallback(() => {
  pauseAutoPlay();
  console.log("Scroll start");
}, [pauseAutoPlay]);

const scrollViewGestureOnScrollEnd = React.useCallback(() => {
  startAutoPlay();
  console.log("Scroll end");
}, [startAutoPlay]);

<Carousel
  loop={true}
  width={430}
  height={258}
  snapEnabled={true}
  pagingEnabled={true}
  autoPlayInterval={2000}
  data={defaultDataWith6Colors}
  defaultScrollOffsetValue={scrollOffsetValue}
  style={{ width: "100%" }}
  onScrollStart={scrollViewGestureOnScrollStart}
  onScrollEnd={scrollViewGestureOnScrollEnd}
  onSnapToItem={(index: number) => console.log("current index:", index)}
  renderItem={({ item, index }) => <View><Text>index no. {index}</Text></View>}
/>

This approach should help maintain the autoPlay functionality even when the carousel is inside a ScrollView.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}