Advanced FlatList Carousel Animation in React Native using Animated.API

Поділитися
Вставка
  • Опубліковано 14 січ 2025

КОМЕНТАРІ • 147

  • @TheBalorog
    @TheBalorog 4 роки тому +7

    You are one of the best on this platform,
    I learned more about react native animations in these 20 minutes than anywhere else.
    Thank you!

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +1

      Wow, thanks and I'm really glad to hear this! Thanks for taking your time to share your feedback Eden ✌️

  • @DevRSC
    @DevRSC Рік тому +1

    Your tutorials are amazing! As a beginner in React Native, I truly appreciate the effort you put into making them. Please keep them coming, they're incredibly helpful for aspiring front-end designers like myself.

  • @derzh
    @derzh 4 роки тому +12

    WOW! I want to implement it into my project :D

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +6

      Go for it! Also share with me the result and ping me if you need any help! Thanks Derzh!

  • @PIECES_ONLY
    @PIECES_ONLY 3 роки тому

    Never Stop!!!!!!!!!! This was amazing!!!! Best video on youtube!

  • @101sokratis
    @101sokratis 3 місяці тому +1

    4 years later but still a gem

  • @amanaswani1421
    @amanaswani1421 2 роки тому

    Man that was lit !!! ❤‍🔥❤‍🔥🔥I never knew we can create such fantastic animations using RN. great job man keep it up, and thanks for making such wonderful tutorials.

  • @mrval3638
    @mrval3638 2 роки тому

    Thank Boss, you turning the impossible to be possible with you code. i love you man

  • @tomastamagnone3417
    @tomastamagnone3417 4 роки тому +1

    Almost 7k dude you're awesome!

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +2

      So close! Thanks Tama for showing your support! ✌️

    • @tomastamagnone3417
      @tomastamagnone3417 4 роки тому

      @@CatalinMironDev you've got the 7k! well deserved!

  • @barklegneeshetu8048
    @barklegneeshetu8048 3 роки тому

    I really wish I can give 1,000 like bro. You're awesome and please make more RN tutorials. As far as am concerned no one can touch your talent.

  • @venancio_avila
    @venancio_avila 4 роки тому

    Hi!!! Thanks for this... i'm Brazilian and im very fan of your work

  • @LordSahilYadav
    @LordSahilYadav 3 роки тому

    Really helpful and easy to learn, thanks so much for your videos. Learned a lot! :D

  • @uzochukwu1556
    @uzochukwu1556 2 роки тому

    Bro you're so amazing, I love u. Thanks 💯💯

  • @vladiiivlogs8068
    @vladiiivlogs8068 2 роки тому

    Excelente video ya me suscribí a tu canal, éxitos totales 💪😁

  • @MantuKumar-in2qq
    @MantuKumar-in2qq 3 роки тому

    wooohh.. You are an artist man. I want to learn this, This is lit.

  • @ElderPimenta
    @ElderPimenta 3 роки тому

    Muito bom! Excelente exemplo e fácil de entender. Parabéns pelo vídeo!! (from Brasil)

  • @lukrin3482
    @lukrin3482 3 роки тому +1

    Your videos are extremely helpful to me, I really appreciate the time and effort you put into them. You make learning React-Native exciting! :)

  • @korpemre
    @korpemre 2 роки тому +1

    You are amazing catalin. I'm excited to watch your work. Would you consider doing a training where you can explain this animation class in detail? I want to run animations like you :)

  • @bedirhanaygul805
    @bedirhanaygul805 4 роки тому

    Awesome stuff! Congrats 👏🏼👏🏼👏🏼👏🏼

  • @mausambhalekar1378
    @mausambhalekar1378 3 роки тому

    thank you mannn !!! seriously waiting for this one

  • @miladhashemi7378
    @miladhashemi7378 4 роки тому +3

    Amazing as always! Thank you for your videos.
    Suggestion for next video: tab view with nice spring animation 😀
    Tab view is something that is commonly used but no good tutorials with animations.

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      That’s a great suggestion. Do you have a video showing this animation or anything? Thanks Milan ✌️

    • @miladhashemi7378
      @miladhashemi7378 4 роки тому

      @@CatalinMironDev If you have IPhone just take a look at Phone - Recents. You have a tab slider at top (although no spring on the tab switch) and then the list animates. Here is a picture
      support.apple.com/library/content/dam/edam/applecare/images/en_US/iOS/ios13-iphone-xs-phone-edit-recent-callers.jpg

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      @@miladhashemi7378 So you want to have the filter animation based on tab selection?

    • @miladhashemi7378
      @miladhashemi7378 4 роки тому

      @@CatalinMironDev Yes and also a spring animation on the tab selector 😀 Think it would be a cool video tutorial. People can learn how to animate list changes etc. ❤️✌🏼

  • @kasraafshari4293
    @kasraafshari4293 4 роки тому

    another video another great thing! thanks again Catalin. really appreciate it.

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      You’re welcome, I’m glad you liked it. Thanks Kasra ✌️

  • @fernandolucassouza7264
    @fernandolucassouza7264 3 роки тому

    My friend, you are very good, Congratulations !!! Top, top top ...

  • @issammerikhi5359
    @issammerikhi5359 3 роки тому

    Thank you boss amazing tutorial !!

  • @peterdshekiondo9444
    @peterdshekiondo9444 3 роки тому

    learned a lot from this great lesson.

  • @AndreiKashkan
    @AndreiKashkan 4 роки тому

    Awesome! keep going in the same direction!!👍👍👍

  • @anhquannguyen5111
    @anhquannguyen5111 4 роки тому

    Always amazing.
    Really looking for the tutorial making intro slide with next prev button. Please do it when you have time. Thank you so much for sharing everything

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      Hi Anh, so you want to have a next/prec buttons on this carousel? Thanks ✌️

  • @egbertodeoliveira7524
    @egbertodeoliveira7524 3 роки тому

    Thank you brow, you help me a lot!!

  • @raphaeldouglas4935
    @raphaeldouglas4935 4 роки тому

    very good! Thanks and "salve" from Brazil!

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +1

      I’m glad you liked it Raphael! Thanks and “salut” from Romania ✌️

  • @sja1n
    @sja1n 4 роки тому

    amazing tutorial as usual 👍🏻

  • @silviaamanda9700
    @silviaamanda9700 2 роки тому

    THANKYOU!!!!! 😭😭

  • @mogorhom
    @mogorhom 4 роки тому

    smooth tutorial as usually 💯

  • @UdithaTennakoon
    @UdithaTennakoon 4 роки тому +1

    Excellent, Can you do a tutorial series for beginners?

  • @StatescuRazvan
    @StatescuRazvan 4 роки тому

    Nicee 👍🏻 what vs code theme do you use?

  • @tusharraj9785
    @tusharraj9785 4 роки тому

    You are amazing .... Love You :)) ... God Bless You

  • @bsakilobm
    @bsakilobm 2 роки тому +1

    please tell me any possible to use gradient color if possible how ?

  • @yuliantosaparudin
    @yuliantosaparudin 4 роки тому

    Never disappointed, always great

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      Thank you Yulianto! I'm glad that you like it! ✌️

  • @428Tapes
    @428Tapes 3 роки тому

    The best UA-camr ever

  • @AkshatKumawat
    @AkshatKumawat 4 роки тому

    You deserve subs in millions 🔥

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      One day I'll reach 1M subs! Thanks for your support Akshat! ✌️

    • @AkshatKumawat
      @AkshatKumawat 4 роки тому

      @@CatalinMironDev i'm sure ❤️ you've awesome content

  • @geekthegeek730
    @geekthegeek730 4 роки тому

    I have one word! WOOOWWW!!!!!!!❤️

  • @frontend_mentors
    @frontend_mentors 2 роки тому

    Thank for this videu! Very usefull for my! What vscode-theme using in this video? it nice

  • @Ravin_raze
    @Ravin_raze 3 роки тому

    amazing work

  • @codeprovs
    @codeprovs 7 місяців тому

    thank you

  • @miralirafiyev4646
    @miralirafiyev4646 4 роки тому +1

    thanx for the lesson , you create awesome and useful animations in RN . I have a question , why you do not use Reanimated v2 package ?

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +1

      Thanks Mirali, I’m creating a Reanimated2 course now, stay tuned for that. Thanks ✌️

  • @rafaeldias2109
    @rafaeldias2109 3 роки тому

    Thank you bro

  • @hongoSalvaje17
    @hongoSalvaje17 3 роки тому

    Thanks!

  • @frontend_mentors
    @frontend_mentors 2 роки тому

    what music is playing in the background?

  • @ImVuCms
    @ImVuCms 4 роки тому

    This video is so helpful !!!

  • @theaveragecoder6182
    @theaveragecoder6182 3 роки тому

    What kind of theme you are using with your code editor

  • @ankushss8873
    @ankushss8873 4 роки тому

    Cool stuff.. Please continue the good work and tell us how did you start ur journey in Animations..👌👌

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      Thanks Ankush, that is a great suggestion. ✌️

  • @anastely6144
    @anastely6144 4 роки тому

    Very Awesome 🔥

  • @tanveerulhoque6803
    @tanveerulhoque6803 3 роки тому

    thank u so much brother :)

  • @sarahali-wn5sd
    @sarahali-wn5sd 2 роки тому

    Love the video. I've watched a lot of videos on different types of page indicators but what happens when the data is large? It doesn't look very good when the bottom is completely covered in dots. How do I fix that? :(

  • @AislanMiranda
    @AislanMiranda 4 роки тому

    sensational, congratulations!

  • @elsolutionscommunication5494
    @elsolutionscommunication5494 4 роки тому

    amazing work !!

  • @alfaizkhan2793
    @alfaizkhan2793 Рік тому

    What Font you are using in VS code?

  • @ahmadmadani6360
    @ahmadmadani6360 4 роки тому

    Great video. Thanks Catalin!!!
    Question: Why
    const Indicator = ({scrollX}) => .......
    and not:
    const Indicator = (scrollX) => .......

  • @trungphamuc2868
    @trungphamuc2868 3 роки тому +1

    Hi Catalin Miron, the first thing i want to say is thank you so much for the courses you did, and i learned a lot of thing from it, but in this tutorial i am getting an error that is when i type scrollX.interpolate then i get the log, its say undefined is not an object, but when i log only my scrollX i get 0 from this, hope you will help me fix it, Regards.

    • @alexanderrisbey6768
      @alexanderrisbey6768 3 роки тому

      Same here, did you manage to fix it?

    • @guilhermerdg
      @guilhermerdg 2 роки тому

      @@alexanderrisbey6768 i got the same error, did you fix it?

    • @jose-x-2826
      @jose-x-2826 2 роки тому +1

      @@guilhermerdg So, I've the same error Here, after googled I found the interpolate was renamed to interpolateNode, with react-native-reanimated^2.9.0, but I still have problem with this, So anybody here solved this problem? Thanks...

  • @madebydayo
    @madebydayo 4 роки тому

    THANK YOU!!!! Using this in a project right now. One question though, how do I implement a manual scroll button, say scroll to the next "screen/page" on click of that button? possible?

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +1

      This is something that I'll tackle in an upcoming video tutorial. Adding next/previous buttons to this carousel. Thanks Dayo!

  • @peterdshekiondo9444
    @peterdshekiondo9444 3 роки тому

    Quick question though. how do you add on click listener. as when i click a button it shows another slide?

  • @denisgudiel5574
    @denisgudiel5574 3 роки тому

    Hello friend, what theme are you using in visual study code?

  • @HimanshuYT
    @HimanshuYT 4 роки тому +2

    React native vs flutter? Which will you chose for faster development

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +1

      I am not the best person to do this comparison since I have almost 6 years of React Native experience:)

    • @HimanshuYT
      @HimanshuYT 4 роки тому

      @@CatalinMironDev I love react native but, I am using flutter past 1 year and flutter is best for ui and fast development but there are lot of issues that can't be done on flutter !

  • @BrunoCastro
    @BrunoCastro 4 роки тому

    Nice work, you could enable subtitles in your videos, it would help a lot.

  • @lfabianosb
    @lfabianosb 4 роки тому

    Really great job!
    How can I implement this carousel like an infinite loop? For example, when I get the last item and move right, I go back to first item.

  • @Super50fifty
    @Super50fifty 3 роки тому

    If I wanted to use a typescript template would it break anything if I follow your tutorial? Also, Great video!

  • @josephorji8331
    @josephorji8331 3 роки тому

    Can apply this to an on boarding screen?

  • @techienomadiso8970
    @techienomadiso8970 4 роки тому

    You are the master

  • @sokvebolkol3504
    @sokvebolkol3504 3 роки тому

    Thank you

  • @pcgs_
    @pcgs_ 4 роки тому

    Catalin, you're the best 😍😍! Can you create a tutorial explaining how to work with responsive layout in RN? My design always breaks when I change the device

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому +1

      Great suggestion! I'll think about it Pedro! Thanks ✌️

  • @marianareissilveira
    @marianareissilveira 3 роки тому

    Amazing!!!

  • @umerfarooq8618
    @umerfarooq8618 4 роки тому

    please please create a course with full projects love your content as a web dev.

  • @kambingitem298
    @kambingitem298 3 роки тому

    wow you so brilliant !
    Can you share how to learn animation for beginners?

  • @principe.borodin
    @principe.borodin 4 роки тому

    Fantastic, I will pratice on night

  • @elsolutionscommunication5494
    @elsolutionscommunication5494 4 роки тому

    Always great

  • @erlanakylbekovich4586
    @erlanakylbekovich4586 4 роки тому

    Awesome!

  • @arsyalkun
    @arsyalkun 4 роки тому

    why me invalid transform scale : {"scale":0.8} 14:17

    • @arsyalkun
      @arsyalkun 4 роки тому

      sory i can

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      I don't understand exactly the problem. Could you please share more details? Thanks Arsyal ✌️

  • @alifaraz8871
    @alifaraz8871 3 роки тому

    IT WAS GREAT !!! you help me a lot just one thing somebody let me know how to out the select screen data on console log?

  • @dungnguyentri2127
    @dungnguyentri2127 4 роки тому

    awsome! so beautiful

  • @shivamkumar-td8qf
    @shivamkumar-td8qf 3 роки тому

    you are awesome.

  • @sharofazizmatov1000
    @sharofazizmatov1000 4 роки тому

    wow esti super!! imi placut cum zici double smash dislike button :) Good luck. One of the best channel

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      hahaha, thanks a lot Sharof, it means a ton to me ✌️

  • @dalyryl
    @dalyryl 2 роки тому

    bro thanks

  • @muazothman7416
    @muazothman7416 2 роки тому

    thats where i heard it, he sounds like Zlatan!

  • @dangduylinh9587
    @dangduylinh9587 4 роки тому

    Can you create component handle image such as crop, brightness or fill color :v I'm very glad to see it :v
    Thanks

  • @mohdsajidshaikh4291
    @mohdsajidshaikh4291 4 роки тому

    Please take this to app intro.
    With buttons and changing flatlist index with on click and open another screen after last index

  • @nimbigo
    @nimbigo 4 роки тому

    Bad event of type undefined for key contentOFFset
    This error is repeating as soon as I am swiping the carousel.
    If anyone knows the solution for this reply to this comment.

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      the key should be `contentOffset` and also ensure that the FlatList is an `Animated.FlatList`, lastly that Animated is imported from react-native package. Thanks Aditya ✌️

  • @Manisha12428
    @Manisha12428 3 місяці тому

    provide code of only this video it will be so helpful

  • @rajureddy7512
    @rajureddy7512 4 роки тому

    Please Can u do How to install react-native-cli in window , not like expo ....It's help full me and others also ....

    • @CatalinMironDev
      @CatalinMironDev  4 роки тому

      Unfortunately I’m not a Windows user, I use Mac. Thanks Raju ✌️

  • @hoanganhngo6134
    @hoanganhngo6134 3 роки тому

    wow.....

  • @joaom4431
    @joaom4431 3 роки тому

    hi guys, I really liked the video, I liked it so much that I tried to create the same project but on typescript, but I had some doubts & and problems with the Indicator because in my Animated.FlatList I had a problem in onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: ScrollX } } }], { useNativeDriver: false } )} the code are saying that I need to put a Mapping on contentOffset: { x: ScrollX }, someone could help me please?

    • @joaom4431
      @joaom4431 3 роки тому

      Error: Type 'number' cannot be assigned to type 'Mapping'

  • @amanngoel
    @amanngoel 4 роки тому

    Gawd !!

  • @MerciBro
    @MerciBro 4 роки тому

    Hi guys,
    I'm a React Native Developer of 5 years of experience. I have two apps on the the Google playstore and one app on the Apple App store.
    I have a course that I'm still working on and in my free time, I like to make UA-cam tutorials.
    I'm looking for a job in React Native. Can someone help?

  • @gankers6746
    @gankers6746 Рік тому

    i didnt understand lot of stuffs

  • @haniframadhan1484
    @haniframadhan1484 4 роки тому

    Awesome !!