autoPlay Animation is not working

[pandaCure]

ios: 17.5.1 react-native-reanimated-carousel:3.5.1 react-native-gesture-handler: 2.16.2 react-native-reanimated: 3.12.0

import * as React from 'react';
import { Dimensions, Text, View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

function Index() {
    const width = Dimensions.get('window').width;
    return (
        <View style={{ flex: 1 }}>
            <Carousel
                loop
                width={width}
                height={width / 2}
                autoPlay={true}
                data={[...new Array(6).keys()]}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => console.log('current index:', index)}
                renderItem={({ index }) => (
                    <View
                        style={{
                            flex: 1,
                            borderWidth: 1,
                            justifyContent: 'center',
                        }}
                    >
                        <Text style={{ textAlign: 'center', fontSize: 30, color: 'white' }}>
                            {index}
                        </Text>
                    </View>
                )}
            />
        </View>
    );
}

export default Index;

[dosubot[bot]]

Hey there, @pandaCure! I'm here to help you with any bugs, questions, or contributions you have regarding the repository. Feel free to ask me anything while waiting for a human maintainer.

The issue with the autoPlay animation not working might be due to the autoPlayInterval property not being set. You can resolve this by adding the autoPlayInterval property to your Carousel component. Here is the updated code snippet:

import * as React from 'react';
import { Dimensions, Text, View } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

function Index() {
    const width = Dimensions.get('window').width;
    return (
        <View style={{ flex: 1 }}>
            <Carousel
                loop
                width={width}
                height={width / 2}
                autoPlay={true}
                autoPlayInterval={2000} // Set the autoPlayInterval to 2000ms (2 seconds)
                data={[...new Array(6).keys()]}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => console.log('current index:', index)}
                renderItem={({ index }) => (
                    <View
                        style={{
                            flex: 1,
                            borderWidth: 1,
                            justifyContent: 'center',
                        }}
                    >
                        <Text style={{ textAlign: 'center', fontSize: 30, color: 'white' }}>
                            {index}
                        </Text>
                    </View>
                )}
            />
        </View>
    );
}

export default Index;

By adding the autoPlayInterval property, the carousel should now automatically play as expected ^[1].

To continue talking to Dosu, mention @dosu.

[pandaCure]

@dohooo @dosu

[dosubot[bot]]

@ghost, this seems to be a bit tricky, could you step in and provide your expertise?

To continue talking to Dosu, mention @dosu.

[itsashis4u]

@dohooo Same thing happening for us. Although we are at v4.0.0-alpha.12. It stopped working without any code changes

[pantomath91]

@dohooo we are using below lib versions "react-native-reanimated": "^3.6.1", "react-native-reanimated-carousel": "4.0.0-alpha.0", "react-native-gesture-handler": "^2.12.0", It also stopped working for us