Carousel does not swipe right when its gets to the 3 image it gets stuck

[MWaqasHussain-dev]

Un able to swipe right when i get to the third image on android... swipe right doesnot seems to work when i am on the third image... but swipe left seems to be working perfect on android and ios

Please help me out Thanks in advance

import { View, Text, TouchableOpacity, TextInput, ScrollView, SafeAreaView, Dimensions, Image, ImageBackground } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { appbaseThemeColor } from '../../contants';

const BannerCaroselSlider = () => {
    useEffect(() => {

    }, [])
    const

        [activeSlide, setActiveSlide] = useState(0),
        [bannerGridData, setBannerGridData] = useState([
            {

                image: require('../../assests/banner1.png'),


            },
            {

                image: require('../../assests/banner2.png'),


            },
            {

                image: require('../../assests/banner3.png'),


            },
            {

                image: require('../../assests/banner4.png'),
            }
        ]);
    function pagination() {
        // const { activeSlide } = activeSlide;
        return (
            <Pagination
                // activeOpacity={0.5}
                // animatedTension={0}
                // animatedFriction={0}
                // animatedDuration={10}

                dotsLength={bannerGridData.length}
                activeDotIndex={activeSlide}
                containerStyle={{
                    backgroundColor: 'rgba(0, 0, 0, 0.0)'
                }}
                dotStyle={{
                    width: 7,
                    height: 7,
                    borderRadius: 5,
                    marginVertical: 0,
                    backgroundColor: appbaseThemeColor
                }}
                inactiveDotStyle={{
                    width: 10,
                    height: 10,
                    borderRadius: 5,
                    backgroundColor: '#DEDEDE'
                }}
                inactiveDotOpacity={1}
                inactiveDotScale={0.6}

            />
        );
    }
    function _renderItem({ item, index }) {
        return (
            // <View key={index} style={{ width: "100%", aspectRatio: 2 / 1, borderWidth: 2, borderColor: "red" }} >
            //     <ImageBackground source={item.image} style={{ width: "100%", height: "100%", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 20 }} resizeMode="cover" resizeMethod="auto">

            //         {pagination()}

            //     </ImageBackground>
            // </View>

            <View key={index} style={{ flex: 1, borderWidth: 0, marginBottom: 20 }} >
                <ImageBackground source={item.image} style={{ aspectRatio: 1.1 / 0.5, flexDirection: "column", justifyContent: "flex-end", }} resizeMode="contain" resizeMethod="resize">

                    {pagination()}

                </ImageBackground>
            </View>
        )
    }
    return (
        <SafeAreaView style={{marginTop:-2}}>

            <Carousel
                sliderWidth={Dimensions.get('window').width}
                itemWidth={Dimensions.get('window').width}
                data={bannerGridData}
                renderItem={_renderItem}
                onSnapToItem={(index, animation = false) => setActiveSlide(index)}
                autoplay={true}
                autoplayDelay={2000}
                autoplayInterval={2000}
                loop={true}
                activeAnimationType="decay"
            />
            {/* {pagination()} */}
        </SafeAreaView>
    )
}
export default BannerCaroselSlider;

[thevijaysoni]

Getting same issue.

[mjdelb]

Same here. Any progress or work arounds on this?

[nawfalhaddi]

same here , any updates ?

[andrelfnavarro]

Same here. Getting this in some specific Android devices. Would appreciate some help...

[khoitruongg]

check this PR guys
#842

[andrelfnavarro]

@khoitruongg it keeps happening on some devices even when loop is not enabled. Any other tips?

[MWaqasHussain-dev]

For all dev use this library react-native-banner-carousel-updated for carousel is working fine for all android and ios devices .... I have used this library in my project its working fine thanks

…

On Fri, Oct 8, 2021 at 9:49 AM 赵東澔 ***@***.***> wrote: @MWaqasHussain-dev <https://github.com/MWaqasHussain-dev> Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel <https://github.com/zwh1666258377/react-native-reanimated-carousel> will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#840 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARFMSLBZXTPPLI3MWYJMJ3LUFZZ5RANCNFSM45YDRGCA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

-- *Waqas Hussain* *Associate Software Engineer at EXPERIA <http://experia.ai/>* Email : ***@***.*** Office : +923416744456 Phone : +923033195919 Meetings : https://calendly.com/waqas-hussain/30min http://experia.ai

[Apurvapimparkar]

This happens due to the property "loopClonesPerSide". By default the value of this property is 3 and when loop is enabled we face an issue where scroll gets stuck at 3rd image. If you try changing the number of this property, scroll gets stuck at that particular number image.
If you disable the loop; that should resolve this issue.

[BoBoooooo]

Getting same issue.