React Native Animated Tabs & Animated Indicator using FlatList

hey guys and welcome back to my channel in this video we will create some dynamic tabs in react native walker actually posted this question on the discord channel and i give it a try and this is what we are going to build and we are going to use a flat list in order to have this cursor type and the list of items and the underline it's going to actually modify the width based on the active slide from the flat list in order to do that i'll show you some tricks for layout measurements and how to actually achieve this so let's play the intro and jump straight into this code and start building these dynamic tabs plus a flat list shall we all righty guys so we are in vs code here um i've already created a boilerplate using expo the link to the starter code uh it's down in the description so whatever you see now on the screen you'll get it from the link specified there i also specified it here but you can follow up the link download the source code or inject your this code and start along with me so let me walk you through what we have so far we have an images uh object here with some different keys man woman kids call candy and help each one has its own image assigned to it and then we have a data that's iterating over the subject keys and get the key title and image so nothing fancy and first let's start by building the carousel itself so first i would like to need to get the dimensions and flat list and also animate it and from the dimensions we'll need to take width and height from dimensions get screen right cool and down below let's remove the text we don't need it anymore and we'll have let's directly call this animated flat list we'll have data data key extractor item and item key and the render item is going to be item and here we'll display a view so return a view inside the view will have an image right source uri it's going to be item image and we'll have some style and we'll have this flex one and uh resize mode of color all right image is not defined let's import the image [Music] okay and we have this image right this is not visible mainly because the wrapper or the view in our case doesn't have any width or height so let's assign this to be width and height so basically it's going to stretch the entire screen of the of the mobile mobile screen right and now this is vertical let's make this horizontal also show horizontal indicator is going to be false and to make this carousel we can enable the paging and it's going to snap directly mainly because the item within the flat list has the screen width so we don't need to scroll to interval but we can directly enable the paging and i will also like to remove the bounces so this is the bounces right i like to remove this and now bounce is false sorry all right so there are no bounces along with the image we can create a dummy dummy backdrop right so we'll have a background color actually this is going to be positioned absolute stylesheet absolute fill object and background color is going to be black or let's do directly here gba00 0.3 all right now we have the slider also since this is an animated let's create here a scroll x which is a react user f new animated ap value starting from zero get the current the reason why why i'm do using use ref and not state or other stuff is because react will keep this reference and whenever the component is going to be is going to be re-rendered or is going to receive new props this animated value is not going to be changed which is really important and it's performant anyhow and with this scroll x we can get the on scroll event which is an animated event and here we'll get from native event the content offset will get the x and assign it to the scroll x and importantly for this particular tutorial will not be using the native driver mainly because the indicator or the tabs indicator is going to change its width and use native driver it's only working for transforms and opacity so for width unfortunately it's not working and with this in mind nothing should change uh scroll x now it's actually modified based based on the scroll position and along with the flat list let's create here some tabs pass the scroll legs and data that's data and for the tabs create the tabs components or cones tabs it's equal to method get the data and scroll legs and it's going to return a view and in inside the view we'll have another view for the tabs so this is the tabs and here we will iterate over the data map item will return here tab pass the key as item key and pass the item as item and the tab create it here so tab it's going to receive the item and it's going to return a view and the text inside with item title right all right so this is visible here and let's position the the entire view absolute so let's style this uh positioned absolute will get the top of 100 so this is going to be here it's not visible so let's change the the color white all right this is visible now and for the wrapper what i like to do is give this different style as well so we'll justify the content space evenly right nothing is happening because this one should have a width actually the width is going to be here and this one should have a flex one maybe oh you know what the reason is because we need to flex direction row all right so now this is working this is beautiful let's give it a background color red so you'll see it right uh without this one it it will still take the entire space but we like to modify the flex direction to be raw all right let's remove the red and style just a little bitty items here so i'll save this as a font size and uh decrease and decrease the font size based on uh data length so it's going to be 84 divided by data length let's see how this is actually looking nice looking okay and the font weight is going to be bold will transform the text to uppercase all right and now if i go here and remove this help it's going to increase inside skull candy as well all right so this is looking pretty good and so this is everything plus i like to create the indicator so indicator here down below and indicator is going to be a component so cost indicator it's going to receive nothing for now but it's going to return a view and this view is going to be positioned absolute as well so style position absolute we'll give this a height of four maybe right width let's say 100 for now and the background color of white all right and bottom is going to be maybe -10 yeah this is looking really good so we will change this indicator with don't worry about it for now so we have all the designs in place the first thing that i would like to do is get the measurements for each particular tab and in order to do that we need to use measure layout plus find node handler from react native so let me first create a fine note handler from react native and in order to get the the measure layouts we need to forward the ref or to get the ref for each particular tab and when the tabs component is going to be mounted we will iterate over each particular reference for each particular tab measure the layout based on the parent container and assign it to the state so in order to do that first thing first create here a ref for each particular item so when we create the items create here ref so react create ref so instead addition to key title and image we have a ref for each particular item secondly when we iterate over the data let's pass here the ref so it's going to be item ref and this tab should be a react forward ref get the ref as well and here have wrath of wrath all right so nothing is changed visually but now we have access to the to each particular tab ref and we can measure the layout so in order to measure the layout here inside the tabs we will use the effect and we will iterate over the data for each data we'll get the item and item we know that we have the ref and get the current and we can measure the layout and this measure layout you need to specify the relative node where to measure right it's either the window the screen size or a particular container and in our in our case we would like to measure the layout based on the this view right that contains all the tabs so in order to do that we need to create also a ref for this container as well so here we'll have construct it's equal to react to use ref and pass this ref to the measure layout so measure layout is going to be container dot current right and now uh there will be like two different methods one the first one is the success and the second one is the fail so here on the success we'll get the x y width and height so this is let me do this differently all right so we measure the layout based on the container and get the x y width and height on the success and now we will do some something i don't know let's console.log for now x y width and height let's open up the console here and now when i hit save you'll see that for each particular item we get some values like layout values layout measurements x y width and height and with those in mind let's create here before doing anything measures and also the state so measures and set measures it's going to be a react use state with an empty array for now and let's define this differently so when we will get all the measurements we would like to set the measurements with the measurements that we have right and here we create an empty array and we will populate this empty array uh here inside the unsuccess callback so we'll have m push and we will have we can define this as a left it doesn't matter and we'll have the x y width and height now to set the measurements we will check if the m length uh it's equal to data length meaning that we are at the last measurement right we would like to set the measurements with the with all the measurements now if i cancel log measures and open this okay this is complaining because we would like to run it only initially right so as you can see we have we had an infinite loop because this one is going to set set set measurement set measurements over and over again so we would like to run it only once basically right and we have height with x and y which is amazing and with those measurements we would like to send this to the indicator so first we would like to check if measures length is greater than zero then we would like to display the ma the indicator right and here is a prop we'll send the measures and the scroll x which is scroll x now if we go to the indicator now we will get the measures measures and scroll x and what we would like to do first transform this animated view to be an animated view and we like to play with the with and translate so let's assign actually left zero just for the sake of this demo and let's see what will happen with the if we pass the measurement measurement the the first element so we'll have left zero left it's going to be x and width is going to be with so this is what will happen if we pass the second one fourth one and last one okay so this is those two uh values we will be playing with based on the scroll x so we will interpolate scroll x right so let's uh do zero for now and zero we don't care about the width because we would like to display it based on the scroll x so here yet create the input range so input range is going to be zero with with multiplied by two with multiplied by three based on data and in order to do that we can get the index from the from the data so we map through the data and here we'll say i multiplied by the width okay so this is our input range basically zero with with multiplied by 2 and so on and with this we can say indicator with it's going to be scroll x and we'll interpolate we'll pass the input range and for the output range we'll pass the measures map measure and we'll get the measure width right and we can pass this measure with here so now if we change the uh position of the slider you'll see that this this indicator is changing the width but we also need to translate it properly and we'll use the transform translate x and translate x is going to be almost the same thing as indicator width but this time we will get the x value hit now hit save now you'll see when we change the flat list position this indicator is going to be also modified this is looking really nice so we took the measurements for each particular tab we assign it to the state of the tabs we used find node handler to get the parent reference and we've modified the indicator with and translate x based on the position of the flat list the last part is to actually press on this button and to go to that particular slide carousel right and to do that we will need to create here inside the main app uh const on item press which is a react use callback we will receive the uh index or the item index so basically when we press on kids we will get uh index 2 and so on so forth right and based on this one we need to get the reference of the flat list and scroll to offset so let's get this one here ref okay create a ref it's a react use ref and here inside the on item press we'll get ref current and we'll scroll to offset and the offset in our case is going to be item index multiplied by the width and the reason why we are multiplying by the width because this is the width of the slide if you have or if the slide with if you have an example rather slide if it's different or it doesn't have the same uh width of as the screen you can pass this here as well so it's going to scroll to exactly to the particular item so now nothing nothing should change because we need to pass this on item press to the tabs so tabs is going to receive the item press go to the tabs get the item on item press and now for the tab we also going to pass for each particular tab right so on item press this time is going to be a method that's going to call on itempress based on the index and get the index from the data map and now the tab now the tab is going to get the item press and we need to wrap everything into a touchable opacity is this one imported no so we need to import touchable opacity okay so touchable opacity on press is going to have uh on item press great so now we we are at woman right but when you press on skull king is going to go there all right that was it guys thank you so much for staying so long with me i hope that you've learned something new you've learned how to measure the layout in react native based on the parent container you also learned how to create these dynamic tabs based on the flat list items if you have any issues don't hesitate to leave a comment down below i'll do my best to answer all of them and help you as much as i can also don't forget to subscribe smash the like button double smash the dislike button see you in the next video thank you so much bye bye

Channel: Catalin Miron

Views: 31,358

Keywords: react native advanced animation, react native flatlist animation, react native animation, react native carousel animation, react native animation tutorial, react native flatlist, React native flatlist horizontal scroll, react native tutorial, react native tutorial for beginners, react native flatlist pagination, react native, react native parallax scroll, react native tabs, react native tabs indicator, react native measure layout, react native tab bar animation

Id: ZiSN9uik6OY

Length: 23min 58sec (1438 seconds)

Published: Tue Nov 03 2020