Custom Animated Bottom TabBar in React Native with Expo Router | React Native for Beginners

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

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

  • @tomasmikenas1993
    @tomasmikenas1993 3 หลายเดือนก่อน +11

    Great video. Small recommendation: move "tabPositionX.value = withSpring(buttonWidth * index, { duration: 1500 });" out from onPress handler to the useEffect, like that: useEffect(() => {
    tabPositionX.value = withSpring(buttonWidth * state.index, { duration: 1500 });
    }, [state.index]); this will ensure correct highlight when index changes outside onPress, i.e. navigating to certain tab from deep link

    • @itzpradip
      @itzpradip  3 หลายเดือนก่อน

      Great suggestion. I'm sure it'll help others as it helped me also. Thanks

  • @cankatmert
    @cankatmert 4 วันที่ผ่านมา

    great tutorial!

    • @itzpradip
      @itzpradip  4 วันที่ผ่านมา

      Thank you! Cheers!

  • @gerryramosftw
    @gerryramosftw 3 หลายเดือนก่อน

    Awesome tutorial, really took it step by step and easy to follow

  • @TanquetaOwO
    @TanquetaOwO 5 หลายเดือนก่อน +1

    Really nice video, i liked the thing that you did it with Expo Router

  • @borges2200
    @borges2200 4 หลายเดือนก่อน

    Looks great, congrats!

  • @collinsk8754
    @collinsk8754 5 หลายเดือนก่อน

    Excellent and comprehensive tutorial! 🥳🥳

    • @itzpradip
      @itzpradip  5 หลายเดือนก่อน +1

      Glad you enjoyed it!

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

    well done mate , it is quite advance topic.

  • @zingsta8293
    @zingsta8293 5 หลายเดือนก่อน

    Perfect timing! I just started my first react native application and wanted to make the tab bar to look something like the one you made! Can you share the code, as well? :D

  • @ravisfarooq477
    @ravisfarooq477 2 หลายเดือนก่อน +3

    Is there any repo for the code?

  • @quamzgraphix9826
    @quamzgraphix9826 5 หลายเดือนก่อน

    great tutorial

    • @itzpradip
      @itzpradip  5 หลายเดือนก่อน

      Thanks!

  • @lunedamkingsway2276
    @lunedamkingsway2276 5 หลายเดือนก่อน

    Really good. Thankyou.

    • @itzpradip
      @itzpradip  5 หลายเดือนก่อน

      Glad you liked it!

    • @SACKO0731
      @SACKO0731 5 หลายเดือนก่อน

      @@itzpradip Sorry man , how do you select a longer and better quality video to upload in firebase, I get stuck when trying so, it keeps on waiting for media to be ready. Can you make a tutorial of how to achieve this?

    • @lunedamkingsway2276
      @lunedamkingsway2276 5 หลายเดือนก่อน

      @@itzpradip Is there any chance of sharing your code? Maybe a link to Github? That'd be great.

  • @vinitborad
    @vinitborad 4 หลายเดือนก่อน +3

    Please share code link.

  • @sureshdonthula9326
    @sureshdonthula9326 5 หลายเดือนก่อน +1

    when we press back in any tab, home tabbutton is missing

  • @mohammadkumail7508
    @mohammadkumail7508 5 หลายเดือนก่อน +1

    Can we get the source cod?

  • @millennia
    @millennia 5 หลายเดือนก่อน

    Amazing amazing amazing.

    • @itzpradip
      @itzpradip  5 หลายเดือนก่อน

      You're amazing!!

  • @CesarRiveraMiranda-k1x
    @CesarRiveraMiranda-k1x หลายเดือนก่อน

    The best

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

    TOP D+

  • @imomer
    @imomer 4 หลายเดือนก่อน

    If you go on another tab than the home and use back button. The animated background does not comes back

  • @lifeisjoy_spirit
    @lifeisjoy_spirit 5 หลายเดือนก่อน

    Awesome bro, can we get git hub link ??

  • @stevenf7474
    @stevenf7474 4 หลายเดือนก่อน

    Can't get it working on Expo 51. Has anyone managed to get it working?

  • @MrRayoux
    @MrRayoux 4 หลายเดือนก่อน

    Hello friend can you help me to fix somethings ?

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

    Can you provide the source code please

  • @WellActualllyyy
    @WellActualllyyy 5 หลายเดือนก่อน

    what a bummer. Followed everything and after the app crashed I got this:
    [Layout children]: No route named "(tabs)" exists in nested children: ["_sitemap", "+not-found", "(tabs)/explore", "(tabs)/index", "(tabs)/layout", "(tabs)/profile"]
    file structure is correct and cache is cleared

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

    Hi, Can you please provide the source code ?

  • @gvkruz
    @gvkruz 4 หลายเดือนก่อน

    Não consigo entender, fez muito rapido

  • @happyhappy-xd7rx
    @happyhappy-xd7rx 3 หลายเดือนก่อน

    Dada mobile screen এর ব্যাপারটা কম্পিউটার ডাউনলোড হচ্ছে না

  • @AbrarAhmed-d1r
    @AbrarAhmed-d1r 5 หลายเดือนก่อน

    Bro make a same tutorial in flutter❤

    • @itzpradip
      @itzpradip  5 หลายเดือนก่อน

      Sure 😊

  • @hamzaessridi7557
    @hamzaessridi7557 2 หลายเดือนก่อน

    Can you give me the source code?

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

    bro, knowing is one thing, teaching is another. you are too fast with everything. Go slow, try to make people understand what you are doing. Feels like you are doing some kind of duty and trying to somehow finish your turorial and go home.

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

      Yeah, exactly