After one full cycle, the next slide shows with opposite direction

Hello,

I have implemented Carousel autoplay. After one full cycle (when every element in the array has been showed) the next slide starts animation from left to right instead of right to left. It looks like opposite direction, but only for one item.

Here is my code:

const carousel = [ { image: require('../../../../assets/icons/startScreen/Onboarding_01.gif'), id: 0, text: ${strings.slider.item1} }, { image: require('../../../../assets/icons/startScreen/Onboarding_02.gif'), id: 1, text: ${strings.slider.item2} }, { image: require('../../../../assets/icons/startScreen/Onboarding_03.gif'), id: 2, text: ${strings.slider.item3} }, { image: require('../../../../assets/icons/startScreen/Onboarding_04.gif'), id: 3, text: ${strings.slider.item4} }, ];

<Carousel ref={(e) => (sliderRef.current = e)} layout="default" data={carousel} sliderWidth={Dimensions.get('window').width} itemWidth={Dimensions.get('window').width} renderItem={renderItem} autoplay autoplayInterval={3000} loop />

const renderItem = ({ item }) => { return ( <ImageItem image={item.image} key={item.id} text={item.text} /> ); };

ImageItem component:

const ImageItem = ({ image, text }) => { return ( <View style={styles.videoPreview}> <View> <Image source={image} resizeMode="contain" style={styles.image} /> <View style={styles.textContainer}> <Text style={styles.text}>{text}</Text> </View> </View> </View> ); };

Does anyone know what can be cause this issue ?

Reproduce the issue with the provided Carousel data and autoplay, autoplayInterval, and loop props. Start by tracing the carousel's autoplay and loop transition logic; done means the first slide after a full cycle animates in the same direction as the other slides.