Advanced FlatList Carousel Animation in React Native using Animated.API

hey guys and welcome back to my channel in this video we will create some advanced react native onboarding carousel i was inspired by vladimir he created this beautiful carousel and i will show you my way of doing it in via native by using the flat list and animated api we will be doing the background color interpolation so we will change the background color based on the active slide and we will also i'm going to show you a yellow method to modify the scroll x and create an animated value between 0 and 1 so we will interpolate it and use it for this background rotation of the square plus the carousel indicator or onboarding indicator and we will apply some different styles there as well so let's play the intro jumps into vs code and start building this beautiful onboarding carousel react native shall we alrighty so i've already created a boilerplate for this project the starter code for this project is there is a link down in the description so go there grab the code and this is what you'll end up having and we will have the same starter or starting point so let me walk you through what we have first of all thank you so much flat icon for this retro wave icons that will be using here go check this out also the link to it is down in the description as well and i have here some bgs like backgrounds which is an array and some data each data has a key title description and image so let me let me close this array here and first let's create the flat list so let's remove the text we'll have here a flat list and go up and we'll need animated flat list and we'll also need an image right and maybe dimensions i'm not sure but just get them here so const with height it's equal to dimensions get screen cool and this flat list is actually an animated flat list and we will have here data which is data the key extractor is item item key will render the item and we'll have here return the view this view is going to have an image the source of uri item image write the style of maybe with it's going to be wave divided by two height it's going to be width divided by two and resize mode is going to be contained so basically half of the screen right amazing and this one is going to be horizontal show horizontal indicator is going to be false all right now it's time to play with the width so if it's going to be width of the screen and we'll justify the content to the center and align the items to the center as well okay maybe you know what let's do it differently so this image should have a view and this view is going to have a style of flex point seven [Music] let's give it a background color thread all right and now we'll have another view with a style of maybe flex point three right [Music] and inside we'll have a text with item title and item description great and for the item title we'll have style of font weight it's going to be 800 font size is going to be 20 maybe 22 24 all right 24 margin bottom going to be 10 and color is going to be white [Music] let's actually leave it for now like this and for the description we'll have a font weight of and i think that's it so it's looking good so far all right and we'll have here a style content container style will apply a padding bottom of 100 all right and the image itself should have justify content center so we'll center this image right now we can remove the background color red it doesn't matter but this one should have a bedding of 20 so just give it a little breathing room here all right now uh we also need to display the onboarding like the indicator so let's create here an indicator pass the scroll x scroll x so scroll x is not defined but scroll x is going to be react use ref a new animated value starting from zero get the current and this animated thread list should have a scroll event rotal 60 maybe 32 [Music] and on scroll is going to be new animated event we will get from native event content offset x and assign it to the scroll x and in our case we will not use the native driver and the reason for that is because we will change the background color and background color is not supported by the native driver only the transform and opacity it's used and i'm using this react use ref because react will keep track of this value and whenever this component will be re-rendered the value is not going to change so it's really nice and it's performant as well so let's create the indicator here so bronzed indicator indicator is going to receive the scroll legs it's going to return here a view and we will iterate over the data get the index i and here we will return a view and each particular view will have a style of first let's not forget about the key so it's indicator get the eye here and the style is going to be height maybe 12 ray 10 width of 10 border radius 5 background color is going to be let's say 333 and the indicator here is complaining right all right so those are visible here and the indicator itself i'll let let's position this absolute and bottom is going to be 100 okay [Music] make this a row and let's apply a margin for each particular button of maybe 10. yeah that that's looking good and let's let's uh style this uh this a little but now i'm i'm seeing that this one is not actually a carousel and we need to enable the patching so padding is going to be enabled so now we have this as a carousel and before styling let's let's create here a backdrop and backdrop it's also going to receive this scroll legs back drop basically is going to be the background of of this entire slide so we will have here the backdrop so const backdrop it's going to be a method he's going to receive the scroll legs and it's going to return animated view and we'll have some style styles it's going to be background color let's apply the bg's and zero and we'll position this absolute so stylesheet absolute fill object and then we'll pass those items right so it's going to stretch the entire screen but we'll we would like to modify this animation here so const bg is going to be scroll x interpolate and the input range should be something like zero with with multiplied by two and so on so forth based on how many items we have right so we'll have here a data map and then actually we can do directly bgs map and bg we don't need it we only need the index and here we'll return i multiplied by the width and for the output range we'll have bg's map get ebg and return the pitch right and now we need to get this background color so instead of bg let's apply directly background color and now you see this is uh interpolated based on scroll legs which is looking really really nice okay now let's let's move on to the colors so color in the first place for this text so color is going to be white all right this is looking even better right let's increase the font size here just a little ah 28 looks okay okay and now let's go to the indicator indicator is going to have the same input range so let me copy everything from here paste it down below but this time i like to play around with the scale and opacity so i'll have a scale here we'll interpolate based on the data and the output range it's going to be actually you know what this is wrong here inside because we would like to create an interpolation based on for each particular dot so inside the data when we go through the data we need to create the interpolation so in our case the scale is going to be so we'll have here an input range which is going to be i minus 1 multiplied by the wave i multiplied by the wave i plus 1 multiplied all right so uh this is next slide current slide and previous slide or yeah it's actually vice versa uh previous slide current slide next slide so we'll have this input range and the output range is going to be 0.8 or zero point yeah eight one 1.4 and 0.8 right and with this scale let's convert this into an animated view and pass here the transform scale all right this is looking really good the only problem is that we need to extrapolate so extrapolate it's going to be clamp and the reason for that is we don't want to move outside of this range for this particular item right so all right this is looking really good the only thing which i like to change is the background so it's going to be white but we'll play around with the opacity and opacity is going to be basically the same thing as here but we can lower down even more maybe 0.6 all right and maybe 0.9 all right so this is looking really good now let's move to the square here so inside the main app we'll have another square so square square is equal to we'll get also the scroll x scroll x we don't need actually the scroll legs but yeah let's see so let's apply scroll x here and we'll return the view this is actually going to be an animated view rule style this zwift is going to be [Music] height height is going to be height background color is going to be white border radius maybe 96 okay and let's apply a transform oh and we need to position this absolute right and we'll transform rotate maybe 30 degrees 35 degrees and leaf is going to be with height is going to be with or even we've multiplied by two [Music] and we've multiplied by two all right and now let's move this up so top is going to be maybe minus height actually you know what is okay height and height i don't care all right so minus height multiplied with point yeah we point six and maybe left is zero let's see how it's looking maybe minus height multiplied to point two point five [Music] yeah this is looking good and what we would like to do here is this one should so when you are in the middle of the slide i would like to transition it outside of the screen and then again back where it was and in order to do that we need to create some yellow methods with animated math functions so here let's create the yolo right and i like to have the the value of the so it's going to be like we will um have the modulo of scroll x and width of the screen so basically we will go from zero and with right so it's not going to go above or beyond the width but this time this one is going to be divided so we will divide the modulo on a new animated value of the width right so we will go from zero basically to one because with this modulo we went from zero to width and we divided this and we go to from zero to one and this yellow to ensure that we'll get the proper value so it's going to be a modulo this one and one so basically we'll get the entire proper value here [Music] all right and this time we'll have uh rotate which is a yolo interpolate and we'll get the input range from zero to one which is perfect because this is what we need right and also the middle in the middle of the transition and the output range is going to be let's say 35 maybe minus 35 degrees 35 degrees minus 35 degrees all right and with this rotate let's apply directly here and i think it's zero minus zero right cool and now watch what will happen so if we move right remove this it's back again right and i think that we can actually move it to zero degrees so this is middle this is this is zero yeah so now [Music] okay and let's also play around with the translate x so translate x we will move this zero [Music] minus height and height so translate x let's see how this is looking all right this is outside of the screen all right this is actually looking really good all right guys so that was it thank you so much for staying so long with me i hope that you've learned something new in this tutorial hopefully you can apply it in your existing project and by the way 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 bye

Channel: Catalin Miron

Views: 23,263

Rating: 4.9850326 out of 5

Keywords: react native advanced animation, react native flatlist animation, react native animation tutorial, react native carousel animation, react native flatlist, React native flatlist horizontal scroll, react native tutorial, react native tutorial for beginners, react native parallax scroll, react native flatlist pagination, react native flatlist horizontal scroll, animated carousel slider, react native color animation, advanced flatlist animation, slick react native carousel

Id: YE7c6ch2msY

Length: 22min 51sec (1371 seconds)

Published: Wed Nov 18 2020

Reddit Comments

[u/Tourgott]

Love your tutorials. Always looking forward to it. Thx, keep it coming.

[u/datorkop85]

Amazing as always! Thank you for your videos.

Suggestion for next video: tab view with nice spring animation 😀

Tab view is something that is commonly used but no good tutorials with animations.