Advanced React Native FlatList stack carousel animations at 60fps

In this tutorial we are going to create a stack carousel animation in React Native using FlatList, Animated API and FlingGestureHandler from react-native-gesture-handler package.
I'm also going to show you a technique that I call interconnected animations or reactive animations, where 2 different animations react to each other.
I'm going to teach you how to
- create a stack style carousel
- how to create a reactive animated value
- how to do infinite scrolling and fetch new data
- how to create a flicker type animation when changing the active slide
Inspiration: dribbble.com/shots/3731362-Ev...
GitHub: github.com/catalinmiron/react...
👉👉👉 More react native animations: www.animatereactnative.com/ 👈👈👈
---
Expo: expo.io
React Native Gesture Handler: github.com/software-mansion/r...
----
👉Join Discord: / discord .
Want to support me?
- Patreon: / catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinm...
- Paypal: paypal.me/catalinmiron
----
You can find me on:
- Github: github.com/catalinmiron
- Twitter: / mironcatalin
- Website: batman.codes
Timeline:
- 00:00 Intro
- 01:35 Project walkthrough
- 03:23 Create the FlatList
- 05:52 Fix zIndex from FlatList renderItem
- 06:20 Modify FlatList CellRendererComponent
- 08:23 Create the reactive Animated variables
- 09:30 Create reactive Animated.spring animation
- 10:41 Create the FlatList Stack items style
- 13:31 Clamp the number of Visible Items
- 14:20 How Reactive Animated.Value works
- 15:45 Use FlingGestureHandler
- 16:55 FlingGestureHandler swipe Left
- 19:11 FlingGestureHandler swipe Right
- 20:00 Animate Flicker based on scroll position
- 21:32 How to fetch new data / Infinite scrolling
- 22:35 Final words
#reactnative #animation #FlatList #carousel #gestures #FlingGesture

[@vj8210]

This is so cool man. Easy to understand and cool to watch. Keep going on. And keep up this tutorials

[@CatalinMironDev]

Thanks Vivek ✌️

[@totaltotal157]

Amazed at how cool these animations are every time. Nice!!

[@CatalinMironDev]

Glad you like them! Thanks a ton ✌️

[@k.a6]

This is so cool man, i thinks, every tutorial created by you is the best, good job (Y)

[@amadeulinhares3622]

You are amazing man, please never stop to share your knowledge with the community

[@GoeHybrid]

Your channel is a gold mine. Great job!

[@CatalinMironDev]

Wow, thanks! I'm glad you like the videos. Thanks Goe! ✌️

[@MrJimmyKho]

+1

[@haythemfarhat6218]

This just blows my mind, I follow the tutorial, I get results, but I have no idea what i'm doing 😂

[@GamingZone11]

this is Awesome dude.... you have created a path for me to learn animations Thanks dude.

[@sykn3z]

bro love this kind of videos dude! U explain it really good! Keep it up !

[@CatalinMironDev]

Appreciate it! Thanks Snaaapzter! ✌️

[@angelalbertodelacruzgarcia544]

Excellent work in relation to the other videos, you have helped me to give a better interface to your apps !!! Thank you!!!

[@CatalinMironDev]

I’m glad you found them useful and you learned something. Thanks Angel! ✌️

[@matheusr.d2strokesfunny409]

Excelente vídeo, já assisti varias vezes para compreender , muito obrigado por compartilhar seu conhecimento.

[@THEVsSTUDIO]

Thanks man ! You deserve more subscribers ❤️❤️

[@CatalinMironDev]

I appreciate that! I'm glad that you like the content. Thanks Tanay! ✌️

[@THEVsSTUDIO]

@@CatalinMironDev when i pass this props" removeClippedSubviews={false} " on flatlist ,the image disappears from screen.please help if you can

[@uchihaa_kakashi]

THE BEST ONE THATS WHAT I WAS LOOKING FOR THERE WERE A LOT OF TUTURIALS ONTHE SAME TOPIC BUT THIS IS THE BEST THE MOST CONCISE MIN TIME UNDERSTANDABLE EASILY AND MOST BEAUTIFUL

[@SochetraNOV]

You are the motivator for me to learn animation brother. 👋. Love your content.

[@CatalinMironDev]

Wow, thank you Sochetra I’m blessed 😇. Please let me know if you need any help. ✌️

[@moyolvera]

This is awesome!. Excellent content, excellent video. Thank you so much sir!

[@CatalinMironDev]

Thank you, I’m happy that you like it ✌️

[@youssefmuhamad3213]

Amazing! Thanks for the knowledge.

[@CatalinMironDev]

Amazing, I’m glad that you like it. Thanks Youssef ✌️

[@PierreTeyssedre]

nice tutorial ! thanks for the interconnected animation !

[@CatalinMironDev]

Yes, it’s really powerful. Thanks Pierre ✌️

[@PierreTeyssedre]

@@CatalinMironDev would it be possible to use this across multiple components in different files via a shared state like redux ? Would that be efficient ?

[@webmaker_studio]

You are my hero! Good job

[@rilsonoliveira8152]

Bom pra caramba... Apesar de antigo, seu vídeo ainda fez eu me sentir um idiota. Se puder refazer esse mesmo projeto com APIs mais novas a galera, inclusive eu, iria gostar muito.

[@cleversonluizcorreiadesouz5959]

That's awesome man! Thanks a lot!!!

[@mehankjain4425]

Very Nice Tutorial And So Easy To Understand Keep It Up.

[@CatalinMironDev]

Glad you liked it! Thanks Mehank ✌️

[@shivakumars5144]

thank you Catalin! that was very useful....

[@CatalinMironDev]

Glad it was helpful!

[@ludwigvillalba1886]

Thanks for sharing!

[@mohammadsadman8567]

these are gems...glad i find you..you and william candillion best

[@CatalinMironDev]

Mohammad Sadman thanks 🙏 I know William personal and he’s a great guy and great teacher. Thanks a lot! ✌️

[@mohammadsadman8567]

@@CatalinMironDev cool brother..love from Bangladesh ...love your work..will use it production app..

[@silenttech311]

Wonderfull. Thank you

[@dungnguyentri2127]

very nice. This tutorial useful. Thanks you so much!

[@CatalinMironDev]

Thanks Dung! I’m glad you liked it ✌️

[@pcgs_]

This tutorial was 🤯🤯🤯🤯🤯🤯🤯🤯 Catalin, thank you for all your videos, they are help me a lot!! I always have dificult to find/create charts animations in React Native, can you show how to create basics charts with animations? Again, thanks for the content!!

[@CatalinMironDev]

You are so welcome! Any chart in particular? I'll create a video about an animated donut chart. What do you think about it? Thanks Pedro ✌️

[@pcgs_]

@@CatalinMironDev My suggestion is one of the three more used, bar, line and donut. Thanks man :)

[@youtubehelge5049]

I really enjoy this animation methods and I don’t see any reason to use reanimated. Is there a situation where reanimated is better then Animated?

[@piyushsharma1731]

Thanks sir for this gr8 tutorial and if possible can u create a tutorial on the animated API and how all of its functions works actually cos its easy to copy for us but in order to apply it logically like you do fundamentals should be clear to us.

[@nadeemkhan-yu4wf]

hi sir your videos are great. simply explained, but powerfull animations, william candallian also makes good animations, but these are tough. you are rock.

[@CatalinMironDev]

Thanks Nadeem ✌️

[@erkangorgulu6013]

Very cool content, thanks.

[@CatalinMironDev]

Glad you liked it! Thanks Erkan! ✌️

[@letmeplaygames2466]

Once I get The Job I Will Definitely become your patreon

[@LevelUp3646]

very nice bro..

[@UKwithAtif]

Hi Catalin we are learning alot from you please keep this moment going. Thanks for your effort. Can you please guide we how to catch onPress event from FlatList and from title. Thanks in advance.

[@leonelkahameni5315]

Great like always! thanks

[@CatalinMironDev]

Wow, thanks Leonel ✌️

[@leonelkahameni5315]

@@CatalinMironDev you are welcome

[@leonelkahameni5315]

I don't know if you could do this one dribbble.com/shots/6725201-Smart-Cardholder

[@alpenapple]

what theme do you use in VSStudio?

[@collinsolisakwe9926]

I wonder why it took YT so long to recommend this to me, even though i was always searching for React Native Animation videos

[@saadsheikh9395]

I am applying touchableOpaicty over this carousel but onpress event is not working over this carousel ? Can you tell how to over come this

[@guleye]

Superb!

[@CatalinMironDev]

Thank you! Cheers Murph ✌️

[@ashotmanukyan6853]

Great video

[@HotShotAjKtm]

Thank you so much for the content. Is there a way that I can make a flat list circular? for example, If we are on the last index of the data and we swipe right, we'll see the first index and so on.

[@CatalinMironDev]

I can do that as well but right now I was just focusing on the animation itself. The main idea behind an infinite or circular carousel is to change the data on the fly. I’ll try to integrate it in some future videos. Thanks Tandav ✌️

[@bilalbilalbilal7]

Thank You!

[@CatalinMironDev]

You’re welcome Bilal ✌️

[@cleversonluizcorreiadesouz5959]

Do you have any beginners tutorial on the Animated framework? Explaining the basics and how to get started? Thanks!

[@iamshadmirza]

Very cool

[@CatalinMironDev]

I’m glad you liked it Mohd ✌️

[@TellementBouchara]

Hello, I'm trying to mix your 2 tutorials on the carousel because I want to put a maskedView on the carousel you are making in this video. I encounter problems because as soon as I add the component the carousel slide of 2 and not of 1…. Would you like to do a tutorial for that? :) this is really good what you are doing!

[@amrshadid4228]

A very cool video, but if you want to add a special button for each image, how can it be done?

[@haydaryumus1530]

perfect.

[@misterkevin_rs4401]

Can this be done with a Pan gesture only on X Axis?

[@mogorhom]

well done 🔥

[@CatalinMironDev]

Thanks Gorhom ✌️

[@robsonsoares3530]

Awesome!!

[@CatalinMironDev]

Thank you! Cheers Robson ✌️

[@kuldipmakwana2173]

Awesome video🤩 I have one request you to create animated flag of any country which you want.

[@CatalinMironDev]

Thanks for the idea, I'll try it. Thanks Kuldip ✌️

[@susilofullstack4400]

Please help me, I'm using this to my project, I got a problem 1. When testing in appium component card not detected 2. When combine scroll view when swipe left or right scroll vertical is active

[@naibtahmazli6384]

Hello Catalin. You are doing best. I'm also learning react native. But documentation is a little bit hard to understand . Specially api side. Could you make tutorial about it .

[@wata1991]

Really great content! One question, is it possible you keep the original starting point as a commit so we can code a long while watching the video?

[@CatalinMironDev]

This is a great suggestion and I didn’t thought about it. Thanks 🙏

[@manishchaudhari5425]

Hey Catalin, May I ask why you don’t use reanimated library for these tutorials?(or did I miss it)

[@CatalinMironDev]

You don't need Reanimated for all the animations. Currently I'm creating a course for Reanimated2 so stay tuned for it. Thanks Manish ✌️

[@manishchaudhari5425]

Got it. Eagerly waiting for your course. Just one request, if you can provide option to buy with local currency it will be very helpful.

[@deepakkancherla]

Amazing tutorial, I'm facing an issue: I added onPress handlers to all items inside renderItem, when I click on the second/third item first onPress handler is getting triggered always, I think it is due to higher zIndex on first item. Could you please help me?

[@CatalinMironDev]

Chrckout my video Episode 3 of shared element transition. I show you how to fix this issue. Because all items are positioned absolute and they are not removed from the view, you’re basically pressing on the first one even if its hidden. Thanks Deepak ✌️

[@LavotiJoelVinayKumar]

Kabali 🔥🔥🔥

[@miralirafiyev4646]

You are very coooool.

[@CatalinMironDev]

Thank you so much Mirali ✌️

[@Akshayk-it-]

don,t u think by making newData=[...data,..data] is inefficient solution as it makes the list to big for fixed data.?

[@jeremiesellam]

Hi, thank you for this video. Does this flatlist is optimized for hudge flatlist ?

[@CatalinMironDev]

Yes it is and that's the main reason of using it. Cheers Jeremie ✌️

[@brunocandido8054]

zindex in CellRendererComponent didn't work for me, it doesn't bring the last element forward

[@mohabo7809]

You are the greatest. Thank you so much. I have learned a lot. And I love your content. I tried animating an RTL views and it has very hard if you can help me with it please do

[@CatalinMironDev]

I’ll try to but I have 0 experience with RTL layout. Thanks Moh ✌️

[@vitorrazdorov6017]

Hi man! This realy cool lessons! Will be good, if you are creating a short video tutorial course on reanimated 2, with examples :) Unfortunately, there is not much information on the 2nd version... Thanks again!

[@CatalinMironDev]

I’m working on Reanimated2 course. I’ll let you know once it’s ready. There will be plenty of nice animations with real usecases/scenarios. Thanks Victor ✌️

[@vitorrazdorov6017]

@@CatalinMironDev Wow, It is very cool! Thanks men for your hard work. By the way, now I use reanimated 2 in my projects, it's very interesting, but not everything is immediately clear :)

[@amershalata65]

hi, thank you for great video. I want to ask you a question that is not related to this video. maybe we can help me😶. i want make app that user can upload video to server . how can i programing something like this.

[@coocoo6756]

Thank you so much for your work. Can you please make a tutorial on cube transition using Animated api. Pleaseeeee

[@CatalinMironDev]

Thank you Coo, I can try it. ✌️

[@rg-du4ou]

Awesome😍😍😍. learning animation from you. How many years do u have experience in react native?

[@CatalinMironDev]

Hi, I'm doing React Native since the beginning (I have access to the private repository) so in total over 5 years. Thanks ✌️

[@naturegoggle]

cool. if you switch vscode to dark mode, it would look much better imo. thanks for awesome tutorials.

[@CatalinMironDev]

Thanks Kuldeep✌️

[@charlesharring4735]

I would love to see a video on creating a good looking search bar and image uploader. then my app is all done :)

[@CatalinMironDev]

Ok, let me lookup for inspiration and see what I can do. Thanks Charles ✌️

[@faolx4425]

I tried this out with the react native cli instead of expo. Everything works but the animation flickers between images. Doesn't look as smooth like in your video. Any way to fix that?

[@dragoscuciureanu4108]

Had the same problem, i used react-native-fast-image instead of regular Image and it fixed it for me. Pretty sure it was some weird image cache problem. react-native-fast-image takes care of it

[@maxc28]

It's very helpful, but seems not support Android device? I try it via Expo and cannot swipe pic.

[@shaheerahmed5234]

hey great work . it will be more helpful if you create an react native animation course on udemy or anywhere i want to learn animation from your.

[@GamingZone11]

can you do this type of scrolling inside Modals example react-native-modal..Help and create a video for this kind of work

[@lerigogsadze5816]

One question Catalin, The first image is always on the top because it has a higher zIndex, then comes the second image, third, etc.. then, why are you using inverted prop here? I think it has no effect.

[@CatalinMironDev]

Leri Gogsadze not really. The first image has the lowest zIndex. Basically, deeper you go down the tree bigger the zIndex, so in my case, without inverting the zIndex, the first image was below all the images. Btw, this is how things work on web as well. Cheers ✌️

[@lerigogsadze5816]

@@CatalinMironDev Copied entire code from your repo, commented inverted prop and nothing changed :D

[@CatalinMironDev]

@@lerigogsadze5816 About what inverted prop are you talking about? Are you talking about the zIndex?

[@lerigogsadze5816]

@@CatalinMironDev No no, about Flatlist, line 178 in your code.

[@CatalinMironDev]

@@lerigogsadze5816 Oh, yes, you are right. Sorry for being confused. Thanks a lot for pointing it out!

[@elhelalyQ]

Woooow

[@CatalinMironDev]

Glad you like it. Thanks Muhammad ✌️

[@fanzana8750]

Great job, Miron! I'd like to support you, but I don't have a Paypal. It would be much easier with Patreon. Good luck to you!

[@CatalinMironDev]

I’m working on patreon and thanks for showing your interest. I’ll ping you once my patreon is finished (patreon.com/catalinmiron). Thanks Fanzana ✌️

[@straightuprecordlabel3254]

tried it but images not showing up

[@nadeemkhan-yu4wf]

sir can you make animations on parrallex scrolling.

[@CatalinMironDev]

Yes, it’s on my list for a long time. 👍

[@pratikgadge6388]

plz make this with autoplay one by one slide

[@pranishveliyath7751]

Can you do videos about react native with firebase

[@CatalinMironDev]

I’ll do them but in the near future, now I have some animation tutorials that I would like to focus on. Any particular thing that you’re interested in Firebase with React Native? Like login or something else? Thanks Pranish✌️

[@rokon_uzzaman]

Anybody can tell me, why use it in React js ?

[@akshay-yeole]

please provide starter code.. it is very problematic to start coding..

[@mineracail4271]

please help me on this it is no working on android

[@mineracail4271]

i have tried it since morning please

[@chiragabhani6372]

Hey man anyone do same in flutter?

[@kbietten]

how to animate IMMEDIATELY when start scrolling

[@kaushikdugar2205]

Hi I am trying to create animation similar to this app in react native -> drive.google.com/file/d/1nqvlFMnLA4liCphXWXyH4P74osdSy6oN/view?usp=sharing. I have followed your tutorial and used reanimated library with Flatlists to achieve similar functionality with around 400 such cards as in the video. But animation could not be as smooth in the other app . Can you suggest what approach would be good?

[@sd4231]

@catalin Any luck on this?

[@mahmoudezz9193]

Amazed at how cool these animations are every time. Nice!!

[@CatalinMironDev]

I’m happy that you like them! Thanks Mahmoud ✌️