AWESOME React Native carousel animation 60fps - FlatList and Animated API

hey guys and welcome back to my channel in this video we are going to create the colorful animated carousel in react native i was inspired by atom he created this beautiful carousel plus some background images that are blurred and are actually animated whilst going through the carousel items and i'll show you my way of doing it in real native by using animated api and flat list before jumping into vs code i'd like to thank samji for creating those beautiful illustrations that i'm going to use in this particular tutorial let's play the intro and jump straight into vs code and start building this beautiful animated carousel shall we alrighty guys so we are in vs code here i've already created a project using expo and i have i grabbed some images from samji's profile from dribble so let me look at what we have so far you can download the source code what you have here from gist so go ahead grab it add it in your ide and we will have the same ground or starter starting point right so here we have some a list of images that we are going to fed in through the flat list so we have in total like six images or seven images then i have some constants for the cursor item that we are going to display inside the flat list and nothing else the first thing that i like to do is to create the uh carousel or the flat list so here in inside the main renderer let's render a flat list and the data is going to be data and key extractor let's grab the index and return index to string and render item is going to have the item and return a view inside the view will have an image with a source of uri item because this is a string right so this is what we are going to get and as a style let's apply a width of image with height of image height and resize mode is going to be cover all right hit save so now we have this beautiful list but we would like to transform it into a carousel and to do that we need to first make this horizontal and enable the pagic so now we will have this carousel style but notice we don't display one particular slide in the middle of the screen and in order to fix that we need to go here into inside the render item and specify with uh to be the width of the screen so each slide is going to be the width of the screen and in this way we have each carousel taking the exact the entire space of the screen so we can create this carousel style but we also need to justify the content to the center and also align the items in the center as well so they are nicely uh in the middle of the screen cool and now to this uh to this image i like to give it a border radius of 16 so also add a comma here all right now we have the cursor right but on the background we have this uh image basically it's the current image visible inside the carousel which is blurred so let's go ahead and actually create that right now above the flat list we'll have here a view so we'll have a view and inside the view we will iterate over the data and display an image for each particular entry so data map get the image we can also get the index and return here an image with the source of uri image we will also need a key so key it's going to be image and then the index and the style this time we will we would like to have it full width and height right so we'll make this absolute fill object so we will have this uh stretching but in order to make this visible go ahead to the view container here and apply the same style sheet absolutely object so this way they they will be like all sitting on top of each other right cool so we have the main view stretched on the background and then we have this carousel so let's also apply some blur to it and in order to do that we can go ahead here to the image and say blur radius and let's apply 60 or 50 60 50 it's okay and now what i like to do is uh for i like to morph between two different images in order to do that we need to first transform the flat list to be an animated flat list get the scroll x position and interpolate it and apply uh apply the interpolation or opacity for each individual image so let's transform this flat list into an animated flat list and on scroll we'll have an animated event and we'll get from native event content offset the x and assign it to scroll x and we'll use the native driver for this example cool and also don't forget to create this variable on top here scroll x it's a react user f a new animated value starting from zero get the current the reason why i'm using use ref is because i like react to keep track of the values inside this component so whenever it this component is going to be re-rendered i'm not losing the the value or the old value and yeah it's going to remain the same during the component life cycle so hit save now scroll this and with this scroll x so nothing should change right but this time we have a scroll x which is an animated value and we can interpolate it and apply some animations to uh the background images so right here where before returning inside the data map create here an input range and the input range is going to be index minus one multiplied by the wave index multiplied by the width and index plus one multiplied by the width so next current previous and this is basically the input range is saying how it's going to perform base for the current index so and with this input range we can actually create a constant hero called opacity and we can take the scroll x and interpolate it past the input range and for the output range you will have zero one and zero so basically display the current image only when the index is equal to its own index right and if we modify this image to be an animated image and pass here opacity as opacity you'll notice that now we have on the background we have visible only the active slide image right from the carousel so while we are swiping through them they will fade in and fade out based on the active slide and this one is going to give us this beautiful beautiful effect all right and before wrapping this tutorial one little ui touch here just let's add some box shadow around the cursor item so if we go to the render item method inside the flat list and to this view that's actually wrapping the image we can add here a shadow color of black so zero zero zero a shadow opacity of one a shadow offset of width zero height 0 and also shadow radius of let's say 20. hit save now so we have this this shadow but i think that the opacity should be 0.5 so just a tiny tiny touch here around the edges all right you guys so that was it uh it was a short tutorial but i just wanted to show you how easy it is to create such a beautiful carousel uh and how to actually animate some background images based on the carousel exposition 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 don't forget to subscribe smash the like button or double smash the dislike button that will help me out as well other than that see you in the next video bye bye guys

Channel: Catalin Miron

Views: 46,421

Keywords: react native 60fps, react native carousel, react native blur effect, react native advanced carousel, react native blurred image, react native morph, react native animated api tutorial, react native animated api, advanced react native tutorial, react native advanced animation, react native pagination flatlist, react native flatlist, react native scroll animation, react native image carousel, react native onboarding, react native flatlist animation, React native blur background

Id: gOj4BlzYF4A

Length: 10min 54sec (654 seconds)

Published: Tue Jan 12 2021