10 EPIC React Native Animation Libraries

what's up Galactic friends and welcome to another list about 10 popular react native animation libraries in the past we already had a video about the 10 components that I recommend and now we're doing the same because you requested a list of animations and components that you can use this list is supported by Cataline Miron who gave me the inspiration for a few of these packages uh go check out his stuff both his YouTube channel and also his animated react native side will also come back to Cataline in a minute when we go to the packages just like before I tried out all of these examples and there's now a GitHub repository where you can see my basic examples and also the link of course to each of those components that we're going to use I just want to mention one thing that list is not a ranking so the first or the last thing isn't the best I think they're all great and they all serve a different purpose so let's dive straight into this all right so let's begin with the first one on the list and I think this is a foundational one that everyone should know react native reanimated and by the way did you know there's like this cool thing you can do I just learned this the other day anyway react native reanimated just re uh rethinking the general animated API that you anyway have access to within your react native application and it's doing it in a whole lot better way I really like how reanimated code looks you got hooks with like use shared value with spring and the usage is just super easy so here we go this is an example and it is just butter smooth because because reanimated is not using like JavaScript animations or any kind of web stuff you used to no this is actually using native use and the hood is using worklets and it's the best performance and really this if you just take one package away from this um make sure you check out react native reanimated the second package we want to take a look at is moti by Fernando Rojo one of the Legends in the react native world and it aims to make animations a bit easier and more Universal um you can plug in like uh you got web support you can PLU in different adapters and moti just feels really easy to use if we check out the moti example here we go here and it's so better smooth again and we see there's like presents you can animate um we got a few shapes and the cool thing is you can do it all in a way like this so you got this from to and animade stuff and it just really that easy to add animations to certain components that you'd like pop up when you enter a page or um perform something when something happens so I highly recommend this is probably one of the like hidden gems of this video go check out moti by Fernando Rojo which can also be used as far as I know on the web uh with yes three animated 3 of course the third package is called Maki and it is shamelessly plucked by Cataline who actually helped me to create this list of Animation libraries in the first place if you don't know Calene check him out at animade react native.com where has an epic library of even more animations so if you come to this video checking out animations that is the right place to continue your search but for now let's check out this little library because it's more like a a fun thing to do so maky does exactly what you think it might do it lets you run text through the screen like this in a pretty easy way with this Maki component I really like it uh the Mak component on the web is really underrated and we should bring it back to Native so thanks Cataline for this addition to animate react native Library 4 takes us into the professional realm which is ly react native created by Airbnb to basically run after effects animation as Jason in your application there are a lot of ly examples that you can check out uh and it's really quite easy so I just used one ly Json file uh which I took from their examples and you see this is really the stuff that you want to run in your application if you have these sort of animations you really usually don't want to do that stuff with I don't know Modi or reanimated these are like the heavy animations that only uh you get with ly however there's something to this because the library is as far as I know quite big um the animations can get a bit slow by over time there is an improved library that just came out a few weeks ago by magello um you know probably Mark rosi who's been on the podcast they're doing the react native vision camera as well and then I also got react native Scotty which is pretty much the same like ly but a high performance library for running ly animations in skia it does the same but it uses sk's GPU acceleration that means you got lower CPU uh usage and higher frame rates so I would highly recommend this check out the difference here between ly default and Scotty it is pretty astonishing so if you're serious about this go check it out but anyway L is a great recommendation for playing cool animations in an easy way in your react native app library number five is called R react native and is based on R which you probably have seen uh empowering certain other Frameworks you can pretty much use it everywhere and we can of course use r with react native this is probably the better version of L today I don't know exactly where the future is going but this is very promising again the usage is quite straightforward there's a RI component you can import from RI react native p in a URL or an asset I just use this one right here and you can go in there and play these sorts of animations in your application I really like these because these can bring a lot to your application and it's quite easy and you can work together with a designer if you're a team they can create these After Effects animations for both l or for uh Ri so go check this out uh in case you didn't know this might be a tiny bit better than l in the future package six is react spring a spring physics based react animation library and here you already hear it it is a react uh animation Library they do have crossplatform support So as you can see we can use it with react native or react 3 fiber and even more however when I tried this out it felt kind of hard because most examples are actually for react spring web however you can use this if you're Fess in your application it it looks actually quite good and quite natural so well you just need to fix a few issues because now it looks like the import from at react spring/ native you got to figure that out but once you there you can create your own animated components pretty much like you can do with the animated API in react native or with reanimated as well and then you get also these cool hooks that you can use pretty much like reanimated so if you're looking for something that will definitely work on the web uh which by the way reanimated does as well uh but for some reason you're into react spring because it's actually quite popular with about 27,000 stars because it's from the react World then go check out react spring on GitHub next package is probably a bit Niche finding and thanks Cataline for pointing this out because it's actually pretty cool react native text input effects with almost 3,000 stars um the maintenance well it's probably a bit old uh just like some other package that Cataline recommended but anyway uh I could still make it work I think I had to fix a few things it is a package to get you some sort of input effects like moving around icons um like making changing the size of these text input fields and it's based on another Library uh this can be pretty cool if you're looking for some well sort of easy uh ways to animate your text inputs to animate the the icons or whatever is going on however I found this quite challenging to set up because they're like these components they have these names I don't know exactly why that's the case I couldn't figure that out and it usually works with a specific set of icons that you have to use but if you're cool with all of that and you're interested in some specific input Fields like this one here then go check it out um the react native text input effect Library should still work today all right package eight is probably not exactly an animation library but you can still get pretty cool effects out of this so I wanted to include this also because it's that popular so the react native snap Carousel has 10K Stars right here which is quite a lot for a react native uh library but you can get these sort of things and to me this kind of fits into the animation category because it looks really good and it's stuff that you want to do if you're interested in animations anyway uh however I think also for this one I had to apply some fixes regarding outdated view props but anyway I could make it work in the easiest possible way um most examples you're going to find are somewhat still outdated they use like class components uh and not functional components so you got to do a bit of brainwork to uh refresh those code examples but nonetheless the carousel implementation feels a bit like a flat list where we also have a render item function so uh in that regards once you get it work it's pretty cool and I think based on this you can Implement really epic uh animation so go check it out just check out the examples and what they're planning for the future if you're interested in a Snappy Carousel component like this we're almost at the end of our list but plays9 goes to the react native animatable package which is also quite popular and I don't know why I never came across it I was probably so blown away by reanimated that I never used this but after checking out a few outdated libraries trying to make libraries work with patch package this actually felt really good once again so let's check it out animateable we got these smooth animations here up and down you go and the cool thing is that this was actually really easy to implement it looks like this uh so we got here the iteration count the direction or the uh animatable text with a puls animation so we can configure all of this in here pretty easy and this kind of feels a bit like Modi so I don't know I'm pretty sure all of these libraries Inspire each other which is always great great um and you can just pick the one that feels best for you also this still seems to be maintained it still worked uh pretty much out of the box so definitely uh another gem among the uh 10 libraries presented in here go check it out react native animatable and we're coming to an end of our list with one of the biggest names react native skia we just have to mention this William cillan version one was released in March uh I'm pretty sure the star will grow and with skia you can just do high performance 2D Graphics it is an awesome Library um I'm I can't tell you now about react n Go check out William cyan's Channel and everything he has done just giving you a quick example like like all of this can be done with react native skia usually also in combination with react native reanimated under the hood for some animations then you can do unbelievable powerful things pretty much if you don't know this skia is also the engine that was used in flutter to draw all the pixels on the screen it's now probably the impeller engine but anyway um William kandyan and the off uh offer uh and the the team at Shopify they made it work so we can also use this with re uh with react native which means we don't have to use flutter and we can still get the best off skia in react native applications so go check this out at Shopify react native skia if you want really really high performance drawing animations and check out Williams channel for more content on it all right and that's it for today I hope you enjoyed this list of 10 react native animation libraries and I hope you could find one or two Little Gems that you didn't know about before on top of that I just want to mention two more things so the first thing is that a lot of these libraries are kind of dying out or fizzling out especially if they serve a special purpose so um you've seen the text input there was like a carousel another component um a page control and I had more from Cataline on that list that just weren't maintained anymore so uh in many cases you're going to see a very specific example that works really great for a time and then people stop um maintaining that I can totally understand that but it's hard to use these components in the future so therefore you're sometimes better off using a more General approach like reanimated skia L like these big names to implement something instead of picking a very specific Niche solution for one component that you want to animate but anyway let me know if there was something new in this for you and if there's something that I have missed so please put a comment below this video and let me know your favorite animation liby for react native and also check out this video about 10 components I did probably going to find another component that you can use in your react native application in there and I will catch you next time until then Happy coding [Music] Simon

Channel: Simon Grimm

Views: 11,539

Keywords: react native, react native component, react native component library, react native chat, react native checkbox, react native for beginners, react native tutorial, react native app

Id: 8CZy6DjDXK0

Length: 13min 32sec (812 seconds)

Published: Tue Apr 16 2024