Easiest React Native Parallax Image Scroll EVER 😱

hey everyone what's up this is SIM from galaxy. Death back with a quick tutorial on how you can Implement a parallx image scroll in your react native application and we're going to use reanimated for that so follow along by creating a new application actually I will use T based routing or file based routing from the Expo router because I just enjoy it and it's easier to set up for me then I will dive into that folder and run npx Expo install react native reanimated so that's what we're going to need to make our cool animation work and to use reanimated bring up your bable config and then simply add the last line here react native reanimated plugin as far as I know it should be actually the last line I don't know why exactly that is important um but you're going to do it like that and once you got it you can run npx Expo start or you can also run just npx Expo which will bring it up if you're doing this in a project which you run before you also need to run npx Expo start-- clear so let me just print this out um we going go here npx Expo uh star D- clear to clear your cache because sometimes you get problems with reanimated so I'll will just keep this here once you got this you should see your simulator mine is actually already pretty empty uh I can tell you why the reason is I deleted everything in the app folder which I also recommend and then we just need two files the first file is the layout files so this defines a simple stack navigation from Expo router and for our one index page I just set the title to be an empty string if we change that uh to whatever test up here that should appear here but I don't want that because we're actually going to do one more thing in the end so stay around until then so here we got it this is our St navigation and then we have one index page where we currently don't see anything let's change that let's change this and let's add a um uh container styling here which I usually do so I'm going to say Flex one and the white background and I will apply this to my view here so styles. container okay that won't change a whole lot uh so bear with me what we need now is of course first of all an image and I will set our image source actually to a Yuri uh what is this Yuri I have never seen this Yuri copilot you're interesting uh um I don't know if I want this or not we will see uh I will probably use a different image let's say I will use this image what would it look like I'm really curious sometimes I'm really curious what co-pilot offers me um but nope that's the image styling that we want okay so ah it's the react native low Okay Okay but well I actually want to use an image that fills the whole screen so I just pick one image from unsplash looks like this so beautiful image okay few things that we need to change first of all we need the image to cover the full width of our view we can do this by getting our window dimensions so we can simply destructure this into getting the width and hate from Dimensions which we can import from react native uh but we don't really need the hate we just need the width and I will use this for my width here and you know if you would say something like this then you can also just uh simplify this to be only that one uh key okay we have the full uh with let's say um image H should be a const because we're going to reuse that value so I will use image underscore hate up here and I will Define this to 300 and I will use it down here instead of 300 okay looks good now what we need as well is to make this in general scrollable so will put a scroll view around our view here okay let's get it here and then I can scroll this okay good start um to make this even more scrollable I will actually add a little block of some dummy text here so I will just use really a huge hate so we can scroll this page and then also a text yeah why should why should you understand the text comes from react native I've just only used it about 300 times by now okay now let me show show you one thing we can scroll this page it's cool um we can scroll it out um everything Scrolls but the thing is this area here this image always stays the same hate if you know parallel scroll usually what you see is that this part whatever it might be Scrolls kind of above the image as if the image was like Z index minus one and this was like one so it Scrolls more on top the reason is very simple it's just that we tell this image part here to scroll out slower so it Scrolls out like this very slowly up while this actually Scrolls a bit faster and that gives the impression that actually this content is above the image so um let's get into that as we now need to add reanimated to our page so what we need is to grab a scroll ref to that scroll View and since we're using reanimated we're not just using a default ref here and I will now disable uh completions because this is getting annoying uh we're going to use use animated ref from react native reanimated okay uh here we go and we can close this actually we can strongly type this if we want to so we can do this in a second now we're going to have to change our scroll view as well to be an animated scroll view component and animated of course comes from react native reanimated as well actually this comes from uh right here we're not destructuring our animated okay now we have an animated scroll view nothing has really changed so far what we need is to give our ref here and yes as always use the second argument here and pass in the scroll ref again no real big change only thing is that typescript complaints so in that case at the type which is now animated do scroll view so now everyone should be happy cool okay now the interesting part begins as you can see nothing has changed so far we're going to easily get the offset of our scroll view by using a function from reanimated which makes this really easy so we can just get the scroll offset and by the way you can also listen to like the scroll events output and do this manually this is like just um skipping one step or one one uh function call and we can use use scroll view of offset and as a reference we need to pass in uh our animated reference which in our case is just the scroll ref now we're able to get this scroll offset and if youve worked with reanimated you know that we now need to create animated Styles so let's call them image animated style and we use use animated style for that use animated style from rect native reanimated in here we can Define how the style changes um based on a few things so usually you return an object in here okay did I make this the wrong way yes so usually we do it like this um and we can at this point already attach the image style because it compiles I'm really happy about that um to the image so we Chang this to be an array that means we still keep the The Styling of the image that we had before for the uh size and then we also going to use our image animated style uh that also complains because now we should also make the image an animated image but once we got that everything should be cool again and now the actual magic happens here in our function so what we want to do is want to transform the image now that means we Supply um transform object here and what I want to do is I want to translate y so that is what I want to change I want to change the Y coordinates and we don't want to do this um based on only the scroll offset I mean we kind of want to do it but we want to interpolate this so I had a great talk um on the podcast on rocket ship podcast with katal Miron before on uh interpolation he's really the goat of this so check it out basically it means we're mapping one value to something else we like mapping a value to a range of values uh in our case we want to use the scroll offset do value um is the general value and then we're going to map this so the input values here are um let's do this easier let's do because then all the things is red so we have the input range and we have the output range they both go from uh one value to another like the minimum to the maximum of that interpolation in our case the um the smallest should be minus image heate then at some point we have zero and then should be to image H this is like our range our input range but we're going to map that now to achieve The Parallax effect uh actually if I would do copy exactly this part here that would be interesting because then I can show you it kind of still works it actually works pretty bad as you can see so the image distorts and stuff happens that you don't really want to all we need to update as well is on the animated scroll view you're going to change the scroll event uh why do I not get code completion here SC scroll well anyway scroll event throttle to be 16 events so now the whole stuff here is a lot more smooth and you see that right now actually nothing happens but it's not too bad because we kind of get the parallx animation it's kind of moved to the background now but of course we still want it to move a bit so what we want to do is we want to make it move slower and we can do this by dividing this by two okay and also the image hate multiplying it with 0 let's say 75 so this gives us the chance um and you see we have the first part so it Scrolls out again which it didn't do before but it does at half the speed of how we do it okay so it looks like our view is scrolling on top of this but at the same time you also usually want to have some sort of scale especially on iOS when you like overscroll uh when you pull down further then you can do that's an interesting uh thing so what you can do is just add another style in here where we want to uh Define that we also want to scale that view and we're going to of course use our interpolate function again we're going to pass in the scroll offset value now we actually just copy this um so we're going to use the scroll offset value then we will go from minus to uh image he and cover that range but now the output should be a bit different so we're going to do um we can do a scale of two at maximum and for the other input values we're going to go back to a scale of one that means when I now scroll here we're scaling it up until two you could use a different value if you think this is too big but now it is kind of stuck up there and scales and you got the smooth scroll out from The View above and with that you kind of have covered the parallx image so in most cases this is already enough and should feel feel pretty good in your applications feel free to play around with these values here but this is pretty much all you need at this point to make the parallel scroll work now one thing that I really like to add to this scenario is playing around a bit with the header and you can get this for let's say quite easy so what you can do additionally is you can modify the stack from expor router. screen just like we did our layout page and can do some options in here it's pretty much the same like you would do with uh react navigation so I can now say a header transparent and set this to True okay this will hide the header that usually also looks a whole lot better if you have some parallex view it really makes it more impressive in my eyes um Additionally you can pass in like a header left thing so you might have some sort of button I'll just add a text for now so let's just add a text text uh back okay probably the text is it there yeah it's kind of there yeah there it is uh but we don't really see it yet so you might want to play around with uh some um colors here but what's pretty cool is that we can also specify our own header background and that will make this this whole idea here a lot better okay so our header background will be an animated view because we want to run some styles on it so you're going to say style equals uh something actually it should be an array more is not required so our header in general will have the following styling uh header let's make an object down here and in that object I want to just set the background color the hate and I will uh set a little actually we don't really need the board out with let's just keep it like this um did we already apply the header I don't think so so let's put in styles. header okay now we have the default header but you notice it's kind of on top of our image okay so the image is cut here I would go until here that means in the default case we kind of want to make this like um the opacity zero maybe and then just fade it in while we scroll and doing that is actually pretty easy given the scroll offset value that we have so let's do another object I will call this header any animated style use animated why am I not getting code completion here um yeah thank you use animated style and again we do the same we return an object and we put the header animated style as an additional property in here so now we have two Styles and this one will now affect the opacity so just like before with the setup we're now not doing a transform but we're doing opacity so opacity uh opacity and then we're going to interpolate once again our scroll offset do value and we're going to map this to from an input range to an output range just like before input range will be let's say zero and to image hate divided by two and along that input range we want to animate the opacity from 0 to one so we put in 0er and one that means in the starting point we see no header is present but while we scroll up until half the size of the image so if the offset is half the size of the image this will go to an opacity of one which usually gives a pretty cool effect um you just might have to time this with the image he maybe going to it like um no times three is is a bad idea uh times 1.5 maybe so that should make it a bit slower yeah probably that's yeah that kind of feels not that feels really good um and that's what you really see in a lot of applications and we got this in barely I don't know 20 minutes now how long am I recording 16 17 minutes so um I was kind of shocked to not find anything specific about this because it's really that easy with reanimated to add a parall like scroll and I think this is a common thing you see in mobile applications on details screens so we got it here we can scale it uh we can slowly Zoom uh scroll it out as if our content here would be above the image and we now even included the header animation which fades in by the way if you don't need the paralle stuff you even learn something about the header because that is also something you see in a lot of applications which start faded out and then fade in the header once you scroll down that page so I really hope you enjoyed this quick tutorial let me know if you want to see more stuff like this in the future maybe you have some patterns that you would really like to see so drop a comment and of course make sure you hit the like And subscribe button so you get notified about the upcoming small and also big tutorials and I will hopefully catch you in galaxies. Dev for one of the courses and of course in the next video so until then Happy coding Simon

Channel: Simon Grimm

Views: 9,775

Keywords: react native tutorial, react native parallax scroll, react native parallax header, react native parallax, react native parallax image, parallax scroll tutorial, react native, react native reanimated

Id: czP_egcFM9k

Length: 18min 7sec (1087 seconds)

Published: Tue Dec 05 2023