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

[hubertstruminski]

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 ?

[redvelvet-fan]

same issue

[Manju-lab]

same issue

[sxyshirly]

same issue any solutions?