Advanced React Native FlatList animations at 60fps with Animated API

hey guys welcome back to my channel in this video we will create some advanced flat list animations i was inspired by dmest he created this amazing carousel animation i will show you my way of doing it in react native by using the animated api flat list and svgn masked view as always i'll show you how to fetch the movies from the movie database plus i'll show you how to actually create this type of slider using snap to interval plus some small tricks in order to properly display the previous and the next slide before jumping into vs code i would like to thank you all for supporting this channel especially to george and pierre for buying me a coffee and supporting me and by the way if you'd like to support my work the link to buy me a coffee and paypal is down in the description and now let's play the intro and jump straight into vs code and start building this amazing movies carousel all righty guys so i'm in vs code here i've already created the project using expo and i also created couple of components here so let me walk you through what we have right now we have an api.js file which is exposing a get meta get movies method responsible for fetching the data from the movie database and i'm also normalizing the payload and returning title poster backdrop rating and so on and a rating component that's visible here with the with the stars uh that's receiving a rating number and based on it is deciding how many field uh stars is gonna display and then uh genres component that's rendering this list of genres with the appeal style effect and inside the app we have movies and set movies uh which is a usted state hook and when this component will be mounted we will get the movies from the movie database and we set the movies uh to the state and here in the render if there are no movies we display a loading indicator so is this dummy screen so let me refresh so you you see it here on the screen and when we have data we render a flat list which is a horizontal flat list we pass the movies as data and the render item it's a view that has specified with which is the item size defined here on top that's 72 percent of the entire height of the screen and inside it we have a view that's responsible for spacing the item so if i'm doing here red you'll see how how this item is looking it has some padding and some margins and inside it i'm rendering the movie poster i'm rendering the movie title the rating and genres components plus the movie description which is kept at three lines so this is what we are starting with now what i would like to do is to create this uh snap to interval or show you how snap to interval actually works in a flat list and for that here inside the flat list let's send a snap to interval prop and we will like to snap on every item size and this one will create this uh snapping at the start and it's gonna uh it's gonna snap the snap what uh for for each particular item and notice that we can uh scroll whatever you we would like and to avoid this and actually do a carousel style we need to pass a deceleration rate of zero and now we can uh now it's gonna move uh like a normal carousel right and another thing that i like to do is to get rid of this bounce effect so pass bounces false and we have this uh this carousel to work with and the the next thing i would like to do is to animate the active slide so i would like to move it upwards in order to do that we need to change this flat list to make it an animated flat list and on scroll to get the animated event and for this animated event from native event content offset x will assign it to scroll x and we will also use the native driver for this example and let's create the scroll x so scroll exits react use ref a new animated value starting from zero and get the current and also don't forget to say scroll event throttle it's 16 so we'll have this event 60 fps and now with this uh with this scroll x we can interpolate it and move the uh active item so here inside the render item i will create an input range which is index minus one multiplied with item size index multiplied with item size and index plus 1 multiplied with item size right so we will get the previous the current and the next item and index is not defined so we can get the index from the render item method and with this input range we can create the translate y and translate y will have a scroll x will interpolate past the input range and output range is going to be 0 minus 50 so n0 so move it up and now we can make this inner container an animated view and pass this translate so transform translate y and now this is moved and now when we scroll we have this uh nice effect applied to the active slide as you notice in the first place we had we had the active slide was in the middle and we were also displaying a proportion from the previous and the next slide and in order to do that we need i'll show you a trick we basically need to create two dummy spacers that will be at the end and the start of the list uh that is passed to to the flat list each uh spacer will have a special with assigned to it so basically here in the set movies we would like to have a spacer then the list of movies and then again the spacer so let's create this one here so we'll have a key of left spacer then movies and then another key with right spacer and for the spacer we would like to have a special item size right so item size which is gonna be the width of the screen minus the item size everything divided by two so basically we'll take the remain space from an item size and divide it by two because we will like to also have it on the left and right hand side visible item right so that's why we divided by two and inside this render if we refresh now uh we get an error because the dummy element it only has the key so we need to go here into the render item and check if the item doesn't have let's say poster we would like to return this spacer right so we'll assign a psi a width of spacer size and now we have it created here let me show you how it's actually looking so background color red and the height of 200 so it's it's right here and it's creating this um this uh center effect for the active slide it's basically offsetting offsetting the the entire list but now you you notice that the uh the translate y is not taking into account this dummy component so we also need to offset the index as well so instead of index minus one we have index minus two in index minus 1 and then index so basically this one will be the active slide and now it's it's going to work like magic so we have the active slide in the middle translate is y minus 50 and then we have a little portion of the previous and also the next item and now if i remove the background color and refresh this will start from the middle of the screen as well now the the other uh part of this tutorial is to create a backdrop and the backdrop will be basically a flat list that's gonna render the movies of course and inside it we will use a masked view that will display the movie backdrop that's taken from the api and we'll mask it using an svg and we will move the svg based on the scroll x position as we are doing for the translate y basically and more on that we will also display a linear gradient to create this fade effect at the bottom of the backdrop so let me start by importing the dependencies here so we'll need a masked view which is from maskedview we will also need svg and rectangle from react native svg and we will also need linear gradient from expo linear gradient and here before rendering the animated flat list i would like to create a new component called backdrop and i know that this needs to have the movies and also the scroll x so pass them as probe and on top here let's define this component so backdrop it's a component it receives the movies and the scroll x and it's gonna render a view for now and this view how how this is gonna work it's gonna so let let's start first by positioning this absolute right we'll define a width and the height of a backdrop height and this backdrop height we need to define it here so backdrop height is going to be height mo it's 60 of the the screen right and inside this let's start by rendering the flat list with the backdrop posters right so we'll have a flat list and this flat list will receive the data right which is movies and we will also have a key extractor which is item key and we'll have a render item that's getting the item and the key and how are we going to do it it's it each item will sit will be positioned absolute so all of the item will sit on top of each other and we will just play the masked view and so let's start by returning here a masked view and inside this mask view let's have an image with a source of item backdrop this backdrop is from the api and let's apply some styles so if it's going to be width and height it's backdrop height and we also need a resize mode of cover and we've said that the mask view should be positioned absolute so all the items will be positioned absolutely so let's pass this position absolute now everything it's uh starting to take shape right and before before continuing let's let's render the linear gradient so we'll have this uh uh this fade uh effect here so linear gradient this linear gradient uh needs to have colors so colors is transparent and white so we will start from white and end up in transparent so hit save here and also apply some styles we'll have a width of width height of backdrop height and position absolute and bottom zero so we'll start from here right and this will create this fade effect and now let's go back to the masked view and as you can see also react is complaining hey mask view should receive a mask element and if you don't know how mass view it's working i've already created a tutorial talking about this masked view and how it's working a link to to this tutorial will appear somewhere on the screen but for now let me go to do this mask element view basically it's an svg right so it's an svg here and inside will have a rectangle that will fill the entire space so for the svg we'll have a width of width height height and the view box of zero zero width and height so x zero y zero with width and height and for the rectangle we like to start from x zero why it's also zero we'll apply the width of width and the height of height and also fill of red this doesn't actually matter because we we need to have a field other than transparent in order for the mask element to work right and now we would like to whenever we uh scroll to a particular item or we have an active slide we would like to move this svg to translate it on the ax x coordinates right so here inside before before actually doing it we forgot about the uh dummy elements right so here we will check if the item doesn't have a backdrop just return null we don't care about the backdrop right and now let's define the input range for the translate x for the svg so translate x is going to be the same so we'll have an index minus 2 multiply it with item size and then index minus 1 multiply it with item size and for the translate x we'll have a scroll x and we'll interpolate it we'll pass the input range and for the output range we'll have minus with and zero and to be able to pass this translate x we need to uh modify the svg to be an animated svg and we can use the create animated component from animated api so here let's define the animated svg it's equal to animated create animated component by svg and instead of the svg itself let's use the animated svg and pass now the styles is transform and then the translate x that we've just created and now if if we scroll to the x you'll see that we are also animating the mask and because all the items are position absolute so they sit on top of each other whenever we scroll we actually reveal with the mask the next image and this is creating this this nice effect and i think the what bothers me is th this list it's uh position uh too high so let's start by uh from 100 translate so basically i'm just moving it down and yeah this looks much better and before wrapping up this tutorial um i got this question all the time is this performant or not so let me uh open up the performance monitor here and you'll see this is running at 60fps so we don't have any any dropping frames we don't have uh everything is 60 fps so i think that this will answer lots of questions that i've received till now that was it guys thank you so much for staying so long with me i hope that you've learned some something new some new techniques or some new tricks and tips that you can apply to your existing projects or to new projects of yours if you have any issues or comments don't hesitate to leave a comment here down in the comment section i'll do my best to answer all of them also don't forget to subscribe and like this video if you found it useful other than that see you in the next video bye guys you

Channel: Catalin Miron

Views: 104,293

Keywords: react native advanced animation, react native flatlist animation, react native carousel animation, react native animation interpolate, react native animation, react native flatlist, react native flatlist horizontal scroll, cool react native animations, react native beginner to advanced, react native animation tutorial, React native flatlist pagination, react native, react native parallax scroll, awesome react native, react native tutorial, React native tutorial for beginners

Id: yV-2HRzNX9o

Length: 20min 10sec (1210 seconds)

Published: Wed Aug 05 2020