React Native | Custom Animated Tab Bar | React Navigation | Reanimated 2 | Lottie

hello and welcome back in this video we will create together a custom tapa after this beautiful design i found on pinterest and published by purewood on the left you can see the ui animation and on the right what we are going to code now we start by creating a new react native project the comment i use can be found as always in the video description now let's move into our project folder the next thing we're gonna do is install all the required packages again the comment is found in the video description don't forget to install ports on ios as part of the react navigation installation we are gonna edit the main activity activity.java in the android folder as part of the react native free animated installation we need to add the react native reanimated plugin to our bubble conflict js another part of the react native free animated installation is to add some proguard rules to our build now we are finished with the installation process so let's start up our application okay our application finished loading so let's clean up the ftsx file now let's set up our navigation logic now let's set up these styles i'm not going to go over them in detail the only interesting thing here is the negative margin the negative merchant basically enables you to place a child out of the parent's boundaries now let's set up our animated tipper now the next thing we do is to design the svg for the background of the active tip you don't have to do that because i'll link the file in the video description but if you want to have a different background i'll show you how to do it now there are many ways to do it but i use stigma as an example to convert our svg component we just created in figma to a valid react native svg component we use these two sites here i linked in the description so first of all we upload that here then we copy this svg component component here and then go to the other side um paste it in this bar here now make sure that react native is checked and then we can copy the svg component from the right side and use that in our code now let's include our newly created svg component into our animated tab bar apply some styles to it in the view box and then change the color so it matches with the color of the placeholder screen let's see how that looks okay this is mr arrow that's how it should look now the next thing we do is to destructure all the needed attributes from the props we have turned it to our animated tab bar now we can map over all the routes and assign them an element on the tapper let's create our tapa component it should look like this and you can navigate between all the different screens when clicking on one of the components now we need to save where on the x-axis our temper components are in relation to the screen so that we can animate our tapper background there later we can do this using the on layout function which gives us various information about the position of the element in question so we get the xx position and stored in the state using react's use reducer function now let's see what the results look like now that we have the position of the tipper components we can animate our active background we calculate the x offset of the active background based on our data about the positions of the temper components and the index of the selected tab we get from the props we can only do this calculation when we have all the information about the position of the components then we can create an animated svg component and pass the animated styles to the component that is how it should look like now let's animate the size and transparency of each component based on the selected tab for this we check if a component is active and calculate our animated styles based on that at last we pass the styles to the components views let's see what it looks like now it's working the last thing we need to do now are the icons if you don't want to have animated icons you can skip the next three steps for the animated icons we use lottie if you can't find a suitable icon at lottie files you can create your own animated icons for example we will create one of the icons for this video in a moment but you can also find them in the video description if we don't want to create our icons from scratch in a design program we can search on open source sites for icons we can use for example i don't want to create a settings icon myself so i search for a suitable icon on iconify once we've found one we downloaded and import it into our design program to edit it in this example i'm just gonna change the color which is not really necessary but there are plenty of other things you can do with these icons in your design program but for the sake of this tutorial i'm not gonna show them now after we set aside with our icon there are two ways to create a lot of animation from it we can use the dope after effects which is paid or haiku in this tutorial i use haiku as always you can find the link to it below in the video description so let's import our g svg place that on our main i'm gonna change the size to a 100 also if you change the size to 100 you should make sure that the svg itself is also 100 times 100 pixels now i want my animation to be half a second long since we have 60 fps per second that means my animation will be 30 fps long we're gonna add a rotation set here with a zero radius on frame 0 and then we go to frame 30 which is equal to half a second and let's change the rotation to 12.566 which is roughly 4 times p so our g will rotate two times in 30 seconds now that's the whole animation now we can export the animation as qualifier and then you can save it somewhere and we could use it in a moment now if you have all the lottie animations together that you wanna have we can import them into our project folder now that we have all our lottie animations together we can pass the icons to our tab screens for this we use the lottie component and pass the path to our animations our source we set the loop defaults because we don't want the animation to repeat infinitely we implement the reference in a moment then we get the tapper icon from the options and pass it to the tapper component now we create a reference for the icon and pass it to the function we get from the options that uploads the icon the last thing we need to do is start the animation when the component changes from inactive to active state this is achieved with a use effect now that's it with this tutorial if you're satisfied with the result let me know in the comments give feedback or consider liking the video if you have any problems or questions feel free to ask if you want to see more videos from me in the future subscribe to the channel and give me video ideas thanks for watching

Channel: Maximilian Dietel

Views: 30,657

Keywords: React Native, Reanimated 2, Animated Tab Bar, Custom Tab Bar, Custom Animated Tab Bar, Lottie, React Navigation, React Native React Navigation Reanimated 2 Lottie

Id: nyZnGQ8HrDw

Length: 10min 24sec (624 seconds)

Published: Thu Aug 25 2022