Lottie Animations in React Native | React Native Tutorial

hello everyone welcome back today we are going to learn about how to use Loy animations in react native well not only use but you'll also learn how to make them interactive and controller animation so let me show you a demo of what we'll be building in this video here are a bunch of animations and if I click on this gift box this will start animating and explode I've made this hard icon like a Twitter like button where if you click it it will show that the button is clicked and if you click it again it will reset to its initial stage these animations are much lighter than a gif animation so if you plan on using animations in your app I highly recommend to use these instead of the GIF images so let me show you how you can use these in your application so let's get started first you need to go to react native and here you'll find two ways to create react native app we'll go with the Expo go go method because it's the easier one and basically the process is same for the both apps so let's just copy this command into the terminal and name our app react native loty and hit enter now this is going to take a couple of seconds to load all the boiler plate code so let's just wait now it's finished now we can close this terminal and I've already opened the project into vs code so let me just drag that here let's make it full screen and the first thing we're going to do is run our project so let's run R npm run IOS command and while it's running let me just drag my iOS simulator into the window let's make it full screen and adjust it to the same window like this okay so our application is running and you can see the app.js component which is the default component in the iOS simulator we're going to make some changes to the Styles starting with with the justify content we need to change it to space around and let's add a vertical padding of 100 okay and we need to add a styling for the text because the text is very small and we can barely see it so let's add a font size of 40 and let's give this style to this text okay now it's big and we need to change it let's rename it to react native ly animations like this okay so now we're going to find the ly animations that we going to use in our application and for that we need to go to ltif files.com this is the website where I usually go to find the ly animations if you scroll down you will see here a comparison between a gif animation and a ly animation you can see the GF animation has a bigger size and the quality is not good so they also recommend to use ly animations so let's discover more animations by the way these are all the animations that you can use in your apps and we're going to use a library that will be used to display these animations this is Library loty react native so let's just install this into our application let's open the terminal and paste the command here it's going to install it and it's finished now let's close the terminal now let's find the animations that we will be using in our application so let's go to notifiers and here search for the welcome animation and uh here you'll find a lot of Welcome animations that you can use in your application but we'll be using this Robo icon and the way you can use it first you need to save it to your workspace to be able to download it and uh to be able to save it to your workspace you need to log to this website and this will take you to this page where you can modify this icon you can make it transparent or you can have a totally different background color it's up totally up to you but I'm going to leave it as default and here at the top you will see the download button if you press it you will see the ly Json download option you need to download it this will be a Json file that we'll use in our application so let's download some more animations for application let's search for a heart like button and we will see a bunch of hard animations but the one we are going to use is at the bottom this is the icon that we're going to use I've already downloaded it so I don't need to download it again let's search for another icon which will be the gift icon let's search for it and here you can see a bunch of gift animation but we going to use this one I've already downloaded this item as well so let's move to our application and start using them uh first let me copy and paste the icons which have already downloaded let's space them into our assets folder and these are just a bunch of Json files that we're going to use and with the help of a library that I showed you before we can display them like an animation so let's see how we can use that library library was uh lot react native and we have already installed this so first we need to import the library and then we can simply just pause the source of the Json animation so let's copy the import statement and uh then let's copy this animation code here uh first let's create a view and give this a style of welcome and let's close this and paste the code here now let's define our welcome style let's add welcome and give this a height of 300 pixels and let's ose the aspect ratio as one okay now we need to replace this string with the path of our animation so it's in the assets folder and the animation name is welcome let's save this um maybe we need to reload our server uh oh yeah we need to add style for the slty view as well let's use flex one okay we can see the animation and it's looking beautiful and the next thing we're going to learn is how to make these animations interactable so we can click on it and it will behave like uh we are controlling it so let's create another view and give this a style of Icon row we'll be adding two icons in this video view so let's add a pressable here we will add a gift box so that when we press on it it's going to explode and uh uh let's add styles for this icon row and icon let's add icon row and here we need to specify Flex direction as row justify content as space around and align items to Center and and for the icon style let's add a height let's add a height of 200 pixels and aspect ratio will be one okay now let's copy this ly view code for our welcome icon so let's just copy it from here and paste it here now we need to change the icon path and I've already stored it it's called the gift I think let's save it um these files don't exist uh maybe we misspelled the name okay it's the gift box so let's change it to gift box and save it now you can see we have our gift box animation and it's animating again and again so to be able to change it we need to make a reference of this animation so let's add gift ref and we going to use hook use ref let's pause the reference to this Loy view uh actually it's gift ref so let's change the name gift ref now let's define a use effect hook to be able to control it when the component mounts so let's define it and let's add an empty array of dependencies and uh first we need to remove this Loop and autoplay properties and this will make it a still image Now using the reference of this ly view we can play this image and using the play function on this reference we can play certain frames of this image so let's let's say I want to play 0 to 100 frames for this icon and you will see as I save it it's animating from 0 to 100 frames and it's animating again and again so let's disable the loop functionality let Set The Loop to false now it's only going to animate once so let's say I don't want to animate it on Mount I want to animate it when I click on this gift box so let's create a function open gift and this is going to animate this gift box Let's uh use the gift reference and the current object let's use the play function and if I just use the play function without any frame this is going to play the animation fully so let's add on press method on this pressable now when I click on this icon it's going to be animated and just for once because we disabled the loop so let's click on it and it's animating and the BX box explores it's a very cool feature to have in your app where you want to give gifts to your users so you can implement this feature okay it's looking cool now next we're going to add another example of a Twitter like button so let's just copy this pressable one more time and here we will change the on press method to handle like and the gift icon will be hard icon uh handle like doesn't exist so let's add handle like function this is going to control if the like button is pressed or not so let's save it for now now we can see the hard icon and it's not animating because we are still using the gift reference so so let's add a heart reference I use ref uh we need to pause null by default so let's do that and let's pause this reference to the Loading animation with the hard icon okay and uh next we're going to animate this when we press on this icon and we can do that in our handle like function so when this function is executed we need to play the full frames of this animation so let let's use the hard reference current object and play and this has the frames between 0 to 144 now when I save it and press on it it's going to animate in full frames you can also just use the play function without the frames and it will play all the frames but I want to show you that you can control all the frames in this animation now we want this icon to behave like a like button like just like a Twitter like button so let's create a state that that will preserve if we clicked on this button or not and by default this is going to be false and let's use this liked state if the button is liked already and user presses this button then we going to reset the animation using the reset function on this reference otherwise we're going to play the full frames of this animation so let's just paste it here okay all done now when I click on this button it's going to be animated and it will stay red there is a delay when starting the animation so let's start the animation from 30 frames okay let's try it okay now it looks good now if I double click on this animation it's going to reset to its initial stage but it's not it's uh because we never toggled the light state so at the end of this IFL statement we need to toggle this light State we need to set it to the reverse liked value so if it's true it will make it false and if it false it will make it true so now if the button is liked already and you try to press it it's going to reset the animation to its initial stage and it's working perfectly so with this our application is complete and we have learned about how we can use looty animations in our application and even more we learned how to control this animation and how to control the frames and how much frames you want to play for each animation I'll leave the link of the GitHub repo for this project into the video description so you can check out the code or maybe give it a store so if you find this video helpful do like the video and subscribe the channel if you still have any questions about anything you can ask them into the comment section and I'll try to answer them as soon as possible so this is it for this video see you in the next one

Channel: Code With Nomi

Views: 9,866

Keywords: react native tutorial, react native ui design, react native tutorial for beginners, react native app, react tutorial, react native project, react native crash course, learn react native, react native ui, react vs react native, react native, react native expo, react native for beginners, javascript, react native animations, react native vs flutter, ui design, lottiefiles, react native design, lottie animations, lottie animation, react native lottie animations, ios dev, lottie

Id: oOdaiXDM2ew

Length: 14min 1sec (841 seconds)

Published: Tue Dec 26 2023