Advanced React Native FlatList animations at 60fps with Animated API

[@CatalinMironDev]

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' })

[@shiftcommand]

@@pixelwizardai where did you put useNativeDriver false

[@prakashd842]

This guy is very underrated . He deserves more subscribers .

[@CatalinMironDev]

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

[@absolute-commander]

Agree

[@praveenkumar-gj4km]

Yes

[@thenoob8682]

True

[@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...

[@sripasum3122]

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

[@CatalinMironDev]

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

[@faisalimtiaz4390]

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

[@theOrdinaryDev]

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

[@all-in-all7862]

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]

Thank you Pradeep! ✌️

[@jolly7506]

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

[@CatalinMironDev]

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 ✌️

[@ethantastic]

this man is directly connected

[@ahmedsamir-m8s]

Finally KZbin suggested great channel

[@koffworld7857]

This interface is out of this world! 🥰🥰

[@aleks6331]

Awesome video, clean code, no complications!

[@CatalinMironDev]

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

[@akmalahmed4660]

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

[@CatalinMironDev]

So nice of you Akmal, thank you! ✌️

[@Lili_4405]

Thank you from Brazil!

[@collocheru]

Your explanations are really nice, thanks for a great tutorial

[@CatalinMironDev]

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

[@collocheru]

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

[@CatalinMironDev]

@@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 ✌️

[@damyHarbi]

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

[@codehack3536]

You are god of Flat List Animation.

[@CatalinMironDev]

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

[@joshreynolds4164]

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

[@CatalinMironDev]

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

[@joshreynolds4164]

@@CatalinMironDev Can't wait!

[@hansderly]

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

[@vkray]

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

[@aqeebhj5467]

@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.

[@adilmezghouti]

Nicely done. Thanks for sharing.

[@CatalinMironDev]

Thanks for watching!

[@andreistoica1332]

Great work! I enjoyed every piece of it.

[@johnnyquid8146]

This was awesome, I loved it, super helpful.

[@iqorlobanov]

Best animation tutorials! Thanks! 👍

[@CatalinMironDev]

Wow, huge thanks Igor ✌️

[@lucasmoura5698]

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

[@nikhil73nainta]

Great work Catalin

[@CatalinMironDev]

Thanks Nikhil!

[@tiganaGTV]

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

[@CatalinMironDev]

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

[@sykn3z]

Thanks keep making videos like this! :D

[@CatalinMironDev]

Thanks Snaaapzter! ✌️

[@sibrimbarcenasreales5525]

Nice video, thanks for this content !

[@sanjoyrakshit842]

Nice sir it's really useful love from India

[@CatalinMironDev]

Thanks and welcome

[@semiherdogan1032]

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

[@jackwhite5070]

Perfectly beautiful

[@jackwhite5070]

or beautifully perfect

[@CatalinMironDev]

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

[@cleversonluizcorreiadesouz5959]

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

[@codehack3536]

Awesome video, please continue making video like this.

[@CatalinMironDev]

Thank you, I will!

[@AkshatKumawat]

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 ❤️

[@totaltotal157]

Just on time! Thanks!

[@CatalinMironDev]

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

[@dannyhw]

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

[@CatalinMironDev]

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 ✌️

[@anhquannguyen5111]

Great tutorial again. Thank you so much

[@CatalinMironDev]

Uu, thanks a ton Anh ✌️

[@nicolasmendonca3624]

That is awesome! Thank you!

[@CatalinMironDev]

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

[@zdzboss]

Awesome tutorial. Thank you!

[@CatalinMironDev]

Thank you Luan ✌️

[@IAjayMukhiya]

I like the devs who code in IDE with white background.

[@CatalinMironDev]

I actually prefer light themes but currently I am using a dark one which is ok as well: Batman Mono

[@ItsViswaa]

Man... You're the best!

[@borasumer]

Awesome job again, thanks man.

[@CatalinMironDev]

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

[@iamshadmirza]

Very cool. Thank you for this.

[@CatalinMironDev]

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

[@mohammadkhoirulanam5322]

Thanks, this is the best tutorial

[@devilstudio2719]

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]

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

[@Abram879]

Great tutorial, thanks

[@darshanponikar3633]

Man this is awesome!

[@CatalinMironDev]

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

[@gung2267]

Really really good!!!

[@CatalinMironDev]

Thank you so much for showing your support ✌️

[@felixgallo5132]

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]

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]

@@CatalinMironDev Thanks to you Catalin!

[@techienomadiso8970]

I hit like before I watch! !

[@CatalinMironDev]

Thank you so much Francis! ✌️

[@naibtahmazli6384]

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

[@youssefmuhamad3213]

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

[@CatalinMironDev]

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

[@tanvirazad49]

earned yourself a subscriber here!

[@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?

[@adedayo4405]

Boooyaaah!! Lets go! Love you man.

[@CatalinMironDev]

😂 thanks Ade ✌️

[@jackyvegaz]

you have my respect bro!

[@skshahidali2280]

Thank you so much man.

[@CatalinMironDev]

Happy to help! ✌️

[@kambingitem298]

awesome 👍 thanks lord

[@CatalinMironDev]

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

[@CatalinMironDev]

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

[@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!!

[@md.rajibsk4613]

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

[@CatalinMironDev]

Thank you Rajib!

[@di107dev]

Very good video!

[@hritikagarwal7676]

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

[@CatalinMironDev]

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 ✌️

[@brd3n]

Brillant 👍👏

[@gianludibella]

Master!

[@bharatmishra250]

I'm your new subscriber 😁

[@naturegoggle]

Awesome. Keep it up.

[@CatalinMironDev]

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

[@oguzhanturker8903]

Awesome vids thanks a lot

[@CatalinMironDev]

Thank you Oguzhan ✌️

[@ludwigvillalba1886]

Thanks!

[@ahmedayachi5889]

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

[@informatvetv4843]

I selected same code of yours but background image is not moving . first one stays even i move to next movie

[@programmersohel]

Great!

[@BearkFearGamer]

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?

[@sanketpuhan9649]

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

[@animenews9482]

You're too cool bro

[@CatalinMironDev]

Wow, thanks a lot ✌️

[@westfield90]

Superb

[@CatalinMironDev]

Thank you! Cheers! ✌️

[@PlayerHeader]

awesome video!!! subscription

[@CatalinMironDev]

Thanks Juri ✌️

[@samidebayroune3478]

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

[@everyonevoice]

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

[@stefanhallgr]

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]

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

[@siyabongahadebe18]

If I am using a react native reanimated carousel, how can I get the scrollX to work

[@srikanthmukkera3942]

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

[@kamalsaxena1384]

How to integrate payment gateway and generate invoice bill after payment

[@julianchamberlain69]

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

[@jassbillu]

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

[@ahmedtoma8930]

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

[@muhammaddanish6956]

@Catalin Miron how to achieve dynamic scroll able vertical pager ( tabs ) with lazy effect.

[@ehsaneshaghi1946]

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

[@furkanturkylmaz8385]

Perfect

[@CatalinMironDev]

Thank you Furkan! ✌️

[@AndreiKashkan]

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

[@MerciBro]

/>

[@Deviliumrei]

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

[@soloogho4937]

can we have active index in this?

[@bymathears6769]

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]

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

[@rohanjoshi8420]

I suggest you make step by step video of it this video on how you develop this project. because it is overwhelming to me to start to code. also not understand the entire code.

[@666thales666]

Awesome! iOS works fine, but, why is the backdrop component so slow on android?

[@CatalinMironDev]

I fix it since it was reported yesterday, here's the updated link: snack.expo.io/@catalinmiron/react-native-movie-2.0-carousel-for-android.Please refer to *chirag prajapati* comment from the comments section. It seems that the problem is with MaskedView maskElement, it is too expensive to recalculate something that's moving so I opted-in for using *width* animation and remove the MaskedView completely since it's not performant of Android.

[@666thales666]

@@CatalinMironDev Thanks! I didn't see the reference, sorry. This tip is worth two coffees

[@CatalinMironDev]

@@666thales666 Thank a lot Thales and I'm happy this worked for you. Thanks for the coffees in advance ❤️

[@junangameplays3271]

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

[@fatihsen6672]

Thanku so much

[@CatalinMironDev]

Any time Fatih ✌️

[@pinkfloyd9160]

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]

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]

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

[@pinkfloyd9160]

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

[@pinkfloyd9160]

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

[@CatalinMironDev]

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 🙏

[@davidreyes7732]

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?

[@makakolemafane9933]

Please help. How do I get the index of the active slide?

[@carlosjacobfield-sierra3759]

go to his discord I found a solution to this that I posted under help. However, it makes it run slower so theres a hopefully a better solution out there

[@carlosjacobfield-sierra3759]

// Pack Index const [packIndex,setPackIndex] = React.useState(0) const scrollX = React.useRef(new Animated.Value(0)).current const Item_Size = new Animated.Value(ITEM_SIZE) React.useEffect(() => { scrollX.addListener(val => { // Divides Scrollx by the size of each item const x = Animated.divide(scrollX,Item_Size); // Gives index number of each const indexNum= Math.round(Number.parseFloat(JSON.stringify(x))); setPackIndex(indexNum) }); }, []);

[@makakolemafane9933]

@@carlosjacobfield-sierra3759 Thank you very much! I will give this a shot

[@aposterobertmaputo9647]

Learn a lot

[@CatalinMironDev]

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

[@mohammadrezamojaveri5455]

very good project , but MaskedView position "absolute" not working for me !! 😔 pls help me