Advanced React Native FlatList animations with Animated API

Поделиться
HTML-код
  • Опубликовано: 1 ноя 2024

Комментарии • 160

  • @pcgs_
    @pcgs_ 4 года назад +53

    Catalin, you really need to create a course about react native animations !! I'll be the first to buy it!
    Amazing tutorial!!

    • @666thales666
      @666thales666 4 года назад +1

      I'll be the second

    • @elvargas1327
      @elvargas1327 4 года назад

      Good idea!

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +8

      Good idea and maybe one day I'll be able to make it happen! Thank you Pedro, it means a lot to me!

    • @joshreynolds4164
      @joshreynolds4164 4 года назад

      @@CatalinMironDev Get on this! Would be a great idea

    • @oscar_cornejo
      @oscar_cornejo 4 года назад +1

      Pagaría por ello! 💪🏼💪🏼

  • @yanndjoumessi7130
    @yanndjoumessi7130 2 года назад +1

    I didn't know that all those dribbble stuffs were actually implementable. I'm still amazed by you teaching style

  • @haacki4720
    @haacki4720 Год назад

    DUDE!!! Thank you so much! I've stuck with this problem for a long time when need scale element depending on scroll position. But you help so much!

  • @hwj8640
    @hwj8640 2 года назад

    You are the guy that reveal the magic of RN animation! Thank you very much, now I know how these wonderful animations work.

  • @dndeveloper
    @dndeveloper 4 года назад +1

    We are in support with you, Your content is really awesome and appreciated.......

  • @vincentjezequel71
    @vincentjezequel71 4 года назад +1

    Thanks for this great video ! I haven't yet really got to play with animations, but you explain it very well. Already got an idea, can't wait to try it out !

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Amazing Vicent! Please share it with us after you have it ready. Let me know if you need any help! Cheers!

  • @Reactiive
    @Reactiive 3 года назад

    This video was so helpful for me some time ago. Recently I created a video applying the same concept but using Reanimated 2

  • @mirzairshad4063
    @mirzairshad4063 4 года назад

    You are one of my favorite and awesome tutor on RUclips

  • @shivakumars5144
    @shivakumars5144 4 года назад

    Thanks Catalin! Some animation hints were helpful for my app's animation!!

  • @ade-joshe
    @ade-joshe 4 года назад

    Always admired your shared work on twitter. seeing you here gives me joy! SUBSCRIBED!

  • @khalidkhan5308
    @khalidkhan5308 4 года назад +1

    I am not going to miss any of your videos -

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Is this good or bad? Because I want you to watch my videos. Please let me know what can I improve. Thanks Khalid ✌️

    • @khalidkhan5308
      @khalidkhan5308 4 года назад

      @@CatalinMironDev This is just too awesome stuff - I am learning every day from your tutorials.

  • @FunwithIndra
    @FunwithIndra 2 года назад

    Wonderful tutorial.. Please keep posting

  • @RaviKiranMakala
    @RaviKiranMakala 4 года назад

    This is really simple and awesome bro. Learned new things today. I love this video ❤️.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Thank you Ravi! I am glad that found it easy to follow and learned something new!

  • @furqanahmad2670
    @furqanahmad2670 4 года назад

    thanks, dude for creating this video, I am new to React Native and was looking for a way to develop a carousel for a project I am working on.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Glad I could help! Don't forget to share it with us after you're done working on it. Thanks Furqan!

  • @MarcoScapelitte
    @MarcoScapelitte 3 года назад

    Dude, you're incredible. Thanks for sharing your immense knowledge.

  • @MohamedSaeed-hi9vi
    @MohamedSaeed-hi9vi 4 года назад

    i like how you make it so simple, great tutorial

  • @yashaskirito
    @yashaskirito 3 года назад

    This is reallllllllllly damn good!!! Please make a complete tutorial!!!!

  • @RafaleKilleR
    @RafaleKilleR 4 года назад

    Your tutorials are awesome man! Keep up the good work :)

  • @khanhduy3364
    @khanhduy3364 4 года назад

    I come here for learning animation, thank you very much

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      I’m glad you learned something. Thanks Duy ✌️

  • @oguzhanturker8903
    @oguzhanturker8903 4 года назад

    Tutorials are above being amazing. Theyare amazing++.

  • @MutluAtbatiran
    @MutluAtbatiran 2 года назад

    Good content! Amazing instructor! 👏👏👏

  • @PierreTeyssedre
    @PierreTeyssedre 4 года назад

    Very cool tutorial! Thanks for sharing it!!!

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Thank you Pierre, I’m glad that you enjoyed it!

  • @nelyousfi
    @nelyousfi 4 года назад

    Amazing, u make things look so simple.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Thanks Naoufal! I’m glad you enjoyed it!
      ✌️

  • @619dixitrock
    @619dixitrock 3 года назад

    Learning awesome things from you everyday. Thanks for creating awesome content like this!!😄

    • @CatalinMironDev
      @CatalinMironDev  3 года назад +1

      I’m glad to hear this! Thanks Dixit ✌️

    • @619dixitrock
      @619dixitrock 3 года назад

      @@CatalinMironDev Would really love to buy your course on react animation if you create one without second thought. You can publish your course on Udemy or any other platforms and would definitely love to pay n learn for the quality of content you provide.

  • @necmettinsargn3934
    @necmettinsargn3934 4 года назад

    Thanks. I was struggling with reanimated api because it was flickering at first frame with FlatList onScroll animation. Changed it to animated Api works great. Just have to change height animation to transform animaton bc of useNativeDriver

  • @vitorrazdorov6017
    @vitorrazdorov6017 4 года назад

    Thanks for you lessons, and work!

  • @westfield90
    @westfield90 4 года назад

    Best channel I’ve found in a long time

  • @pedroluis4004
    @pedroluis4004 4 года назад +3

    Maaaan you're amazing, create a course about animations in React Native !!!

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Thanks for the idea and I'm working on it. Thanks Pedro!

  • @njegospetrovic4458
    @njegospetrovic4458 3 года назад

    Extremely good content! Keep it up!

  • @egyptsphinx9393
    @egyptsphinx9393 4 года назад

    Mindblowing as usual 😍😍

  • @nishadpatil9886
    @nishadpatil9886 4 года назад

    Great Video , Really Helpful

  • @cayetanorosales4784
    @cayetanorosales4784 4 года назад

    Hey thank you!! this video is amazing!!

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Thank you Cayetano, I am glad that you liked it! ✌️

  • @hitechfocus
    @hitechfocus 3 года назад

    Great video, Thanks

  • @rohaanansari3116
    @rohaanansari3116 4 года назад

    Hello Catlin ,
    I have a Query please tell me
    Why have you taken this value
    const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
    in Item and
    this value
    const inputRange = [-width, 0, width];
    in other places
    I'm really confused
    please help me out !!

  • @AliHassan-yc2tc
    @AliHassan-yc2tc 4 года назад

    Amazing content, Thank You

  • @ogulcankarayel5625
    @ogulcankarayel5625 4 года назад +1

    Thanks for video . I have a question . Why are you using like this const scrollX = React.useRef(new Animated.Value(0)).current instead of const scrollX = new Animated.Value(0); ?

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      The reason is that useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).
      The returned object will persist for the full lifetime of the component. (reactjs.org/docs/hooks-reference.html)
      Thanks ✌️

    • @ogulcankarayel5625
      @ogulcankarayel5625 4 года назад

      @@CatalinMironDev Thanks

  • @MateoHrastnik
    @MateoHrastnik 4 года назад

    Amazing content! You're a great tutor.

  • @haritssyah7434
    @haritssyah7434 4 года назад

    amazing!

  • @choresportal3865
    @choresportal3865 4 года назад +1

    you are doing great work my brother. but there is one issue , can you explain more or tell more how we handle the pagination bottom circle . because when i increase the number of items the circles also increase and it did not fit on the right bottoms it expands.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      In this tutorial I am just showing how to create the animations, nothing more. If you'd like I can tackle this into a separate video, where we a dynamic pagination that support a variable range. Thanks for the feedback Chores ✌️

    • @muhammadalihassan2157
      @muhammadalihassan2157 4 года назад

      @@CatalinMironDev brother you are doing great work. weldone but i suggest please make pagination dynamic

    • @muhammadalihassan2157
      @muhammadalihassan2157 4 года назад

      online.fliphtml5.com/vfrai/ysms/#p=1
      Like this way?

  • @umaralfaruq1304
    @umaralfaruq1304 3 года назад

    AWESOME. im waiting for show hide header like Whatsapp with header and top tab

  • @x-a-m-s-a
    @x-a-m-s-a 4 года назад

    Thanks for this great tutorial. How can we change indicator color based on the color property from the data array? As I know borderColor isn't supported by Animated API, any ideas?

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Unfortunately as you mentioned this is not supported by nativeDriver, so you need to make it false ‘useNativeDriver: false’ and based on scrollX position you can interpolate colors. Thanks Leri, Cheers ✌️

    • @x-a-m-s-a
      @x-a-m-s-a 4 года назад

      Will the animation be smooth without nativeDriver?

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Just test it out. There are some benefits on using the nativeDriver but you can create another animated value that will not use nativeDriver and use it for color interpolation.

  • @fanzana8750
    @fanzana8750 4 года назад

    Great job 👍

  • @samidebayroune3478
    @samidebayroune3478 2 года назад

    you should make a course about RN animation

  • @yusufbashir4436
    @yusufbashir4436 11 месяцев назад

    Fantastic

  • @oscar_cornejo
    @oscar_cornejo 4 года назад +1

    👏🏼👏🏼

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Thanks Oscar, I’m glad that it helped you!

  • @nikhil73nainta
    @nikhil73nainta 4 года назад

    Great catalin

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Thanks a lot Nikhil, I'm glad you liked it! ✌️

    • @nikhil73nainta
      @nikhil73nainta 4 года назад

      @@CatalinMironDev iam also a full stack developer very informative videos you are publishing.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Nikhil Nainta I am glad that this is helping you, no matter what level you are. Thanks a lot for taking your time to check my videos ✌️

  • @РасулМалачиев-у8у
    @РасулМалачиев-у8у 3 года назад

    Спасибо!

  • @techienomadiso8970
    @techienomadiso8970 3 года назад

    Legend!

  • @sja1n
    @sja1n 4 года назад

    great video

  • @programmersohel
    @programmersohel 9 месяцев назад

    Great!

  • @johnphiliplimpahan3115
    @johnphiliplimpahan3115 4 года назад

    LMAO Just uploaded right now. I've been trying to find tutorials like this earlier. Thanks man!

  • @chlbri
    @chlbri 3 года назад

    Beautifull

  • @Muzly
    @Muzly 2 года назад

    Whenever I use the native driver, scrollX is never updated (remains at 0). When I set the native driver to false, the scrollX value becomes a very odd decimal number that changes every time I change slides (meaning a different number when I visit the same slide, for example the first slide starts at 0 but will then be 194.2422222 when I go back to it.).
    Does anyone know how I can overcome this issue?

  • @danielnovacik4924
    @danielnovacik4924 4 года назад

    Just gotta figure an app to use it. Awesome work mate!

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Thanks Daniel! In case you figure it out where to use it, please share the app with me, I’d love to see it in action.
      ✌️

  • @yasirnajeep
    @yasirnajeep 4 года назад

    I Love the 🌵 in the background

  • @rapidreasearchyt
    @rapidreasearchyt 10 месяцев назад

    cant we do the same thing in react native cli, i mean not in expo?

  • @rizaldi4563
    @rizaldi4563 4 года назад +1

    Amazing tutorial! thankyou so much. I hope you make a Udemy course with bunch of animated case study :D

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +3

      I'm working on creating a course about animations. I'll let you know once this is finished. Thanks a lot Rizaldi ✌️

  • @ImVuCms
    @ImVuCms 4 года назад

    Thanks so much ^^

  • @mohsensoleimani6120
    @mohsensoleimani6120 4 года назад

    Thank you . Its amazing to learn these stuffs so simple .
    I tried to implement the instagram multi picture pagination indicator but i don’t know how to set the inputs range and output range . Can you provide an example for me ?

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      I can do it, could you please share any animation or a link to the animation itself? I'm not using Instagram unfortunately so I don't know about what animations we're talking about :)
      Thanks a lot!

    • @mohsensoleimani6120
      @mohsensoleimani6120 4 года назад +1

      @@CatalinMironDev i just find this example patricktran.github.io/react-magic-slider-dots/

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Mohsen Soleimani I can do it:) I’ll add it to my list for future video tutorials. Thanks for sharing it with me!

    • @mohsensoleimani6120
      @mohsensoleimani6120 4 года назад

      @@CatalinMironDev How can I ever thank you enough. people like you are not easy to find.

  • @barklegneeshetu8048
    @barklegneeshetu8048 3 года назад

    You my brother are a LEGEND! Also highly underrated

  • @arwysyah2400
    @arwysyah2400 4 года назад

    Hi Catalin i was wondering , can React Native hide bottom navigation when scroll? I think header not to be hard , but i dont know how to implement hide bottom navigation when scrolling, hope you get the answer

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      I think it is possible, I have to try it tho but the immediate answer is yes:) thanks Kenzo

    • @arwysyah2400
      @arwysyah2400 4 года назад

      Thank you so much, hope you want to create a spcial video about it later . 👍

  • @cptpackage
    @cptpackage 4 года назад

    Great video man, but I would recommend if you add a low background lo-fi music as the throat snapping when you are talking is sometimes annoying.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Thanks for the tip! Do you know at what volume should have the background music to avoid any issues?

    • @cptpackage
      @cptpackage 4 года назад

      @@CatalinMironDev Well anything lo-fi so it won't distract the viewers and at the same time it will make the long videos more entertaining.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Cpt Package that’s a great suggestion. I’ll try to apply it on my next video. Please share your feedback afterwards. Thanks a lot ✌️

  • @farzam-ng6hi
    @farzam-ng6hi 3 года назад

    greate animating view big brain guy

  • @kyvo-z6o
    @kyvo-z6o Год назад

    My idol

  • @audunhilden
    @audunhilden Год назад

    good video!
    kind of confusing that you didn't include us in the setup though.. you could've had a better tutorial if you started from scratch

  • @yanisbenslimane3106
    @yanisbenslimane3106 4 года назад

    You are a monster lol thanks for the video. Can you make a video how to create an app from scratch with Hooks etc .. ??

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Thanks Yanis! I will think about some app that I can build from scratch but right now I am trying to create as much videos as possible with real life animations that can easily be applied to any project. It’s a great suggestion by the way.

  • @tabaicanking3701
    @tabaicanking3701 4 года назад

    thanks bro

  • @sulemanali8542
    @sulemanali8542 4 года назад +1

    kindly make some videos in react native without expo and use cli

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      This should work the same in plain React Native projects without Expo because I’m using only APIs exposed by react-native package. Did you had issues porting this to a plain react-native project? Thanks in advance Suleman!

  • @ameyauplanchi8341
    @ameyauplanchi8341 4 года назад

    How to use it with tab navigator?..Btw Great work bro :)

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      Thanks Ameya. I don’t know to be honest. What issues you encounter?

  • @adedayo4405
    @adedayo4405 4 года назад

    Thumbs up man

  • @melissaarias2444
    @melissaarias2444 4 года назад

    Hey, I'm new here in this channel. I'll subscribe to see whats next!!!!

  • @engr.aftabufaq8633
    @engr.aftabufaq8633 4 года назад

    Hello sir. please create a video of animated drawer.

    • @CatalinMironDev
      @CatalinMironDev  4 года назад

      I already created a tutorial for a drawer, also integrated in react-navigation v5. Please check my channel. Thanks ✌️

  • @dannylamtoro8447
    @dannylamtoro8447 4 года назад

    ⭐⭐⭐⭐⭐ Rate

  • @thuanhoangnhat2350
    @thuanhoangnhat2350 3 года назад

    It’s vip bro :))

  • @matinzd
    @matinzd 4 года назад

    Totally messed up in android:(

    • @CatalinMironDev
      @CatalinMironDev  4 года назад +1

      Hi Matin, I don't know exactly what's your issue but here's a preview of it on my Android device (Nexus 5x) streamable.com/yrdb3w.

    • @matinzd
      @matinzd 4 года назад

      @@CatalinMironDev when I add scale to tranform image the image will go upside down! I don't know why! I thought the problem would be RTL and LTR but it wasn't.

  • @totaltotal157
    @totaltotal157 4 года назад

    first

  • @yuliantosaparudin
    @yuliantosaparudin 4 года назад

    I'm fallin in love with you

  • @Boga_adventures
    @Boga_adventures 4 года назад

    awesome!!!