Let's Build a Swiggy Like Custom Carousel with Auto Scroll Auto Play in React Native 🔥

[@KiranChuttugulla-u6j]

Can you share this code bro

[@theawesomedev_]

will provide soon

[@theawesomedev_]

here is it
github.com/Prashantrajput11/custom-carousel

[@lalithchakradhar2510]

@@theawesomedev_ thank you so much bro❤. Your code made my life easy. The React Native snap carousel and reanimated carousel was not working for me on my local machine.

[@SolarSargodha]

exactly what i was looking for

[@electromorphous]

After doing scrollPosition / screenWidth I suggest doing Math.round(index), and then set the active index.

[@BirupakshaDey-we7st]

Thanks For suggestion

[@imedhamdaoui1107]

nice work Bro, You can use Math.round(index), make the indicator react befor the user ends the scroll of the image (exactly in the half on scrolling the image
)

[@dave_an]

So easy to understand, thanks bro❤

[@gauthamvijayan]

Awesome work!

[@SurajTopal-e6i]

Thank you brother, Working fine. 🤩🤩🤩🤩🤩😍😍😍😍😍😍😍

[@BirupakshaDey-we7st]

Good explanation

[@djshadow-i1u]

awsome bro'

[@okeypraisejunior7527]

God bless you!

[@theawesomedev_]

thank you 😊😇

[@ezekielakintunde4816]

Thank you bro

[@theawesomedev_]

most welcome 🤗

[@developerpranav]

I was looking for react, not react native, but beautiful work man!!

[@theawesomedev_]

glad you liked it

[@tsuryaprakashreddy2245]

awesome explanation

[@theawesomedev_]

Glad you liked it

[@fanziermuzic2087]

Thank you brother 🎉, it's working fine 💖

[@infernobot9188]

Thank you so much , works perfectly

[@theawesomedev_]

Glad it helped

[@deveshtembheker1315]

धन्यवाद गुरु ❤

[@Legend_UP61]

and es pr ek useMemo me bhi ek video bnaiye kyuki jo bahut sare api use honge es page pr to baar baar sb rerender hoga

[@АлишерРизабаев-ш8ж]

Thank you very much

[@theawesomedev_]

😇❤️💫

[@shipalanaships9583]

Thanks bro

[@ChakraofSoulA]

always i am getting this error "Invariant Violation: scrollToIndex out of range: requested index 11 is out of 0 to 2, js engine: hermes"

[@BukkyOdunsi]

Whats the clearInterval for?

[@ambikarajkumar5472]

Thanks for the code,
for android auto scrolling is working but it stops at the last image after that its not scrolling and in the dot indicator first dot only changing the color into green which means first image only mapping but for 2nd and 3rd image its not changing the color,
please let me know where to
correct it

[@theawesomedev_]

yes i noticed this too that it is not working for android but i have not figured the workaround out yet

[@shahamaNew-cy6mk]

useEffect(() => {
let interval = setInterval(() => {
if (activeIndex === carouselData.length - 1) {
flatListRef.current.scrollToIndex({
index: 0,
animated: true,
});
setActiveIndex(0); // Reset the active index to 0
} else {
flatListRef.current.scrollToIndex({
index: activeIndex + 1,
animated: true,
});
setActiveIndex((prevIndex) => prevIndex + 1);
}
}, 2000);
return () => clearInterval(interval);
}, [activeIndex]); this will solve

[@nqmgaming2004]

nice

[@theawesomedev_]

thank you 😊

[@Legend_UP61]

very very thanks sir, eske liye package download krna pdta tha ,but ek questiion hai mera , jaise apn like a tiktok scroll video bnate hai flatlist me to fast scroll krne pr multiple scroll ho jata hai , any solution ?

[@theawesomedev_]

have not tried bhai but will make a video on this as well! is par video jald hi 😇

[@Legend_UP61]

aur agar tik tok jaisa sroll bnana ho with full functionality to flatlist sahi rhega ya react-native-deck-swiper package

[@theawesomedev_]

depends apki preference kya hai , flatlist ka use karke aap sara control apne hath me le sakte to kaise bhi customise kar sakte ho V/S kisi external package ka use karke fast bna skte hi but control nhi raheta pura! at the end of the day ye ap par depend karta hai! baki you can try both

[@Legend_UP61]

@@theawesomedev_ thanks

[@TheKurtaaGuy]

Bhaiya aap continue video dalo

[@shankardakolia4912]

Sir I followed your video and created the project on IOS it works but in android auto scroll don't works and on manual scrolling only first image colour changes and the rest two doesn't

[@theawesomedev_]

Yes ! i just checked it out on android. Will soon find a fix and let you know. Thanks for pointing that out

[@shankardakolia4912]

@@theawesomedev_ Thanks sir

[@shahamaNew-cy6mk]

heres the fix useEffect(() => {
let interval = setInterval(() => {
if (activeIndex === carouselData.length - 1) {
flatListRef.current.scrollToIndex({
index: 0,
animated: true,
});
setActiveIndex(0); // Reset the active index to 0
} else {
flatListRef.current.scrollToIndex({
index: activeIndex + 1,
animated: true,
});
setActiveIndex((prevIndex) => prevIndex + 1);
}
}, 3000);
return () => clearInterval(interval);
}, [activeIndex]);

[@mujahidali8691]

@@theawesomedev_ Sir aap kabh fix karonge because auto scroll it works only on ios but not on android and on manual scrolling only first dot colour changes and the rest two doesn't

[@shahamaNew-cy6mk]

If the auto-scroll stops at the last image here's the fix useEffect(() => {
let interval = setInterval(() => {
if (activeIndex === carouselData.length - 1) {
flatListRef.current.scrollToIndex({
index: 0,
animated: true,
});
setActiveIndex(0); // Reset the active index to 0
} else {
flatListRef.current.scrollToIndex({
index: activeIndex + 1,
animated: true,
});
setActiveIndex((prevIndex) => prevIndex + 1);
}
}, 2000);
return () => clearInterval(interval);
}, [activeIndex]);

[@Raghunadh9]

Thank you so much bro, literally you saved my day 😊