Like Animation with Lottie [React Native]

what's up folks today on react major school we're going to be replacing this simple state change of when you like or unlike a post just changing the heart color and replacing that by actually using a lottie animation this one right here so let's go ahead and get started okay quick tour of this project i've got my code in app i've got an index.js which just sets up some basic navigation i've got a single screen which is a feed which goes ahead and gives us the data for this feed and determines whether or not a post is liked and then each one of these feed items or posts is represented by our post component which goes ahead and renders the avatar name username text when it was posted and then whether or not it was liked so to actually go ahead and start changing this animation what we need to do is first install lottie react native and since i'm using a react native project i'm going to go ahead and say expo install lottie dash react dash native that'll go ahead and install the correct version of lottie react native for my react native version if you're just using a react native init project you can just say yarn or npm installed lottie react native and then you have to go ahead and do a little bit of native installation but that's all covered in their documentation so with that said let's go into our post.js and actually make sure we download this lottie file at lottie files you can just go ahead and press download get that lottie json file then i went ahead and just posted that in my app assets lottie and it's here as like.json so to actually use a lottie animation let's go ahead and import lottie view from lottie dash react native we can then go ahead copy this go down to where our actual images are just right here i'll just go ahead and comment this out we can post our lottie view in here we can pass a source we're going to say styles.heart lottie we'll go ahead and define that in a moment or i'm sorry this should be style and then we'll give it a source and the source should equal where our actual lottie animation is so we'll go up a directory into assets lottie and then we can say like dot json so if i save this let's go ahead and dismiss it and sometimes i found a lot of view an x i just need to actually do a hard refresh of the app and then i'll go ahead and render now obviously we don't see anything so let's go ahead and define heart lottie we'll just go up to where we actually define the heart and i'll give it these same specs a width of 20 and a height of 20. now if i save this we can see still nothing showing up so let's go back down here and let's actually allow this to start playing automatically so i'm just going to go ahead and pass autoplay and that should allow it to just automatically start and you can see the animation is actually running now obviously this is a lot smaller than we want let's go ahead and bump up the size of our lottie heart we'll give this a size of 50. and it's a little to the right now let's go ahead and specify margin left and just pull it over with a negative five and that's looking a lot better now obviously we don't want this just constantly run like this because we want to define when it starts and runs basically we want this animation to happen when we like or unlike something so to do that first thing we need to do on our lottery view we need to say autoplay is equal to false and we also want to specify that loop is going to be equal to false because we don't want it to keep running we want to start and end it explicitly okay so now we're seeing it's just sitting here if i refresh the app we can see it's going to sit in its initial state so to access our lottie view to actually mutate it and start and end those animations we need to grab a ref to it so i'm going to say ref is equal to animation and then we can go ahead up to the top of our component and define this animation variable it's going to equal a react.usref and we'll just set an initial value to null okay first thing we need to do is actually figure out the initial load we want to show is it playing or is it not playing and to do that we can use a react dot use effect which takes a function as a first argument and an array of dependencies as a second we'll just make that array of dependencies and empty array right now so it only runs on the initial start or the initial render so we know if it is liked we want it to be in the red heart phase otherwise we want it to be in just the gray border phase and to do this we can go ahead and say animation dot play or sorry it's animation.current.play we want to access the current animation and this play takes two arguments takes a start frame and an end frame now you can find these frames if you go back to lottie files you scroll down just below it you can start and pause one of these animations and down here you can actually see the current frame you're at so let's say we have something that looks like we want this state to actually be displayed so we need a start frame of 66 and because it's static at this point we need an end frame of 66 as well so we can go ahead and drop those in and then if we do the same thing for our unliked state let's go ahead and grab some here go back we want just the static image and 1920 should do the trick so drop those in here save it and you can see our first post we go back to our feed.js our first post is liked our second one is not so that's looking correct however if i actually go and change the like status you can see nothing's changing the reason that's happening is because we don't have any dependencies here to specify should this or should this not change so if we actually pass is liked to this and you can see i've liked an online thing so i'm going to go ahead and refresh it so it's at the default state and i press the like button we're just getting those changes which is just changing the frame the animation is currently at and that basically brings us back to our exact starting point but we want to actually run those animations when we change the like status initial run we just want it to default to it so there's not a whole bunch of animations going on that don't really represent anything we just want to see the animation when that value changes and the way we're going to do that is basically set up a reference to determine is this the first render so something like a component did mount or is this a subsequent render component did update so what i want to do is go ahead create another reference and i'm going to call this is first run and again i'll create a react.userf this time though i'm going to set the value to true so if it is the first run if is first run dot current we're going to basically do what we've got here if it's liked or not liked we'll just do a static play no frame changes which means no animation and we need to remember after this runs we need to go ahead and set is first run dot current is equal to false because it is no longer the first run we've already run this once otherwise if we're on a subsequent subsequent run we're going to say else if it is liked we're going to do one thing finally if it's not liked we'll do one final animation okay so if it is liked we want to go from the gray border which we know starts at frame 19 to the red state so let's go ahead copy this if it has been liked we're going to go from 19 to basically this red state so let's go back here we're going to go from 19 we want to go through the whole animation until it finishes and kind of stabilizes and it looks like 50 is going to be a good spot to stop it goes through that full animation and finishes at the final state so let's go ahead and set this to 50. likewise if it is being unliked we're going to want to go ahead and finish at that final grade border which again we know is frame 19 and a good spot to start this would just be at 0 and it'll go ahead and grow into this so let's go ahead and set this one to be a play from 0 to 19. we can save it let's make sure we refresh the app just make sure everything's reset correctly and now if i press a like on this one we can see it goes ahead and animates that like in otherwise it closes it and just gives us a simple animation back and we can go ahead and change this and we're using that lottie animation to add a nice little a little bit of spice to this basic interaction of liking or unliking a post if you're interested in more practical tips like this be sure to check out react nameschool.com

Channel: React Native School

Views: 22,366

Keywords:

Id: FySemYmSPHg

Length: 9min 36sec (576 seconds)

Published: Wed Jan 27 2021