Advanced 3D Carousel Animation in React Native using FlatList & Animated API

hey guys and welcome back to my channel first of all happy new year uh i hope that you had a wonderful time with your family with your friends during those holidays this video we are going to take a look at how we can create a 3d carousel in react native i was inspired by diviani she created this beautiful 3d carousel and i'll show you my way of doing it in regnative by using the flat list animated api and vector icons i'm going to teach you how to disable the buttons the next and the previous button based on the active slide in order to do this we actually need to extract what's the actual index from the flat list plus how to animate and do do this 3d effect and apply to the carousel so lots of things to learn from this tutorial so let's play the intro jump straight into vs code and start building this 3d carousel shall we alrighty guys so we are in vs code here i've already created a project using expo and i also added couple of components the link to the starter code or what i'm going to present to you now it's down in the description you can go ahead grab it and edit in your ide and we'll have the same starter point so let me walk you through what we have so far we have here some imports um from vector icons safe area view and drag native sizes for the image that we are going to display inside the car cell a couple of images grabbed from pixels and we are going to create the data to fit the flat list using faker so basically for each image i'm i'm returning a key an image a title subtitle and a price down below i have a component called content that's receiving the item from the flat list and is displaying the title the description and the price and in the main render i have a flat list which is a horizontal flat list that's going to display only the images and it's horizontal and we have patching enabled and each slide is basically the width of the screen and here is the render for the render item it's a view containing an image and down below is the sibling i have a view containing the title basically i'm rendering the content the title description and the price and i'm passing only the first item as the data for the content afterwards we have another view which is the white rectangle here and i'm applying some shadow color and opacity here and last we have the pagination with the previous and the next button the buttons now uh they are not doing anything so the on press is just a dummy handler or no function first thing that i like to do is to change the behavior of those uh images inside the carousel and in order to do that we first need to change the flat list to be an animated flat list and get the scroll x interplayed it and play around and make some animations so first thing convert this flat list to be an animated flat list and on scroll event is going to be an animated event we will grab from native event the content offset the x and assign it to scroll x and in our case we'll use the native driver now let's create this scroll x variable here so const scroll x it's a react use ref a new animated value starting from zero get the current i'm using use rev because i like react to keep track of the of the animations and the values so whenever this component is going to be re-rendered uh the scroll x or the value is going to be remain the same during the component life cycle so cool nothing should change right but now we have the scroll x assigned as an animated value and we can interpolate it and make some animations so inside the the render item create the input range the input range is going to be index minus 1 multiplied by the wave index multiplied by the width and index plus one basically this is next current and previous slide what will happen with the interpolation based on this range so now we can create the opacity opacity is going to be scroll x interpolated so we'll interpolate pass this input range and for the output range we'll have zero one and zero and now if we convert this view to be an animated view and pass the opacity as a as a style here you'll notice that now it's one because it's the active slide we are and now if we move it it's going to change its opacity and the last thing i like to also uh move the y position based on the active slide so if i copy the opacity interpolation and assign it to translate y keep the same input range but the output range is going to be different so you'll have 50 0 and 20. basically what i'm saying is start at 50 pixels move to 0 and then to 20. so we'll create this simple wave and pass this trance to the transform translate y so now we will start from 50 write 50 0 and then 20. all right so we have this movement for for each individual slide within the flat list and now the the next part is to actually animate the white rectangle so it's going to rotate 3d so this is the content that the the the view that we are going to modify but first i like to have the input range between 0 and 1. so now it's going to be zero zero point five one now it's zero zero point five one and so on so forth and in order to do that we need to create at the top here a variable called progress let's say and we will use the methods divide and modulo from animated in order to modify or to get the values between 0 and 1. so we'll have here an animate divide we'll divide the scroll x by the width so basically this will say it's 0 1 2 3 4 5 6 and so on but we like to clamp it to be only zero and one so the value from this division we can do a modulo division and modulo with so basically we'll have zero and one zero and one zero and one and so on so with this progress we can go ahead here at the view where we have this white rectangle convert this into an animated view and pass here an opacity or actually a transform we will need to add a perspective so perspective is going to be image with multiplied by 4 and rotate y and here we'll interpolate the progress the input range as i said it's going to be 0 0.5 and 1 we need also the middle of the animation so now it's zero zero point five and one so basically here i would like to be uh at 90 degrees now at zero degrees 90 degrees 180 degrees right so the input range it's zero zero point five and one but the output range is going to be zero degrees 90 degrees and 180 degrees so hit save now and you'll notice that the the white the white container is going to move right up up okay notice this bug this weird bug is because of the perspective and in order to fix this we need to go above the flat list and pass the style as that index a really big one so it's going to sit on top of this image and now if we move this we have a nice nice rotation cool now the missing part is to actually animate the content and now because we are rendering only the initial data or always the same data we need to map it so we'll have here a data map we'll get the item and the index and we'll return a view containing this content so but instead of hard coding the data to be the the first the first item or the first item from the collection we'll pass directly the item and also don't forget to pass the key so item key and now hit save so we have all the data here the first thing let's modify the styles just a little so we'll position this absolutely so positioning this absolute everything will be sitting on top of each other so it's going to be create this stack effect and we need to um apply different animations so first we'll need opacity then we'll need a rotation as well right so here let's create an input range so input range input range is going to be basically the same so index minus one multiplied by the width index multiplied by the width and index plus one multiplied by the width basically i'm multiplying by the width because each slide it's it has the sizes uh the width it's equal to the screen width so that's why i'm multiplying it by the width and having this input range we can interpolate again the scroll legs will interpolate it has the same input range and the output range for it is going to be zero one and zero so basically if it's active slide it's one otherwise it's zero so opacity and apply here the opacity before saving it don't forget to convert this view into an animated view otherwise this will throw an error so you see this error you you cannot just pass an animation animated value top to a regular or to a normal view you need to convert this into an animated view so let me convert this view to be an animated view now hit save and now we will have this uh uh animation notice this weird bug you see it's like because of the perspective for for this uh rotation we also need to apply a bigger z index to the content itself so above here where we have the the main view that contains all the content that's a set index a set index of 99 hit save and now this this text should sit on top of the rotated rectangle but the animation itself it's it's really is is not there yet right and and the reason for that is because we are changing the opacity from index to index but we will like to move it from 20 so now i would like to have it opacity zero right so we need to move faster than the slider itself and in order to do that we can change the input range to be instead of index minus 1 to be index minus 0.2 and index plus 0.2 basically this is saying move 20 before the actual index so we will make this animation even faster so now now it should be at zero right not before the middle of the animation and so on so forth right so it's it's going to happen even faster than the actual uh index here so now that we have the input range we can also play around with the rotation as itself so rotate y it's going to be scroll x interpolate it have the same input range and the output range is going to be 90 degrees 0 degrees and 90 degrees and apply this transform we'll have a perspective of image width multiplied by 4 and we'll also have a rotate y so we move this move this okay so i think that the 90 degrees is too much maybe 45 degrees [Music] so now it should it should happen pretty pretty decent i will say all right [Music] the missing part from this tutorial is to actually call some imperative methods on the flat list while clicking on the previous and the next so in order to do that we need to first get the index of the active slide from the flat list and call some imperative methods on the flat list so first thing i like to create here at the top is a state so we'll have an index and the set index which is a react you state and we'll start from zero now inside the flat list i'm going to use on momentum scroll end on momentum scroll and get the event basically this on momentum scroll end is going to give me back the position of the flat list when the animation is go it's finished so now it's going to give me now it's going to give me and based on this event we can calculate what is the active index so we'll set the index with the event native event content offset and x so basically this is the value uh where the flat list is situated on the x axis but we need to divide this by the width of the screen basically the carousel or the slide item width and do a math floor to have this rounded so now if i'll do a console.log index and open up the the console here you see initially is going to be index 0. now i move the the animation has finished we calculate the index and the index is one it's finished finished and it's working both ways and this is how you actually can get the active index from flat list based on the scroll x or the x position and with this index we can disable the next and previous buttons initially right so if i scroll down here with this on press we can say if is disable for the previous is disabled when index is equal to zero and we can also apply some opacity so if he index is equal to zero zero point two otherwise one so if it's initially i like to make this zero point two opacity and disable the button and do the same thing for the next so but instead of index is equal to zero we need to check if index is equal to data length minus one so let me copy this one so if you are at the end uh next button should be disabled if you are on the first slide previous button should be disabled and now the on press for dion press we need to get the ref fro for the flat list and call an imperative method so go above here where we we've created the state and create a ref a ref it's equal to a react user f apply this ref assign this ref to the flat list ref and now when you press the button the on press here if you are let's start with the next one because it's simpler while pressing the next button i like to scroll to particular offset so it's going to be ref current notice the question mark here maybe we will not have the ref scroll to offset so basically it's saying call scroll to offset if you have ref and current so here scroll to offset uh accepts two different arguments one is the offset and in our case is going to be the next slide so it's index plus one multiplied by the width and will animate it so the next slide is going to be index plus one multiplied by the width because each slide has a screen width as the width right so now if i hit save this should go to the next next next next you see it's it's pretty much like instead of swiping you can directly call some scroll to offset with a particular offset this one is going to to animate it and notice if you you are the last slide the next button is going to be disabled so now let's do the same thing for the previous one but instead of index plus one we do index minus one hit save now and we are at the next next previous previous previous is disabled so it's not going to work all righty guys so that was it thank you so much for staying so long with me i hope that you've learned something new you've learned how to get the active index from the flat list you also learned how to create or to create some navigation system for your animated flat list and call scroll to offset on the flat list in order to dynamically move from a slide to another and how to actually create this 3d effect in react native using just animated api and flat list don't forget to subscribe smash the like button if you like this video other than that see you in the next video thank you so much and bye bye guys

Channel: Catalin Miron

Views: 20,142

Keywords: react native animated api tutorial, react native animated api, react native sticky header, react native advanced carousel, advanced react native tutorial, react native advanced animation, react native pagination flatlist, react native flatlist, medium.com animation, react native flatlist animation, react native carousel, react native carousel slider, react native carousel animation, react native carousel navigation, mobile animation, mobile carousel animation

Id: k2ax0t4dYAY

Length: 20min 59sec (1259 seconds)

Published: Wed Jan 06 2021