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

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ม.ค. 2025

ความคิดเห็น • 51

  • @KiranChuttugulla-u6j
    @KiranChuttugulla-u6j ปีที่แล้ว +3

    Can you share this code bro

    • @theawesomedev_
      @theawesomedev_  ปีที่แล้ว

      will provide soon

    • @theawesomedev_
      @theawesomedev_  ปีที่แล้ว +8

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

    • @lalithchakradhar2510
      @lalithchakradhar2510 7 หลายเดือนก่อน

      @@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.

  • @yashvardhantomar758
    @yashvardhantomar758 วันที่ผ่านมา

    Plain. Simple. To the point. I like it.....good stuff 👍

  • @electromorphous
    @electromorphous ปีที่แล้ว +6

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

  • @SolarSargodha
    @SolarSargodha 2 หลายเดือนก่อน +1

    exactly what i was looking for

  • @imedhamdaoui1107
    @imedhamdaoui1107 7 หลายเดือนก่อน +3

    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
    )

  • @djshadow-i1u
    @djshadow-i1u 2 หลายเดือนก่อน +1

    awsome bro'

  • @ezekielakintunde4816
    @ezekielakintunde4816 9 หลายเดือนก่อน +1

    Thank you bro

  • @dave_an
    @dave_an 7 หลายเดือนก่อน

    So easy to understand, thanks bro❤

  • @gauthamvijayan
    @gauthamvijayan 6 หลายเดือนก่อน

    Awesome work!

  • @SurajTopal-e6i
    @SurajTopal-e6i ปีที่แล้ว +1

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

  • @developerpranav
    @developerpranav ปีที่แล้ว

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

  • @BirupakshaDey-we7st
    @BirupakshaDey-we7st 7 หลายเดือนก่อน +1

    Good explanation

  • @tsuryaprakashreddy2245
    @tsuryaprakashreddy2245 8 หลายเดือนก่อน

    awesome explanation

  • @okeypraisejunior7527
    @okeypraisejunior7527 7 หลายเดือนก่อน +1

    God bless you!

  • @infernobot9188
    @infernobot9188 ปีที่แล้ว

    Thank you so much , works perfectly

  • @fanziermuzic2087
    @fanziermuzic2087 ปีที่แล้ว

    Thank you brother 🎉, it's working fine 💖

  • @deveshtembheker1315
    @deveshtembheker1315 9 หลายเดือนก่อน

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

  • @АлишерРизабаев-ш8ж
    @АлишерРизабаев-ш8ж ปีที่แล้ว

    Thank you very much

  • @shipalanaships9583
    @shipalanaships9583 10 หลายเดือนก่อน

    Thanks bro

  • @ChakraofSoulA
    @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
    @BukkyOdunsi 9 หลายเดือนก่อน

    Whats the clearInterval for?

  • @ambikarajkumar5472
    @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_
      @theawesomedev_  ปีที่แล้ว

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

    • @shahamaNew-cy6mk
      @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

  • @Legend_UP61
    @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

  • @nqmgaming2004
    @nqmgaming2004 9 หลายเดือนก่อน

    nice

  • @Legend_UP61
    @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_
      @theawesomedev_  ปีที่แล้ว +1

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

  • @shankardakolia4912
    @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_
      @theawesomedev_  ปีที่แล้ว

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

    • @shankardakolia4912
      @shankardakolia4912 ปีที่แล้ว

      @@theawesomedev_ Thanks sir

    • @shahamaNew-cy6mk
      @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
      @mujahidali8691 5 หลายเดือนก่อน

      @@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

  • @Legend_UP61
    @Legend_UP61 ปีที่แล้ว

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

    • @theawesomedev_
      @theawesomedev_  ปีที่แล้ว +1

      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
      @Legend_UP61 ปีที่แล้ว

      @@theawesomedev_ thanks

    • @TheKurtaaGuy
      @TheKurtaaGuy 9 หลายเดือนก่อน

      Bhaiya aap continue video dalo

  • @shahamaNew-cy6mk
    @shahamaNew-cy6mk ปีที่แล้ว +3

    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
      @Raghunadh9 8 หลายเดือนก่อน

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