React Native animations with lottie

hello mobile magic folks i hope you're all doing fine today because we are going to talk about lottie animations before we actually dive into the theory of what lottie is i'm gonna show you what we are building today and we are building this awesome like interaction uh basically what's gonna happen is every time you click on it an animation is going to be triggered and every time we click on uh uh on a button that has already been pressed what's going to happen is our animation is going to be played in reverse going back to its initial state so that's going to make an awesome uh that's gonna make an awesome like interaction for your application and hopefully you will make all of your apps pop up not only using this specific animation but many others that you can find inside lottie's library and i'm going to show you where to find them in a minute but what is lottie the tool that makes all of this possible lottie is a simple way of adding complex animations to our apps before laudi adding animations to applications often resulted in heavy bundle sizes and hard to maintain code most apps weren't using animations despite it being a powerful tool for communicating ideas just because it was simply too complicated what lattice does is it renders after effects animations which are exported with a specific plugin and and when laudi was released for the first time designers could create and ship beautiful animations without an engineer painstakingly having to recreate it by hand and that makes for a perfect match because after effects creates all the animations we're going to see and remember that after effects is all about awesome animations lighting renders it and javascript controls it but you might be wondering um how do i actually use these files is it heavy well as you can see in this statement uh taken directly from larry's website uh lottie is an open source animation file format that's tiny high quality interactive and can be manipulated at runtime uh if you take a closer look with me right here in the file sizes you can see the comparison between doing the same animation using a lot of file and a gif that happens because lottie is actually imported into our projects in a json file and that is super small and performatic but enough with the theory let's dive into lottie word i'm gonna show you how to install it how to use it and where to find animations to our apps all right so now we are at lottie's official documentation page and what we have to do in order to install lighting inside of react native applications is first of all create a react native application so i'm going to do this uh react native using npx react native init and i'm going to call my project i don't know lottie tuto now that my application has successfully been created uh i will navigate into its folder so cd lottie tuto and i'm going to install both of these dependencies which are needed to use lotte in react native the first one of them is lottie react native laudery native and the second one is ludi ios at a specific version um laudi ios so let's just install these and now we have a a react native application and the dependencies we need in order to run lottie but we don't have any laudi animation just yet and i'm going to head over to a website that's going to fix this for us the website is called ludifios.com uh the link to it is gonna be in the video's description so if you just click here on free animations uh please load you are going to see a lot of free animations that you can use inside any app you might want and at least these ones are free a lot of file has animations that are paid but these these ones are free at least so we have endless pages of free animations and you can just browse through them and choose whatever fits you the best you can also search for specific stuff so if i wanted a 404 animation i can just search it here and turn it into now let's wait for it we are going to have a lot of available 404 animations and all of them are just so awesome but we are not building a 404 application today uh what we're doing is a like one and i already have a specific link uh and i already have the link to the specific file we will be using today and it is wait a minute i'm gonna make a quick cut here and come back in a second so this is the animation i just showed you in the intro uh in its initial state it's just a blank heart and when you when the animation runs it feels the heart it's super beautiful and its end state is just like this how can we import this animation inside our project well basically we just have to download it we want to download a lot of json you can also download it as a gif and an mp4 but if you're using lottie there's not really a point in importing this as a gif or an mp4 that would just make your your your animation heavier but if you are using these animations uh somewhere that you cannot use lottie you can download a gif or an mp4 as well uh but we are going to use a lot of json so that's it what i'm going to do is i am going to um copy this this file right here and i'm going to paste it inside our application that we have just created which is the slidituto one i'm going to create a folder called assets inside of it and i'm going to paste this and rename it just like.json and there it is uh we have out that we need in order to start coding i so i'm back and running our application inside an emulator as you can see this is just a basic bootstrap and react native innate application uh nothing really special here so what i'm going to do is i'm going to replace this with a react native function with a text of hello hello lottie inside of it and yes it is working i want this text to be centered so i'm going to import a style sheet and i'm going to create a constant called cons styles styles echo stylesheet.create and i want to create a style of main and it's going to be a who's going to have a flex of one i justify content of center and then item alignment off center as well now i have to apply this style to my views style ecostyles dot main i'm sorry and everything should be working as expected yes it is well but we do not want a text in the center of our application we want uh an animation what we need to do in order to have that animation is first of all import light view from lighting react native lighting and the name it's pretty self-explanatory it's a view in which we are going to pass our logi file as a source and it's going to display our animation but beyond our live view we also have to import our animation itself and if you recall correctly i have placed our animation inside a folder called assets with the name of like json so i'm going to import that import like from assets like dot json and i'm going to replace this text right here with a lot of view live view with the source pointing to like uh oops here it is let me save this and and there has been triggered let me just reload this yeah so our animation is right here uh let me click it as you might have realized our animation isn't animated at all because we have to explicitly tell it to be animated uh we have basically two ways of animating things in lottie the one i'm going to show you right now gives you more control overall so that's what we're going to use but basically we can pass a prop called progress progress i'm so sorry progress where is my autocomplete here progress and progress expects a value ranging from zero to one in which zero is the beginning of the animation and one is the end of it so for instance if i pass the value of 1 here our animation is finished if i pass the value of 0.5 here our animation is halfway through and so on and so on so as you have realized um what happens is our progress is going to be equivalent of the progress of the animation so in order for our light reveal to be actually animated what we want to do is we want to have a a way of updating our progress in a steady way from one value to another in a specific range of time thankfully for us react native has a module that helps us do this and the module is animated uh animated basically is a library one of the resources that is all about animations is a function called animated.timing animator.timing allows us to take a value and mutate it from one value to another in a specific range of time which is specifically what we want right now so let's use an animated value in order to use an animated value we are going to use q things one of them is the use ref hook from react and the second one of them is the animated module itself we are going to use we are going to set a constant called progress and we are going to set it to the value of user f and the value of user f is going to receive the value of new animated value starting with zero and if you recall correctly use whichever value we pass right here to use ref is available at the dot current path inside or use ref why do we need a user f well basically because we want to declare this value once and only refer to it we do not want this value to be remounted every time our component is remounted okay so let me just uh pass this progress value to our progress and nothing happens because we are not updating our value yet we need to have a way of the updating and the way we are going to update it is using a valid a constant called uh i'm just going to declare function here the name of it is going to be i don't know like animation handle handle handle like animation and what it's it's going to do is it is going to uh call the animated.timing function animated.timing expects q values the first one of them is the value that is going to be mutated it needs to be an animated value it cannot be a common value so we are going to pass progress to it and the second value that it expects is an object containing some properties the first property that is expected inside this object is the q value prop which basically is our target value so in our case right here we are starting with zero and we won't go we want to go to one one uh the second thing that animated that time we expect is the duration of the time so we are going to pass one second or a thousand milliseconds here uh the last prop that is required in animated.timing is the use native driver one basically it is going to decide whether your animation is going to be run in the native thread or in the javascript thread uh just pass this as true but this is a bit more complicated than that and use native driver and it's logics and i'll deserve another video so tell me in the description if you would like for me if you would like a video just talking about the animated module and use native driver and others now that we have the animation that animated the timing function we need to tell it to start right away when we call it and here it is we have a function that is able to start updating our value but you might have noticed that it is not being called anywhere that's because we have no way of calling it just yet what we're going to do in order to be able to call it is we are going to wrap light view inside uh touchable opacity touchable opacity and touch of opacity is going to allow us to pass a prop called on press which is not available online view and the on press variable uh sorry the on press prop is going to trigger a function for us every time it is pressed so let me just do this on press and i'm going to pass a handle like animation touchable opacity also needs specific weight if and height values because if it doesn't have them what is going to happen is it's going to disappear just like it did right now so what i'm going to do is i'm going to declare a value called opacity i'm going to declare a new style called opacity and i'm going to set the width of it equals to 200 200 and the height of it also to 200 i'm going to pass this style right here style style to sorry i need to it's styles.past not only opacity and now if i click this everything my touchable opacity is not being triggered what's going on uh i'm just going to run my application again because something strange is happening if you are used with react native you know that every time i press attachable opacity it should have a little animation just like this one and as you might have realized our application is already working but not completely there is one thing lacking which is once we press or animation it's not going back because we are only saying our progress will go from zero to one and we are not basically i'm not prepared from one state new state use state and i'm going to treat this well imagine that you you are in the middle of an application and you're probably going to have a state or a prop or something that tells if your application has been liked or not so what i'm going to do is i'm going to use cost has liked and set has liked to be the values of our u state you state it's going to begin as a false value because uh or button comes empty by default and what i'm going to do is i'm going to i'm going to create a console actually cost called new value a new value is going to check if our application has been liked if it has been liked uh our new value has to be zero and if it hasn't we are setting our value to one because we need it to be filled uh after our animation what we are going to do is i'm going to set has like to the opposite of what it is right now and i'm going to pass new value to value and let's see what happens so if i click once it feels the heart and if i click it again it unfeels the heart so this is it for today folks this is a super simple tutorial of this super awesome tool that is loading i really hope that it helps some of you um i'm gonna leave the code to this in a github repo available in the description of the video i'm also gonna leave the link of this specific heart animation um what else do i have to say if you like this video please consider subscribing and giving it a like if you suggested me a new testing tutorial in the last video i'm working on those i'm working on a network testing video and also a redo testing video which should come out next week uh and that's it i hope you really enjoyed my video i have really enjoyed making it for you so goodbye

Channel: Mobile Magic

Views: 593

Rating: 5 out of 5

Keywords:

Id: IuTqtPhN-XI

Length: 19min 11sec (1151 seconds)

Published: Mon Jun 07 2021