Advanced React Native FlatList animations at 60fps with Animated API

Рет қаралды 103,284

Күн бұрын

I decided to make another advanced FlatList #ReactNative animation video tutorial this time. This is an animated carousel/animated slider with lots of animations going on.
In this video tutorial we'll learn how to create:
- use the snapToInterval prop
- how to display a portion from the prev and next item
- how to align the active slide in the middle
- how to use MaskedView
Built using @expo, vanilla React Native Animated API and FlatList.
This code works in plain React Native project as well since we are using only React Native APIs such as Animated and FlatList.
- Inspiration: dribbble.com/shots/8257559-Mo...
- GitHub: github.com/catalinmiron/react...
👉👉👉 More react native animations: www.animatereactnative.com/ 👈👈👈
--
- Expo: expo.io/
- TMDB: www.themoviedb.org/
----
👉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:15 Project presentation
04:09 snapToInterval / decelerationRate
05:07 animate FlatList items
07:30 how to display the item in the middle snapToInterval
09:45 fix FlatList item animation
10:33 Create the backdrop
12:45 Backdrop FlatList
14:15 LinearGradient to fade the Backdrop
16:20 Animate Svg to create the parallax effect
18:53 60fps demonstration
19:26 Final words
#reactnative #animations #expo #tmdb

Пікірлер: 268

@CatalinMironDev 3 жыл бұрын

I received a lot of comments that this is not visible on Android devices. Here's the fix for it: snack.expo.io/@catalinmiron/react-native-movie-2.0-carousel-for-android. Thanks a ton!

@kylenoome4482 Жыл бұрын

having issues with this can i speak to you on twitter?

@Dipenparmar12 Жыл бұрын

Still not working on Android.

@zare775 Жыл бұрын

Hi, in your example you use useNativeDriver: false. It is too slow on my device. Do you have any solution with useNativeDriver: true for android ?

@pixelwizardai Жыл бұрын

I have managed to try and works on android, don't know the implication but I make the { useNativeDriver:false} in Animate.Flatlist} and follow the above code link, and made some changes as the input range is const inputRange = [ (index - 1.5) * ITEM_SIZE, (index - 1) * ITEM_SIZE ] and const translateX = scrollX.interpolate({ inputRange, outputRange:[0, width], extrapolate:'clamp' })

@GameLoverVivekrana Жыл бұрын

@@pixelwizardai where did you put useNativeDriver false

@sripasum3122 3 жыл бұрын

You deserve many more subscribers for this. Thank you for the quality content ☺️

@CatalinMironDev 3 жыл бұрын

Thank you Sridatta, I’m doing my best to teach as many things as possible and I’m just scratching the surface here:) ✌️

@jolly7506 3 жыл бұрын

Thank you for making awesome tuts for us and inspiring the React Native movement!

@CatalinMironDev 3 жыл бұрын

Glad you like them and it's my pleasure Erik. I am involved in this community for more than 6 years and I simply love it. Thank you for sharing your thoughts ✌️

@all-in-all7862 3 жыл бұрын

Thanku so much bro I will be implementing this animation in my project, I will share your video in my friend circle I think you deserve more subscribers,🙂👍

@CatalinMironDev 3 жыл бұрын

Thank you Pradeep! ✌️

@theOrdinaryDev 2 жыл бұрын

This is the best react native content I have ever seen.

@prakashd842 3 жыл бұрын

This guy is very underrated . He deserves more subscribers .

@CatalinMironDev 3 жыл бұрын

Prakash D thanks a lot for your kind words, you are awesome ✌️

@absolute-commander 2 жыл бұрын

Agree

@praveenkumar-gj4km 2 жыл бұрын

Yes

@thenoob8682 Жыл бұрын

True

@aleks6331 3 жыл бұрын

Awesome video, clean code, no complications!

@CatalinMironDev 3 жыл бұрын

Thank you Aleks. I’m glad that you like it

@andreistoica1332 2 жыл бұрын

Great work! I enjoyed every piece of it.

@johnnyquid8146 2 жыл бұрын

This was awesome, I loved it, super helpful.

@thatsalot3577 Жыл бұрын

Ohhhh... I can't express how happy I am like I can do all that stuff in css or framer motion but I was struggling to do that in react native and thought that I lost all my progress but your channel gave me hope to continue working on react native.

@fabiobaziota5919 Жыл бұрын

Also...

@iqorlobanov 3 жыл бұрын

Best animation tutorials! Thanks! 👍

@CatalinMironDev 3 жыл бұрын

Wow, huge thanks Igor ✌️

@akmalahmed4660 3 жыл бұрын

Thank you very much. I'll share this video with my friends.

@CatalinMironDev 3 жыл бұрын

So nice of you Akmal, thank you! ✌️

@koffworld7857 Жыл бұрын

This interface is out of this world! 🥰🥰

@faisalimtiaz4390 3 жыл бұрын

This guy deserve to be the top react native teacher on youtube.

@arkhamnygma4278 3 жыл бұрын

AWESOME tutorial. Thank you!

@CatalinMironDev 3 жыл бұрын

Thanks for checking it out Arkham ✌️

@How2Forex 2 жыл бұрын

Finally KZfaq suggested great channel

@diogolima4405 2 жыл бұрын

Thank you from Brazil!

@Dipenparmar12 Жыл бұрын

Amazing tutorial. Thank you 😊

@totaltotal157 3 жыл бұрын

Just on time! Thanks!

@CatalinMironDev 3 жыл бұрын

You’re welcome. Thanks for checking out this video ✌️

@tiganaGTV 3 жыл бұрын

Thank you very much for your great content. I'm going to watch all your videos. I'm new to react-native.

@CatalinMironDev 3 жыл бұрын

Glad you like them and welcome to React Native community Ibrahim! ✌️

@anhquannguyen5111 3 жыл бұрын

Great tutorial again. Thank you so much

@CatalinMironDev 3 жыл бұрын

Uu, thanks a ton Anh ✌️

@zdzboss 3 жыл бұрын

Awesome tutorial. Thank you!

@CatalinMironDev 3 жыл бұрын

Thank you Luan ✌️

@nikhil73nainta 3 жыл бұрын

Great work Catalin

@CatalinMironDev 3 жыл бұрын

Thanks Nikhil!

@semiherdogan1032 Жыл бұрын

very helpful tutorial! I learnt a lot about animations on rn through your videos 👍🏻 thank you...

@codehack3536 3 жыл бұрын

Awesome video, please continue making video like this.

@CatalinMironDev 3 жыл бұрын

Thank you, I will!

@lucasmoura5698 Жыл бұрын

Hey man, that was a really nice video, and a great learning. Thanks, from Brasil

@nicolasmendonca3624 3 жыл бұрын

That is awesome! Thank you!

@CatalinMironDev 3 жыл бұрын

You’re welcome Nicolas, I’m glad that you like it✌️

@sykn3z 3 жыл бұрын

Thanks keep making videos like this! :D

@CatalinMironDev 3 жыл бұрын

Thanks Snaaapzter! ✌️

@collocheru 3 жыл бұрын

Your explanations are really nice, thanks for a great tutorial

@CatalinMironDev 3 жыл бұрын

Thank you Cheruiyot! I’m always trying to improve myself ✌️

@collocheru 3 жыл бұрын

@@CatalinMironDev That's great, you are so good, how long have you worked with react native?

@CatalinMironDev 3 жыл бұрын

@@collocheru Since January 2015 (I had access to the private React Native repository). You can listen to my React Native Radio session to find out more about me and my work: dev.to/reactnativeradio/rnr-122-react-native-animations-feat-catalin-miron dev.to/reactnativeradio/rnr-168-animations-and-micro-interactions-in-react-native-with-catalin-miron Thank you Cheruiyot ✌️

@ethantastic 3 жыл бұрын

this man is directly connected

@mohammadkhoirulanam5322 3 жыл бұрын

Thanks, this is the best tutorial

@borasumer 3 жыл бұрын

Awesome job again, thanks man.

@CatalinMironDev 3 жыл бұрын

Thank you Bora, I’m glad you like it ✌️

@Abram879 3 жыл бұрын

Great tutorial, thanks

@iamshadmirza 3 жыл бұрын

Very cool. Thank you for this.

@CatalinMironDev 3 жыл бұрын

Glad you liked it and you're welcome. Thanks Mohd! ✌️

@damyHarbi 2 жыл бұрын

Bro.. it was amazing..!!! you are PRO

@AkshatKumawat 3 жыл бұрын

I'm pretty impressed with this tutorial and your way to teach is so good... Cam you please make a video on instgram stories animation that will be appreciated ❤️

@ItsViswaa 2 жыл бұрын

Man... You're the best!

@codehack3536 3 жыл бұрын

You are god of Flat List Animation.

@CatalinMironDev 3 жыл бұрын

hahaha, thank you ✌️I just wanted to show that it is possible to create awesome stuff with React Native :)

@gung2267 3 жыл бұрын

Really really good!!!

@CatalinMironDev 3 жыл бұрын

Thank you so much for showing your support ✌️

@jackwhite5070 3 жыл бұрын

Perfectly beautiful

@jackwhite5070 3 жыл бұрын

or beautifully perfect

@CatalinMironDev 3 жыл бұрын

Thanks Saeed and I’m glad this helped you ✌️

@darshanponikar3633 3 жыл бұрын

Man this is awesome!

@CatalinMironDev 3 жыл бұрын

Thanks Darshan, I’m glad you liked it ✌️

@tanvirazad49 3 жыл бұрын

earned yourself a subscriber here!

@youssefmuhamad3213 3 жыл бұрын

Awesome! Bring more animation videos, you explain very well. +1 sub

@CatalinMironDev 3 жыл бұрын

Thank you Youssef! There's more to come ✌️

@skshahidali2280 3 жыл бұрын

Thank you so much man.

@CatalinMironDev 3 жыл бұрын

Happy to help! ✌️

@Dyogu107 2 жыл бұрын

Very good video!

@jackyvegaz 3 жыл бұрын

you have my respect bro!

@naturegoggle 3 жыл бұрын

Awesome. Keep it up.

@CatalinMironDev 3 жыл бұрын

Thank you Kuldeep, I’m glad you like the video ✌️

@ludwigvillalba1886 2 жыл бұрын

Thanks!

@adedayo4405 3 жыл бұрын

Boooyaaah!! Lets go! Love you man.

@CatalinMironDev 3 жыл бұрын

😂 thanks Ade ✌️

@dannyhw 3 жыл бұрын

Great work! By the way you can also add padding to the flatlist contentContainerStyle instead of doing a dummy element.

@CatalinMironDev 3 жыл бұрын

You are right! I wanted to show both ways dummy elements and padding (this will be in a future tutorial) but stick with padding. Thanks Danny ✌️

@oguzhanturker8903 3 жыл бұрын

Awesome vids thanks a lot

@CatalinMironDev 3 жыл бұрын

Thank you Oguzhan ✌️

@kambingitem298 3 жыл бұрын

awesome 👍 thanks lord

@CatalinMironDev 3 жыл бұрын

I’m glad that you like it. Thanks Dio ✌️

@CatalinMironDev 3 жыл бұрын

I’m glad that you like it. Thanks Dio ✌️

@brd3n 29 күн бұрын

Brillant 👍👏

@md.rajibsk4613 3 жыл бұрын

Grt Job Man 👍👍... You got a new subscriber 🤣

@CatalinMironDev 3 жыл бұрын

Thank you Rajib!

@PlayerHeader 3 жыл бұрын

awesome video!!! subscription

@CatalinMironDev 3 жыл бұрын

Thanks Juri ✌️

@gianlucadibella8688 2 жыл бұрын

Master!

@devilstudio2719 3 жыл бұрын

Nice tut on react native 🤘. I'm noob to react native . Dude u explain amazingly about all stuff.... I would suggest to try building from scratch.. Overall nice tuts dude🤘

@CatalinMironDev 3 жыл бұрын

Great suggestion! Thanks a lot Sahil it really means a lot to me to be able to help you! Thanks ✌️

@bharatmishra250 3 жыл бұрын

I'm your new subscriber 😁

@programmersohel 4 ай бұрын

Great!

@westfield90 3 жыл бұрын

Superb

@CatalinMironDev 3 жыл бұрын

Thank you! Cheers! ✌️

@joshreynolds4164 3 жыл бұрын

You've gotta get an animations course out man! Awesome stuff, thank you!

@CatalinMironDev 3 жыл бұрын

Thank you Josh! I'm working on it ❤️

@joshreynolds4164 3 жыл бұрын

@@CatalinMironDev Can't wait!

@hansderly 3 жыл бұрын

@@CatalinMironDev I'm waiting for it dude, awesome work brother

@vkray 3 жыл бұрын

Catalin Miron I also suggested you on Twitter regarding the course.

@aqeebhj5467 3 жыл бұрын

@Catalin Miron hi can you please make a video on how use graphes in react native and how to show them on mobile it will be helpful for my project thank you for hearing me.

@animenews9482 3 жыл бұрын

You're too cool bro

@CatalinMironDev 3 жыл бұрын

Wow, thanks a lot ✌️

@techienomadiso8970 3 жыл бұрын

I hit like before I watch! !

@CatalinMironDev 3 жыл бұрын

Thank you so much Francis! ✌️

@hritikagarwal7676 3 жыл бұрын

Thanks Catalin for this amazing content. By the way when you are starting making content on reanimated 2?

@CatalinMironDev 3 жыл бұрын

Maybe next year, I’m not yet finished with Animated API and most probably you’ll see Reanimated2 content after I’ll publish my Reanimated2 course. Cheers Hritik ✌️

@karthikbalasubramanian5122 Жыл бұрын

Great tutorial. I am wondering, how can I loop this content, in the Flatlist. Really finding hard on how to get the Flatlist items to loop. Thanks a lot. Your videos have helped me understand React Native and Animations better every time. Thanks!!

@fatihsen6672 3 жыл бұрын

Thanku so much

@CatalinMironDev 3 жыл бұрын

Any time Fatih ✌️

@aposterobertmaputo9647 3 жыл бұрын

Learn a lot

@CatalinMironDev 3 жыл бұрын

This is amazing, I'm glad to hear this! Thanks Aposte ✌️

@cleversonluizcorreiadesouz5959 3 жыл бұрын

Man... You definitely should make an Udemy course on ReactNative animation...

@naibtahmazli6384 3 жыл бұрын

instead of using if statement to check and add view u can directly add view to before an after flatlist using listHeaderComponent and listFooterComponent

@davidexequieljiron5862 8 ай бұрын

Nice

@CatalinMironDev 6 ай бұрын

Thanks

@furkanturkylmaz8385 3 жыл бұрын

Perfect

@CatalinMironDev 3 жыл бұрын

Thank you Furkan! ✌️

@everyonevoice 2 жыл бұрын

This is very good and I just want to know how you imagin before any animation

@stefanhallgr 3 жыл бұрын

I like the curly brackets, what theme are you using in VS Code ? or what do you use to get these unique, more readable, brackets ?

@CatalinMironDev 3 жыл бұрын

Hi, my VSCode theme is Palenight and the font is called Operator Mono. Thanks Stefan ✌️

@julianchamberlain69 2 жыл бұрын

Hi man, great work! Is it possible to add a swipe up and down to the centered item? Would be a great feature! Or if possible could you point me in the right direction on how to do this, thanks

@junangameplays3271 3 жыл бұрын

Awesome, could you make a vídeo of shuffling cards and when you choose one, it leaves from the card deck and go to another position

@ahmedayachi5889 3 жыл бұрын

ty for the video i always watch the anim and try to make it by my own and then watch your solution , about the spacer it would be better if you have added paddingHorizontal to the flatlist container instead of creating a spacer element , ty for your videos again

@felixgallo5132 3 жыл бұрын

if you could do some tutorials for firebase with react native from scratch would be awasome, there are not many of them and the available ones are not so good as well. Thanks for your work!

@CatalinMironDev 3 жыл бұрын

I already have a series where I create a Habits app frok scratch with GraphQL (backend and mobile) but I will definitely consider expanding the content here. Thanks Felix ✌️

@felixgallo5132 3 жыл бұрын

@@CatalinMironDev Thanks to you Catalin!

@sanketpuhan9649 Жыл бұрын

hey hi i really loved your teaching .. got a doubt how to pass props to components in shared element Screen ??

@wobsoriano 3 жыл бұрын

You are goddamn awesome

@CatalinMironDev 3 жыл бұрын

Thank you so much Robert, I’m glad that you like my videos ✌️

@jeanwona2689 Жыл бұрын

Hello dear, thank you for all the work you have done. But for fix the flatlist active component in the middle of screen, you can use another smooth way. You can create a Empty component that will contain an empty view which must have SPACER_ITEM_SIZE as width value. Then put this component as listHeaderComponent and listFooterComponent for your flatlist. That is all. Sorry for my bad english guys. Please, have you a store of paid react-native advanced animations courses for people who want it?

@BearkFearGamer 3 жыл бұрын

We can make this infinity? Like a linked list? The last item is linked to the first and this idea. Well, i think this is better than the spacer in start and the end. The right spacer shows the first items and the left-spacer of the first item show the last. You can do this in another tutorial?

@samidebayroune3478 2 жыл бұрын

I wonder if I can ever be in where you are in React Native

@AndreiKashkan 3 жыл бұрын

Hey! It is amazing video! Just have a question. How can I get current index of active item?

@MerciBro 3 жыл бұрын

@ehsaneshaghi1946 Жыл бұрын

it's so awesome how can I add auto scrolling to this project?

@srikanthmukkera3942 3 жыл бұрын

will you also make a video to make this a loop of bidirectional carousel?

@hbinh6 3 жыл бұрын

Thank u so much bro! But do u have video tutorial full about your project? I'm beginner. Pls

@CatalinMironDev 3 жыл бұрын

No, sorry :( I don't have a full working app for this carousel but this is also going to be part of 10 React Native challenges which I am doing now and it's the last video. Here's the Patreon post to see what we are going to build: www.patreon.com/posts/10-types-of-41446571

@arrowfunction3200 3 жыл бұрын

hi thanks for the video really usefull, i know nothing about reanimated v1 and v2 and i want to learn one of them should i start with v2 or v1 what do you suggest?

@CatalinMironDev 3 жыл бұрын

Thanks Kreb. To be honest, Reanimated2 is great and powerful, the only downside I'll say is that it is still in beta/alpha so is not that mature compared to Reanimated1. I'll create a course that will walk you through everything that you need to know about Reanimated2. I'll announce it here on the channel once it is ready!. Thanks!

@mhasnain.ali_ 3 жыл бұрын

Great work!! Can you help me with the Dynamic Input fields Adding to the array as an object. And showing it on click of plus button, with Animation? I'm not getting it write or tell me where to look for it...

@ahmedtoma8930 2 жыл бұрын

Good job 👏👏. Please make udemy course about react native animation from scratch. I think it will best course ever

@bymathears6769 3 жыл бұрын

Good video and thanks for the knowledge you share with us. But I don't get the argument you pass in Animated.event in the onScroll prop. Where can I find documentation for the 'argMapping' in react-native (espacially for animated; confused af)

@bymathears6769 3 жыл бұрын

if anyone is interested, i found this: { "contentOffset": { "x": 0, "y": 2395.333333333333 }, "layoutMeasurement": { "width": 414, "height": 736 }, "contentSize": { "width": 414, "height": 5000 }, "zoomScale": 1, "updatedChildFrames": [], "contentInset": { "right": 0, "top": 0, "left": 0, "bottom": 0 } } animationbook.codedaily.io/scroll

@davidreyes7732 3 жыл бұрын

Great Tutorial, I used the fixed version on Android and I wasn't able to run at 60fps I got frames dropped . this is due my phone?? or just because animated on android works like that?

@jassbillu 2 жыл бұрын

please create one video for inshorts kind of animation in react native flatlist

@buthex 3 жыл бұрын

hello! awesome video can you helpe, please? I`m also animating opacity of the items to 0.5 when they are not in the center, but whenever I set a state on this screen, it messes with the opacity. I guess it re renders the list and reapply the opacity, so if im a the 3rd item up, they become invisible would you know how to fix it? thanks!

@gururajmoger8649 3 жыл бұрын

Pls make music and videos streaming app with animation 👌

@alexandrevieira7818 3 жыл бұрын

Hey Catalin! Firstly, thanks for the tutorials, I've seen a lot of them already. I have a doubt, I'm trying to animate the FlatList using the Reanimated v2, but I'm getting frame drops, which is making me start using the AnimatedAPI. Do you know how can I avoid frame drops on FlatLists using Reanimated v2? Anyone who sees this comment and is experiencing the same problem, know how to fix it?

@MerciBro 3 жыл бұрын

Had the same problem yesterday. I solved it by building some limitor algorithms for the data being passed into the list. What's weird is that if you map the same data in a scrollview, you dont get the frame rate drop.

@Deviliumrei 3 жыл бұрын

How do you stop the carousel so that it won't scroll more than one item per swipe?

@progaymer.69 3 жыл бұрын

Light theme seriously

@pinkfloyd9160 3 жыл бұрын

Brother, I need help can u tell me how did u master react native and how much time did it take u. Also, I am planning an app and decided to make it with react native, will it be good and is it necessary to learn JavaScript before react native. Or should I make it with React.js? What should I do please 🙏 reply? I found your channel thought Reddit and this channel is GOLD.

@CatalinMironDev 3 жыл бұрын

Hi, I had access to React Native before it was released and I build the very first complete application with it after 3 months after the release, but all of this because I knew React. This is the app v1: github.com/catalinmiron/react-native-dribbble-app And app v2: zribbble.com

@pinkfloyd9160 3 жыл бұрын

but can we build large projects like Facebook or Instagram using react native?

@pinkfloyd9160 3 жыл бұрын

@@CatalinMironDev that means I will have to learn react in order to learn react native.

@pinkfloyd9160 3 жыл бұрын

@@CatalinMironDev Why u didn't launch your app on play store as with react native we can build cross-platform apps?

@CatalinMironDev 3 жыл бұрын

The app was launched in the AppStore but Dribbble cut the whole API I think that knowing JavaScript and a little bit of CSS can help you out, knowing React is definitely a plus because will make your transition smoother. Yes, you can write cross-platform solutions in React/React Native I’m working at Skype which is a cross-platform application built with React and React Native. Thanks 🙏