Animated Loader in React Native | Lottie Animation Tutorial

[Music] [Music] hey guys welcome back to my youtube channel today in this tutorial i am going to show you how to implement an animated loader in our react native app so as you can see over here this is our food finder app and if we reload the app then we are presented with this beautiful animation and this animation is present while our app is loading right now if i reload this app from our phone memory and reopen it then we can see that our app is loading and we are presented with the home screen of our app now if i sign out from our app and remove it from our phone memory and reopen it then also we can see the animation and after that animated loader we are presented with this login screen and all and here we can login to our app and i have already shown you how to create all this login screen sign up screen and other screens of the app like this notification profile home screen this drawer and all so if you haven't seen all those tutorials yet i would highly recommend you to check the tutorial playlist you can find that playlist from the i icon or i will provide that link in the description below now i want to thank you that some of you guys already noticed this animated loader and requested me to create a tutorial of it while i have shown you this on my first tutorial of this tutorial series and it was only for a few seconds so i'm really glad that you guys are paying so much attention to my tutorials and i'm really happy to have you as my subscribers so thank you all now without wasting any more time let's get started with the tutorial [Music] so this is our app in which we will implement this animated loader and this is our home screen and this is our home screen.js file but we are not going to implement that loader in this home screen.js let me show you we have already implemented a loader in our app now if i reload this now you can see there is a loader right but that is not the loader which we want and that loader is present in our auth stack so for that we need to go to this app.js file over here we have implemented main navigation and authentication and i have already shown you how to implement this authentication and all in one of my previous tutorial which is part of react navigation version 5 tutorial series so i will link this tutorial in the description below or you can find that from i icon as well so our food finder app is using the react navigation version 5 and the foot finder app functionality so you need to check these two series to get the clear idea of the app now on that authentication tutorial i have implemented this login state and in this login state we are checking is the login state is set to is loading or not if it is set to is loading then we are returning this view and this view is holding this activity indicator and as you have seen that while we are reloading that time we are displaying the activity indicator right now we are going to replace this activity indicator with our custom animation to implement that custom animation first we need to install this package and this package is called lottery react native or lottery native i'm definitely sure that i have pronounced it wrong but you got the idea right so we need to install it and to install it we can use this command so here i paste this so it has been installed now let's see what we need to do so for the ios we need to do this pod install and for that we need to go to this ios directory and over there we need to do this pod install so it has been installed now go back to root directory now let's see what we need to do for android for ios we don't need to do anything and here we have this another important notice that if you have any kind of issue linking the ios project then you can follow this stack overflow thread over here they have provided a link now for this android we need to configure these things so we need to add this line to our main application.java file so here within this main application.java file we need to add this import and then we need to add this package within this get packages so before returning the packages we need to add it right now save it now after that we need to add this line within this build.gradle file so within this app directory there is a build.gradle file and over here within these dependencies we need to add that now save it now after that we need to add these two lines within our settings.gradle file and that settings.gradle file is present within this android directory so here i have added it now save it so these are the configuration for the android right now we can close all these files now we can use it so to use it first we need to import this view from this package and then we can return it and we can see the source of it is a json file so we need a json animation for it and we can get json animation from this website this site provides various kinds of json animation so you can find different kinds of loader over here you can find different kinds of animations which you can use in our app so here we need to search for the animation which we are looking so here we can see the animation which i have implemented so this animation i will take so here we can see the animation and we can see the download button so here we can see various kind of format available for download we will download this json and before download you have to create an account over here and that is free you can create the account over here for free and you can download the animations for free as you can see they have mentioned over here right so i have already created that and i have already downloaded it and i have added it to my assets directory so here you can see this stay home stay safe json file right now we can start implementing it so for that first we need to import this so i copy this code and paste it here and now we can return this view so i copy it and paste it here and for the source we need to provide the source of our custom animation and that would be within the assets we have this json file now save it now after saving it as we have installed our third party package now we need to close this metro bundler ui and recompile the project okay we have an error we have to remove this semicolon now let's save it now for a few moment we can see that our animation is present over there but our animation didn't finish because this is loading state is set to false before this animation completes so we need to increase the duration to change the is loading state here we need to increase this time and it will be 3500 millisecond now save it reload this app now we can see our animation properly so this is for the ios now let's check this for android as well so this is our android emulator now here let's check this app so here we can see that our animation is present right so for android also it's working perfectly so that is it guys this is the tutorial i hope you have learned something new from this tutorial if you do so hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 75,777

Keywords: react native, react native tutorial, animated loader in react native, custom animation in react native, loading animation in react native, loader in react native example, loader in react native, lottie animation, lottie animation in react native, lottie react native example, lottie react native animation, lottie react native, can it be done in react native?

Id: mZXCOdIFg6Q

Length: 9min 33sec (573 seconds)

Published: Wed Sep 02 2020