Advanced React Native FlatList stack carousel animations at 60fps
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 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
![[#SHORTS CLIP] ครูอึ้ง กรรมการอึ้ง ฮ่าๆ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/qeBTuMJs4t0/mqdefault.jpg)
This is so cool man. Easy to understand and cool to watch. Keep going on. And keep up this tutorials
Thanks Vivek ✌️
You are amazing man, please never stop to share your knowledge with the community
Amazed at how cool these animations are every time. Nice!!
Glad you like them! Thanks a ton ✌️
Your channel is a gold mine. Great job!
Wow, thanks! I'm glad you like the videos. Thanks Goe! ✌️
+1
This is so cool man, i thinks, every tutorial created by you is the best, good job (Y)
this is Awesome dude.... you have created a path for me to learn animations Thanks dude.
Excellent work in relation to the other videos, you have helped me to give a better interface to your apps !!! Thank you!!!
I’m glad you found them useful and you learned something. Thanks Angel! ✌️
You are the motivator for me to learn animation brother. 👋. Love your content.
Wow, thank you Sochetra I’m blessed 😇. Please let me know if you need any help. ✌️
bro love this kind of videos dude! U explain it really good! Keep it up !
Appreciate it! Thanks Snaaapzter! ✌️
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
This just blows my mind, I follow the tutorial, I get results, but I have no idea what i'm doing 😂
That's awesome man! Thanks a lot!!!
Thanks for sharing!
Excelente vídeo, já assisti varias vezes para compreender , muito obrigado por compartilhar seu conhecimento.
Amazing! Thanks for the knowledge.
Amazing, I’m glad that you like it. Thanks Youssef ✌️
You are my hero! Good job
This is awesome!. Excellent content, excellent video. Thank you so much sir!
Thank you, I’m happy that you like it ✌️
Wonderfull. Thank you
Very Nice Tutorial And So Easy To Understand Keep It Up.
Glad you liked it! Thanks Mehank ✌️
Thanks man ! You deserve more subscribers ❤️❤️
I appreciate that! I'm glad that you like the content. Thanks Tanay! ✌️
@@CatalinMironDev when i pass this props" removeClippedSubviews={false} " on flatlist ,the image disappears from screen.please help if you can
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.
nice tutorial ! thanks for the interconnected animation !
Yes, it’s really powerful. Thanks Pierre ✌️
@@CatalinMironDev would it be possible to use this across multiple components in different files via a shared state like redux ? Would that be efficient ?
thank you Catalin! that was very useful....
Glad it was helpful!
very nice. This tutorial useful. Thanks you so much!
Thanks Dung! I’m glad you liked it ✌️
these are gems...glad i find you..you and william candillion best
Mohammad Sadman thanks 🙏 I know William personal and he’s a great guy and great teacher. Thanks a lot! ✌️
@@CatalinMironDev cool brother..love from Bangladesh ...love your work..will use it production app..
Great video
I wonder why it took YT so long to recommend this to me, even though i was always searching for React Native Animation videos
Very cool content, thanks.
Glad you liked it! Thanks Erkan! ✌️
hi sir your videos are great.
simply explained, but powerfull animations,
william candallian also makes good animations, but these are tough. you are rock.
Thanks Nadeem ✌️
very nice bro..
Superb!
Thank you! Cheers Murph ✌️
Very cool
I’m glad you liked it Mohd ✌️
Thank You!
You’re welcome Bilal ✌️
well done 🔥
Thanks Gorhom ✌️
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!!
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 ✌️
@@CatalinMironDev My suggestion is one of the three more used, bar, line and donut. Thanks man :)
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.
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.
Once I get The Job I Will Definitely become your patreon
Awesome!!
Thank you! Cheers Robson ✌️
Great like always! thanks
Wow, thanks Leonel ✌️
@@CatalinMironDev you are welcome
I don't know if you could do this one dribbble.com/shots/6725201-Smart-Cardholder
perfect.
Kabali 🔥🔥🔥
You are very coooool.
Thank you so much Mirali ✌️
Do you have any beginners tutorial on the Animated framework? Explaining the basics and how to get started? Thanks!
Awesome video🤩 I have one request you to create animated flag of any country which you want.
Thanks for the idea, I'll try it. Thanks Kuldip ✌️
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 .
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!
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?
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.
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 ✌️
A very cool video, but if you want to add a special button for each image, how can it be done?
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?
This is a great suggestion and I didn’t thought about it. Thanks 🙏
Thank you so much for your work. Can you please make a tutorial on cube transition using Animated api. Pleaseeeee
Thank you Coo, I can try it. ✌️
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
I’ll try to but I have 0 experience with RTL layout. Thanks Moh ✌️
what theme do you use in VSStudio?
I am applying touchableOpaicty over this carousel but onpress event is not working over this carousel ? Can you tell how to over come this
I would love to see a video on creating a good looking search bar and image uploader. then my app is all done :)
Ok, let me lookup for inspiration and see what I can do. Thanks Charles ✌️
zindex in CellRendererComponent didn't work for me, it doesn't bring the last element forward
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
Can this be done with a Pan gesture only on X Axis?
It's very helpful, but seems not support Android device? I try it via Expo and cannot swipe pic.
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.
can you do this type of scrolling inside Modals example react-native-modal..Help and create a video for this kind of work
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!
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 ✌️
@@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 :)
don,t u think by making newData=[...data,..data] is inefficient solution as it makes the list to big for fixed data.?
cool. if you switch vscode to dark mode, it would look much better imo. thanks for awesome tutorials.
Thanks Kuldeep✌️
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.
tried it but images not showing up
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?
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 ✌️
Awesome😍😍😍. learning animation from you. How many years do u have experience in react native?
Hi, I'm doing React Native since the beginning (I have access to the private repository) so in total over 5 years. Thanks ✌️
Hi, thank you for this video. Does this flatlist is optimized for hudge flatlist ?
Yes it is and that's the main reason of using it. Cheers Jeremie ✌️
Woooow
Glad you like it. Thanks Muhammad ✌️
Anybody can tell me, why use it in React js ?
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?
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
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!
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 ✌️
sir can you make animations on parrallex scrolling.
Yes, it’s on my list for a long time. 👍
Hey Catalin, May I ask why you don’t use reanimated library for these tutorials?(or did I miss it)
You don't need Reanimated for all the animations. Currently I'm creating a course for Reanimated2 so stay tuned for it. Thanks Manish ✌️
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.
plz make this with autoplay one by one slide
Can you do videos about react native with firebase
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✌️
please provide starter code.. it is very problematic to start coding..
please help me on this it is no working
on android
i have tried it since morning please
Hey man anyone do same in flutter?
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.
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 ✌️
@@CatalinMironDev Copied entire code from your repo, commented inverted prop and nothing changed :D
@@lerigogsadze5816 About what inverted prop are you talking about? Are you talking about the zIndex?
@@CatalinMironDev No no, about Flatlist, line 178 in your code.
@@lerigogsadze5816 Oh, yes, you are right. Sorry for being confused. Thanks a lot for pointing it out!
how to animate IMMEDIATELY when start scrolling
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?
@catalin
Any luck on this?
Amazed at how cool these animations are every time. Nice!!
I’m happy that you like them! Thanks Mahmoud ✌️