Advanced React Native Parallax Carousel with FlatList and Animated API

all righty guys so welcome back to my channel in this episode we are gonna build the parallax carousel in react native using flat list and animated api before jumping into vs code i'd like to thank you all for subscribing liking commenting out sharing with your friends this channel and also to the patrons it means a lot to me uh to to see the gratitude the support and everything from you guys so thank you once again this channel is for you and i do my best to answer all of your questions through tutorials and do my best to code everything that you're mentioning down in the comments the second thing here is that recently i've changed the camera and the setup not the camera but the lens sorry what cut i've changed the lens uh it's it's a prime lens it's a better lens the the background it's really blurred hopefully it's the the angle it's better just let me know down in the comments if you feel that i need to change something to the setup here camera it's higher because i'm using a 27 inch imac and i didn't know exactly how to position the lens to also show myself and also like being inside the tutorial i don't know how to explain it even though i think it's it's a better lens maybe the position it's it's wrong i don't know just leave a comment down below they're here for the tutorial just just say the intro played intro played interplay the interplay didn't play the intro alrighty guys so we are in vs code here i've already created a boilerplate here the link to it is down in the description so go grab it add it in your project run it i'm using expo but this should work without expo as well so if you're if you're using react native cli is going to work as well but just go ahead grab it and we'll have the same starting point so let me walk you through what we have so far we have some imports here like animated image flat list right we are getting the width and height from dimensions uh we assign we created an item width and item height that will be using for the carousel items right and we have here a list of images grabbed from um splash and down below i'm creating the data that we will inject or we will use inside the flat list and i'm iterating over the images i'm creating a key photo and an avatar url for the profile that posted the image and first thing i would like to create the flat list so let me remove this text here and first let's start by rendering here the flat list and inside the flat list we'll have data as data we'll have a key extractor as item and item key and here we'll have a render item and we will grab the item and the index [Music] and we'll render a view and inside the view will have an image and this image will have a source of uri item photo and this one should be like this cool so nothing is visible uh and that's because the view doesn't have a width or height so image issue cannot stretch basically right so let's start by adding here some styles so style will have width and width right and the image itself should be [Music] should have its own style so let's create the styles here we'll have a width of item width height of item height and resize mode of cover so now this this will make the images visible right and i've assigned this to this width to this view the width because the carousel will be each slide will have a full width uh in size right so now this is a vertical uh carousel so let's make this horizontal uh we will hide the horizontal indicator and we are going to enable the patching so patching enabled it's true and now each slide is going to be uh full width and it's going to snap into place so this is the paging enabled right now let's let's make this uh even uh like even better right so we will align the addy let's add here the image with the avatar so image and here we'll have a source of your eye item avatar url cool and let's also style this a bit so have a width of 80 height 80. border radius of 80 all right i think it's too big maybe 60 all right 60 it's working and now the the funny part let's let's align those here in the middle so i'll align to the center and just i'll align the items to the center right so everything is positioned to the center of the screen and now the funny part is that we need to actually in order to create this parallax effect we actually need to uh rub this image into its own view and add the bigger width to the image itself so we can move it on the x-axis without uh displaying like uh non-images right background so let's start by wrapping this view uh this image into a view all right apply the same width and height so style here with height right but this time we'll overflow hidden the items nothing it's nothing should be visible here but if i'm doing divided by two you notice that the image itself is somehow trimmed right this is the expected behavior because just imagine i will do here just 1.4 so i will increase the image size but notice that only the item width and item height is visible due to this view and overflow hidden and now we also need to align the items to the center and in in this way we actually increase the width of the image but we positioned it in the middle and now we can uh play around with the translate x in order to create that uh parallax effect right but before doing that let's let's style uh those uh just a bit here so let's let's assign here border radius of 18 border width of 10 border color is going to be white great and we'll have a box shadow so shadow color is going to be black shadow offset is going to be let's say 20 shadow opacity is going to be one shadow radius is going to be 20 and sorry shadow offset is going to be with zero height zero and the reason this is not visible is because of the the overflow hidden so let's move those those styles into view and wrap the entire scene here into this view so another view here apply the styles so style all right now it's taking a shape here and a border radius of 18. [Music] and here a border radius of 18. great and this time actually we don't need the border color but instead we can apply a padding of 12 and a background color of white so we somehow simulated right the uh the border and i think that the border radius it's it's not that great so let's shrink down cool and now let's position this avatar so we'll have here a border with of maybe two border color is going to be white and we'll position this absolute it's actually to the avatar and bottom is going to be zero let's say right but this time this should be inside the view amazing and bottom is going to be actually minus height so minus i divided by 2 right and right is going to be let's apply 60. so have it here and i think the border radius it's too small maybe six all right this this should work right so this is what we have so far this is how we've styled the the carousel uh we can actually decrease the opacity here to the shadow so have maybe point six point five all right it's much smoother and maybe increase the border the shadow here the radius all right now the fun part let's let's make this an animated view right so first thing i will need to create here a scroll x it's a react use ref and a new animated value starting from zero and get a current the reason why i'm using a new animated inside the ref is because react will keep track of this animated value whenever this component will be re-rendered so we will not lose track of it and it's also more performant and this is how react native docs it's actually saying to use inside the functional component and with this scroll view inside the flat list convert this into an animated flat list and on scroll event is going to be an animated event and here we will get from native event the content offset the x and assign it to the scroll x and here we will use the native driver right so now when we scroll we assign the x value of the flat list to the scroll x which is an animated value we can play around with it inside the render item and here inside the render item what we will need to do is because this this image here you see this image has more width than uh the visible slide here we can play around with the translate x whenever we scroll through this carousel so we can create this uh parallax effect so let's transform this into an animated animated image and create here an input range and the input range is going to be index minus 1 multiplied it by the width index multiplied by the wave and index plus 1 multiplied to if and the reason why i'm using index minus 1 index and index plus one is to target the how it's going to animate or how he's going to interpolate based on the previous current and next slide so that's why the index basically for each carousel item i would like to apply a different interpolation based on the position inside the flat list cool and now here let's create the translate x which is a we will interpolate the scroll x right past the input range here that we've created above and then we'll have an output range and this time i would like to move it a little right and i would like to move it 70 percent of the screen zero and with multiplied point seven right point seven what this is saying is when you're moving to the next item right so we you swipe to the right like this it's going to animate with minus width so it's going to move to the left hand side if you're swiping to the left the image is going to move to the right hopefully this this makes sense in a way or another uh but mainly this is the idea of uh having multiple input ranges uh for for each particular uh render item and now that we have this uh this interpolation we can apply to the image so here we will go to the image itself and we'll pass the translate x and now when when i'm going to move the carousel you notice that now i'm moving to the left so the image is going to be pushed to the right and it's going to create this parallax effect you see it's it's pure magic is like being a a window and you actually look inside the the mirror the the window [Music] that is it guys i hope that you've learned how to create some parallax type of animation uh applied to the image inside the flat list using animated api 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 or double smash the dislike button it's also going to help me so thank you once again for subscribing to this channel it means a ton to me and yeah without further ado see you in the next video bye

Channel: Catalin Miron

Views: 14,632

Keywords: react native parallax, react native parallax effect, advanced flatlist animation, react native advanced animation, react native flatlist animation, react native parallax scroll, react native carousel animation, react native flatlist, react native animation tutorial, React native flatlist horizontal scroll, react native flatlist pagination, react native flatlist horizontal scroll, animated carousel slider, react native parallel animation, react native tutorial, Parallax animation

Id: fSuYM86JXFo

Length: 16min 2sec (962 seconds)

Published: Wed Nov 25 2020

Reddit Comments

[u/amanngoel]

This is magic!

[u/datorkop85]

Wow. Thank you for creating these amazing videos! Top quality!!

[u/EskimoEmoji]

Awesome thanks!