Advanced React Native FlatList stack carousel animations at 60fps

hey guys and welcome back to my channel in this video we will create some advanced flat list animations i was inspired by divan he created this beautiful stack carousel animation and i'll show you my way of doing it in react native by using animated api flat list and fling gesture handler from react native gesture handler package we will use flat list to render the poster because it's it's really performant but we'll disable the gestures and use the fling gesture handler instead i will show you how to create the stack effect by positioning the items absolute and modify the cell item renderer i will walk you through how to create this reactive type of animation where two different animated value will change each other and i prefer to call it interconnected animations and we are also going to create some flicker type of animation that i already walk you through in a previous video before playing the intro and jumping straight into vs code i would like to thanks to tales toyinski and learning consultancy for supporting this channel buying me some coffees and by the way if you'd like to support my work and you like this channel the link to buy me a coffee and paypal is down in the description now without further ado let's play the intro jump straight into vs code and start building this beautiful stack carousel animation alrighty guys so we are in vs code here and i've created a project using expo and i've also added couple of data to work with so let me walk you through what we have so far we have a data constant here something that will contain a title location date and a poster image the posters are great from creative flyers so if you'd like to buy one that you like you can you can go ahead and follow up the link and i also have created a component called overflow items that will create this flicker effect right while scrolling through the items and basically what it does what it is it's it's a view that has a fixed height of 70 points here and overflow hidden and inside we have a larger item that we can move upwards or download downwards based on the active slide index right and here inside the app uh we have um we've wrapped the entire application into a safe area view and we render the overflow items and this is what we have here as you can see from the right hand side and if i'm commenting out the overflow hidden you'll see all the list of items grabbed from the data and displayed i've already went through this uh kind of animation or this kind of container a link to this video will appear somewhere on the screen and if you like to learn more about it you can follow up the link and now what i would like to do is to create the flat list and render the items like the posters inside so let me go here inside the render and do flat list and create the data data pass the data key extractor i'll have a item and index and i'll grab only the index from it and i'll return string and index and we'll have a render item and here we will get the item and also the index and we'll return here a view containing an image and the image will have a source uri its item poster and let me place apply some styles and we'll have a width let me scroll just a little it's item with and height its item height and those constants are defined here on top the width is 80 percent of the screen width and the item height it's 1.7 uh 1.7 multiplied with the item width so we create this portrait type and now we have this this item right this this list of different posters and in order to create the stack we need to first position them absolute so they will sit on top of each other like a stack view right and we need to pass multiple types of props to the flat list so let's let's start with the flat list itself uh i would like to make this horizontal right and i would like to invert the item so they will start vice versa and also apply here style position absolute and now inside also do a content container styles and i'll do a flex one i'll also justify the content to the center and i'll also like to add just a little padding so space to breathe here okay and the item is not positioned properly so let me offset it with half of its own width so left it's minus item with divided by two so we center it and as you can see uh now because how this set index is working basically as deep as you go into the tree uh the bigger that index is so we would like to uh invert the z index as well and in order to do that inside the flat list we need to change or mutate the cell item renderer and here in the flat list we can pass a cell render renderer component and this cell renderer component is gonna receive also the item index children style and then the rest of the props right and inside we we will render a view containing the children and pass the style index and the rest of the props nothing should should change right we have the same the same behavior but now that we have access to this view basically the cell renderer component is the wrapper for the render item and we would like to change the set index order and let me create here a new style and pass the style and also the set index so flipping the z index will start from data length and decrease index and decrement it by an index so data length minus index and apply this style so new style here and now we have we have the first uh the last i the the first item is the it has the bigger the biggest set index right and we said that we don't want to rely on the flat list uh properties or flat list gestures right so we would like to disable the scroll so scroll enable it's false and we would also like to say remove clip subviews to false to make things visible or to make items visible on android as well now hit save and we don't have any any scroll here so the the next thing that in order to to to build this uh stack we need to create a so-called uh interconnected animations or let's uh let's define it like a reactive animated value so let's go here on top and how how this is working let me first create the code here so we'll have a scroll x index right which is a react use ref and then a new animated value starting from zero and we'll get a current and duplicate it and assign it to one scroll x animate it right and what i would like to do is to change the scroll index based on the active slide right but animate only this scroll x animated or to make scroll x animated this value reactive to the scroll x index modification and in order to do that here when the component did mount so will mount will have a use effect and here we'll create an animated spring and we'll change the scroll x animated and modify the two value to be the scroll x index and we'll use the native driver for this one and we are also going to start the animation and what this is basically saying is whenever the scroll x index value will change i'll animate the scroll x animated using the spring method to that particular value so this is more like a reactive property right and with with this one we would like to wrap the entire application here into a fling gesture handler so we will have also the direction to the left and to the right and when when this gesture will be active or we will we would like to change the scroll index and now that before before doing that because we have now the uh scroll x index we can also create the stack only the stack uh styling so if i'm going here to the render i can create here an input range so an input range is to be index minus 1 index and index plus 1. basically this is the next item current item and previous item and with this in mind i can also create a translate x which is an scroll x animated interpolate and will pass the input range and also the output range and for the output range i would like to when it's the next item i like to shift it shift it with 24 pixels or let's apply more 50 pixels 0 when it's the current so basically this is the active slide right and then i like to shift it minus 100 so it's gonna ah is gonna go or it's gonna move outside of the of the view and let's copy this one and apply the same for the scale but this time i would like to make it 0.8 scale one when it's active and then scale it scale it scale it even more when it's going outside of the screen so it's creating it this uh scaling out animation and because we are uh we are we we have an input range based on the index here this one will also apply to the next item so it's gonna shrink down for the rest of the list and if i'm applying those styles to this animated view so let's convert this into an animated view and pass here the transform will have a translate x and also a scale if i hit save now you'll see that we have the this is the first item right the next item will be uh 0.8 scale with a translate x 50 then the next one will be again 100 compared to the first item and then scale 0.6 and so on so forth and also we can apply a different opacity so if i'm copy pasting this one and make it opacity this time i would like to make a particular set of items visible on the screen and for that let me create here a constant called visible items and i like to start with three items so only three items will be visible and to make this trick happen first i like to change the opacity based on the index right so we'll say one minus one by uh divided by item visible items one and then zero and this one will decrement each particular item with 0.33 or 1 what's the result of one divided by visible items and if i'm applying this opacity to the item you'll see that now we have only three item visibles and the rest are not are not visible at all so this uh with this in mind we can go here i think that the the scale here is too big so let me shrink down the scale just a little yeah it's it's even better now and what i'd like to show you is how this interconnected or reactive animations work and i can go here inside the user effect and just apply a dummy uh set interval and inside this one i like to change the scroll index manually so a scroll index i like to set the value to a math floor math floor and math random multiplied with data length and i would like to apply this every three seconds let's say basically this is saying uh just pick up a random number from the the the data length and animate it so as you can see i'm just modifying the scroll x index but because i'm listening to that change i'll apply it to the scrollex animated with a spring animation and this is creating this this nice effect right we don't need any state we don't need anything just two animated values that are interconnected or they are reactive right now i i can remove this because i i just wanted to show you how this is actually performing but in order to make it swipeable we would like to import a fling gesture handler from from react native gesture handler right and with this component we will have actually two of them we'll have one for left direction and one for right direction and for the let's start with the left one so we we pass here a key saying left and we'll have a direction of directions dot left directions it's also coming from from the gesture handler right and now that we have this one we can uh listen to on handler state change and we'll get the event and we would like to to know or to modify the scroll x index if the state its end so basically the user ended the uh flink gesture so we will say here event native event state it's equal to state dot end so also import state and and here i would like to if you move to the left i like to increment right so it's this movement to the left to the left so increment the index and we also need to have an index here it's not mandatory to have it from the state but i will show you at the end of the tutorial how to probably fetch new data based on this index so we'll have an index and set index here react use state and this starting from zero and with this index what i like to call here it's a method saying set active index and before doing this let's directly do if the uh scroll x index i would like to set the value index plus one and i'll also like to set the index index plus one and now if i hit save and refresh if i'm moving to the left you see i'm incrementing and i'm changing the scroll x index and because of this reactive uh state that we have here it's also going to animate and notice that at the end we are moving uh further than the data length so we would like to also check here if the index it's equal to data length minus one so we are at the end well oops we would like to return otherwise call this set index with the index plus one and this set active index we can create it here so set active index it's equal to react use callback we will receive active index and we will set the active index right and now this is working and also for the for the next item last item is not going to swipe anymore and because we have this now here let's copy and paste it and do the same for the swipe direction right so to the next flinger fling gesture handler just paste the properties and do right direction it's right and now for the check if the index is equal to zero i don't wanna move uh move and just return and for the set active item we would like to decrement the index now if i hit save i can also move to the left right but i can also move to the right as well and now the uh the missing part is that this this header is not the the the flick animation the flicker animation is not happening so we only need to send the scroll x animated values so scroll x animated and move to the overflow items get this as a prop and here create an input range and we know that we're changing one by one right so it's minus one zero and one the input range and the output range is gonna be a translate y this time and we'll interpolate the scroll x animation and we'll pass the input range and the output range is going to be overflow height so the height of the item zero and then minus overflow height right so this will create this scrolling up and down animation and convert the the main the the wrapper here like the inner container just to make it animatable right and pass the style here so transform and translate y and now if i hit refresh when i'm moving to the left i'm i'm moving upwards the container otherwise i'm moving downwards and this will create this nice effect here cool and i've said before before wrapping up this tutorial i've said that i'll show you how to actually fetch new data based on the index and to do that uh since we are we set the index here every time you swipe to the left or to the right we can take this to the next level and apply a news effect here and we are checking if the index is equal to data length minus visible items minus we would like to get new data right so get new data or fetch more data and how to do that i for now i'm just duplicating the data layer but i'll say new data it's equal to data and then again data and i'll set the data with the new data and basically i'm just i i'm just adding an another data layer here and now i'm moving moving moving moving you see it's it's kind of like a an infinite carousel right with fetching new and new data and so on so that was it guys thank you so much for staying so long with me i hope that you've learned new tricks and tips and you can apply them to your existing projects i hope that you'll learn how to create some reactive animate animated values and use them in your in your projects right thank you so much once again for supporting this and if you have any comments don't forget to leave one here in the comment section i'll do my best to answer all of them and help you out as much as i can if you like this video don't forget to subscribe smash the like button hit the bell uh the bell sign there to be notified whenever i'm posting something new so once again thank you so much and see you in the next video bye guys

Channel: Catalin Miron

Views: 33,924

Keywords: react native flatlist stack carousel, react native carousel animation, react native gesture handler tutorial, react native flatlist animation, react native advanced animation, react native flatlist, flatlist react native tutorial, react native gesture handler, react native animation, react native animation tutorial, cool react native animations, react native, awesome react native, react native tutorial, react native parallax scroll, React native gesture handler swipeable

Id: g5rCMlPTgrM

Length: 23min 47sec (1427 seconds)

Published: Wed Aug 12 2020