Bottom Tab Navigation with Animation | React-Navigation v6/5 | Part-1

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ธ.ค. 2024

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

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

    Great content bro, really helpful for me, Thank you so much for the valuable content!

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

    This is a very good tutorial and very helpful for me

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

    adam adam, adamın dibi. eline sağlık bro. thx so much

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

    Bro, amazing work... Thank you so much!

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

      Enjoy, cheers!

  • @KhanhLe-bp1ri
    @KhanhLe-bp1ri 2 ปีที่แล้ว +1

    hey guy, thank you so much

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

    This video its awesome, thanks, here from brazil

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

    Awsm brother 💥

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

    Awesome work vishal, Very helpful.

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

    Showwww my friend, thank you very much, success for you and I'm already written, congratulations

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

      Thank you! Cheers!

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

    Great video and it was well explained... Thanks

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

    gracias desde Mexico

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

      Glad you like it!!

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

    Awesome work man

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

      Thanks a ton!

  • @ricardocalixto4472
    @ricardocalixto4472 ปีที่แล้ว +2

    Why do you prefer react native animatable instead of react native reanimated?
    Awesome video, thank you very much for the content. Keep going!

    • @vishalpwr
      @vishalpwr  ปีที่แล้ว +4

      Yeah, I have used animatable to make it easy.
      react native reanimated is also a good lib for animation. I have used in other tutorials.
      can check it out: th-cam.com/video/Bs4DQjWSkf0/w-d-xo.html
      thanks!

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

      I would recommend reanimated 3 because you can use a SharedValue and interpolate to adjust without the need for a useEffect hook, and it will run on the UI thread.

  • @kamalramadhan8503
    @kamalramadhan8503 3 ปีที่แล้ว +2

    This is awesome, but can u make animation using reanimated. I am using animatble to, but sometimes its lag.

    • @vishalpwr
      @vishalpwr  3 ปีที่แล้ว +2

      Yeah sure, I will try, btw animatable work out of the box.

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

    Marvelous. Could you please add typescript branch at repository?

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

      Sure, will update it.

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

    That's awesome 😍

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

      Glad you think so!😊

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

    Hi , thanks for your great videos , good job you are doing , I ve implemented your bottom tab nav animation , its working but there is an issue , when I am navigating from main / the parent screen to a child screen , the animation behavior remains there , how to unfocus the event when navigating to others screens ? Thank you

    • @vishalpwr
      @vishalpwr  2 ปีที่แล้ว

      Hi @Samran, Glad you like it.
      Give me some more details so I can figure out the issue,
      mean where is the parent and child navigation, or send navigation code here.

    • @17U55IF3R
      @17U55IF3R 2 ปีที่แล้ว

      I know it's been 4 months, but here is the answer for others who might face with same problem: You guys probably sent the focus parameter like this: tabBarIcon: ( focused ) => (........). You should've deconstruct the focused parameter like this tabBarIcon: ({ focused }) => (........). Else, your focus parameter will have all 3 usable tabBarIcon parameters (focused, size, color).

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

    Good video brother. How get icons

  • @MennaMohamed-zt2sv
    @MennaMohamed-zt2sv 3 ปีที่แล้ว +1

    Please make tab 2 ASAP
    Thank you

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

      Video Uploaded, checkout the playlist or tab1 description

  • @BenJamin-ei1xl
    @BenJamin-ei1xl 2 ปีที่แล้ว

    Great video, everything is working well but how do I solve the problem of when the app loads initially the bottom tab buttons (the circles) all render above the bottom tab and after a sec (or maybe less) they move down to their normal position

    • @vishalpwr
      @vishalpwr  2 ปีที่แล้ว +2

      For that you can initially hide bottom tab then after half a sec show it, and you can achieve this from navigation property.

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

    apart from good content you have hear, please provide the name of the soundtrack used; very motivational

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

      You can checkout the description, all the details below of description.

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

    it works on expo?

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

      Yes

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

    Bhai PLZZ make react native resso clone or telegram in hindi

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

    What is the background music

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

      Sunset n Beachz - Ofshane

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

    Please Help screen ki background ka color kaise change kara

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

      Bro I have provided the code, you can check the Github repo.

  • @BenJamin-ei1xl
    @BenJamin-ei1xl 2 ปีที่แล้ว +2

    You skipped alot of important steps that would make newbies stuck.
    You should have started with a new fresh project

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

      Will do so!

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

    Bro, how do we implement dynamic icons inside bottom tabs based on API response.Any help !

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

      Just replace that static TabArr with dynamic array or construct one with your api response.

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

    bro close this song please

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

    Please give me color screen.js and icons file source code

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

      github.com/vishalpwr/react-native-ui/blob/master/src/screens/ColorScreen.js
      BTW you can check the description and get the source code link from it.

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

    i am unable to change icons , i see only question marks

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

      For that you need to add icon config in your app/build.gradle file in case of android and for ios need to add them in info.plist file or in resources/bundle resources.
      Checkout the vector icons configuration doc you will find the solution.

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

    where is the code??

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

      Here it is -> github.com/vishalpwr/react-native-ui/tree/master/src/bottomTab