Simple Animated Tabs in React Native with React Native Reanimated

hey guys welcome back to my YouTube channel today in this tutorial I'm going to show you how we can create this tab animation by using react native reanimated so here you can see this is the tab animation and this is a pretty simple one which is also a pretty useful one you can see this kinds of tab layout and this basic animation in many apps so this is what we are going to create today in this tutorial so if you are interested in this kinds of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification Bell icon so that you get notified whenever I post a new tutorial on this channel so without wasting any more time let's get started so here I have created an expo app and here you can see I have this index TSX file within this app directory and I have just this safe area View and this text now here I'm going to create those tabs but before that I want to install react native reanimated in this project so for that here here let's click on this get started and here we need to install that so here I will go to this expose section and I'm going to copy this one and let's close this server and here let's paste this now it has been installed after that we need to use this code in B.C config.js file so here it is after this presets I need to use this plugin now save this and after that we don't need to to do any more thing so here we need to just clear the Metro bundler cache so let's copy this one and here start the server by clearing the cach okay so it has been installed now we can start creating our app and for that first here I'm going to create a directory called components within this let's create tab screen. TSX and another one called tab buttons so these are the two I have created now for the Tab screen let's import that here so here we can see that it is imported now here we are going to create the Tab screen and here we will have the tab buttons so here I have provided some basic code for this component and with that here let's create a type called tab button type and here we will have title which will be string type and we can export that so that we can import that in other files such as in this Tab screen within this Tab screen let's first create a state called selected Tab and we can set it by this set selected Tab and here we need to provide a default value and to provide that I'm going to create an enum called custom Tab and I will provide tab one and and tab two and let's export that so here it will be by default this tab one value and let's provide custom tab here and then let's create buttons and the buttons will be array of tab button type so let's provide the array and here we need to provide the title so for the first button title I will provide tab one and for the second one I will provide tab two now let's here import our tab buttons component and within this tab buttons component we will pass these values this button selected Tab and set selected tab so let's provide buttons selected Tab and then set selected tab so as we are passing this props we need to accept those here in this tab buttons so here let's create the type tab button props and here we are going to accept buttons and it will be array of this tab button type so it will be this which is this one right we will pass this const button by this so we are accepting it here now then after that we will have selected Tab and that will be type of number and then we will have set selected Tab and this one will be a function which will set this selected tab right so here in this function we will pass a index value and that will be number and this function will not return anything so that's why it will be wide so here we have this tab button props and let's accept this button selected Tab and set selected Tab and now here let's create the tab buttons and for that first I will have dimensions of the buttons which means height and width of the button and that also we need to change later so that's why I'm providing set Dimensions also and let's store those values within a state so here for the dimensions height I will provide 20 and for the width I will provide 100 and these Dimensions will be helpful to animate the tab now let's create the button with constant and for this I will provide this Dimensions with by buttons. length and these buttons are the buttons which we are passing here so that mean this one and here we have two button tab one and tab two right now here for this view let's provide some style first I will provide a background color which will be this pink color then provide a border radius of 20 and then I will provide a justify content Center and for the accessibility role of it I will provide tab bar because this view will hold the tab buttons now within it let's create another view and for this view style let's provide Flex Direction row and within it let's map through the buttons and for it let's return press and let's provide the button title within the text for this press let's provide a key because we are providing the list of items from this button are and then let's provide some style here Flex one and padding vertical 20 now let's save it so here after saving we can see we have this tab bar section and we have these two tabs which are these now we can click C on this but we are not getting any feedback so let's provide some feedback here and for that let's create a color which will be dynamic that mean it will be changed based on the selected tabs let's check the selected tab if the selected tab equal to index then we will provide this color otherwise it will be white so here for this text style let's provide this color so here this this first one is selected so if the selected tab equal to index it matches then it will be this color which will be similar to background color right so here we have provided the selected tab as the tab one right so let's change it if we are changing it to tab two then it will be changed like this let's provide more style for this text align self Center font weight 600 for the font size I will use 14 it's looking good now I want to provide another view which will be above this view which will be the background of the tab let me create that then it will be clear to you let's provide style for the position of it I will provide absolute for the background color it will be white then for the Border radius I will use 15 for margin horizontal I will provide five then for the height of it I will provide Dimensions height - 10 and for the width it will be button width Min - 10 so now for this view let's provide on layout and let's pass here on tab bar layout and now let's create that and here we will accept an event and and it will be type of layout change event and that needs to be imported from react native and when this layout changes that time we need to set the dimensions so we need to set the height and width so here let's provide the height so here it will be the height and for the width we will have native event layout with now save it to see the updated change let's reload the app now we can see that the height and width of this view which is this white background which is denoting this stab button this is updated and this updated by this Dimensions value and this Dimension value is getting updated by this on table layout so that's how it's working so by this Dimensions height and width we have calculated the height and width of this button as the design of the T is completed now we need to focus onto the animation of it so let's provide the animation and let's work on it so for that first we need to create tab position x value and it will be a shared value and by default I will provide zero for it and this use shared value needs to be imported from react native reanimated and then here let's create on T press function which which will accept a number and it will change the value of this step position X and to change it I will use with timing function from react native reanimated and this one also needs to be imported from it now let's provide some values for it so here first I will provide this button with multiplied by index for the value of it and then for the configuration I will not provide anything and for the call back of it let's provide run on JS this one also needs to be imported from react native reanimated and pass a function here and that will be handle press and in this function we need to pass the index value so here let's create that handle press and here let's set selected tab as index which we are passing here now let's provide this ontap press for the on press of this pressable and let's pass the index so now we are passing the value and updating it now we need to provide the animation and we will provide the animation for this white background this will move right and that is this one this view so this needs to be animated this needs to be animated view so we need to import animated from react native reanimated and it will be animated. view so I have imported it now let's create the animated style and then we can provide that style here so here let's create animated style and it will be use animated style and let's provide transform style for the translate X let's provide T position x. value and here let's provide that animated style for this animated view now save it after that let's reload the app and now let's test it so here we can see the animation right so our tab animation is working perfectly well but we don't have any tab content so now let's provide that and to provide that we need to go to this Tab screen and here after the tab button let's create a view for the style of it let's provide Flex one margin top 20 align item Center so here is the content so this text will be the content and if we want to provide some other component that also can be provided here instead of this text component and let's check the selected tab if the select Ed tab equal to custom tab one then we will return this tab content and it will be tab One content otherwise it will be tab two content okay so now let's see so as we are changing the tab our content is being changed right and here let's provide St so here we can see it properly right so that's how we can create our custom Tab and provide a simple yet effective animation to it by using react native reanimated package so this is the tutorial guys I hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and don't forget to share this tutorial with your friends and colleagues and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 3,503

Keywords: react native tabs, react native tabs view, simple animated tabs in react native, simple animated tabs in react native with react native reanimated, animated tabs using react native reanimated, tab animation with react native reanimated, custom tab design in react native, basic tabs in react native, simple tabs in react native, basic tab animation in react native using react native reanimated, simple tabs with react native reanimated, react native reanimated tabs

Id: POMaQqGu8bo

Length: 14min 40sec (880 seconds)

Published: Tue Apr 30 2024