Medium mobile article - Sticky footer - React Native with Animated API

oh alrighty guys so welcome back to my channel in this video we are going to create a sticky element while scrolling i was inspired by medium article page they have this beautiful sticky action bottom that's moving along with the scroll but after passing a particular threshold is going to be sticky and i'll show you my way of doing it in react native by using scroll view and animated api let's play the intro and jump straight into vs code and start building the sticky element shall we all right you guys so we are in vs code here i've already created a project using expo and i've created a couple of things here uh the link to the starter code is in the description so please follow it up download the code add it in your id and we will have the same ground or the same starter point so let me look into what we have so far we have an articles uh paragraphs which is a list of paragraphs right and then a method called get image that's going to return a random image from one splash with a black and white and down below in the main render i have i'm rendering basically this footer with an icon and the text on the left hand side and then three different icons on the right hand side basically this is going to be the sticky footer from our tutorial so first thing i like to create a scroll view inside it add some paragraphs and afterwards uh create this dummy container that's basically going to be the trigger point for our sticky footer so let's start inside the the render with the scroll view inside the scroll view will iterate over the paragraphs we'll map it together text and index and return here a view containing a text with the text also apply here a style a key sorry with the index and apply a style to the text as styles and then it's called paragraph hit save now we have this scroll view that contains all the paragraphs and if the index modulo 3 is equal to 0 i like to display an image so image will have a style of styles image and then a source of uri get image and then the index hit save and now we will display for every three paragraphs will display an image cool so we have this scroll view also let's give the breathing room here so content container style padding it's 20 so we create this breeding room around and down below here so if i scroll down down below here i like to have a dummy footer or the trigger point for our sticky footer and then some featured images so let's create a dummy footer so it's basically a view that's going to have the same styles as our bottom actions right so uh it's going to create this space the bottom actions actually has a specified height the fixed height so that's why we have this beautiful view also before rendering the paragraphs say black and white article and style it so styles it's going to be heading so i'll display this black and white here also apply a margin top of 10 or maybe 20 just to to have the same the same spacing here all right and down below here after the bottom actions we would like to display the featured images so we'll iterate over the featured so let's first create a view and inside the view we'll iterate over the articles but only get three of them or maybe four map get the text and then the index and return here a view containing containing the text that's text and above an image with the source of uri get image and then the index and also style it style styles image and apply the same style styles and then paragraph and here down above will have featured as text and the style for it is going to be styles featured title and now i'm looking at it so the style for the image is going to be featured image so hit save also don't forget to pass the key so it's going to be featured and then the index have this featured right and what i like to do is to give this a flex direction of row and then a margin bottom of 10 and also for the text i would like to display it only uh two two paragraphs or maybe three let's let's do it with three so number of lines is going to be three and now we should trim it to only showing three different images all right i think my internet connection is pretty low that's why maybe the uh the images are not downloaded or are not displayed so yeah forget sorry about it but the main idea here is that here we have this footer and if i'm adding a background color of red and scroll down you'll notice that this is the this is the footer and if i'm positioning this absolute so i'll position this absolute and at the bottom zero and then left zero right zero you'll notice that we have the same height right but now this is the moment where we would like to trigger the stickiness right so it's going to be sticky sticky sticky and then when you're we will reach this point here just at the top edge we would like to move it along with the scroll y so let's also give this a padding horizontal of 20 so we will have everything lined up here and in order to do that we need to first convert the scroll view into an animated uh scroll view get the scroll y and calculate where is the top offset of that element so first thing let's convert this scroll view into an animated scroll view hit save create here scroll why it's equal to react use ref a new animated value starting from zero get the current the reason why i'm using uh use ref is because i would like react to keep track of my animation value so whenever this component is going to be re-rendered this value is not going to change and down below in on the scroll why because now it's unanimated we can add an animated event so on scroll is going to be equal to an animated event get from the native event content offset the y and assign it to the scroll y and we will use the native driver for it hit save nothing should have you should change right but now this the y position of the scroll it's actually mapped to a scroll y and we can interpolate it but how we can interpolate it basically we need to get the layout measurements for this red container here so we will be using the on layout system so on layout it's equal to an event and we will set the bottom actions with the event native event and then the layout but then this bottom actions it's not available so let's create here a state so const its bottom actions and set bottom actions is going to be a reactive state then it's going to be null in the first place initially right so now when uh this this footer this red one is going to be uh rendered will have the layout event get the layout coordinates like x y width and height assign it to the state and now we can play around with the scroll wire and calculate the top edge that's going to trigger the stickiness so let's do that the let's get the top edge the top edge of this footer it's actually going to be the bottom actions and why notice the question mark here is because it might not be in the first place because this is going to trigger be triggered from top to bottom right initially is not going to be rendered it's not going to exist it's going to be null but then after everything is going to be rendered we will have the layout measurements so that's why initially is going to be now so that's why also the question mark here so we'll get the y value we'll subtract the height because we position this initially absolute so it's going to be at the bottom of the screen but now we need to add back its own height so bottom action and height so basically the top edge is going to be the y value which is here but we subtract it the height of the screen because we position this absolute so it's basically the offset where we are going to start from so instead of starting directly from zero we are actually going from height minus the height of the bottom actions hopefully this makes sense but now we have the top edge here and with the top edge we can modify this bottom actions to reach to be sticky or not so first thing i'll i will need to convert this uh view into an animated view so animated view animated view and down below here we'll have a transform we'll have a translate y we'll interpolate the scroll y and we'll have an input range and the input range is going to be the following so if you go like this beyond zero so if you're going uh minus 20 let's say i would like to be sticky so i like to to have it here so it's going to be the input range is going to be -1 zero zero and then top edge minus one top edge and then top edge plus one so and let me let me also create the output range so zero zero zero zero and then minus one so what i did here is basically if you are before the top edge including the top edge stay stay where you are otherwise just move upwards and so the whole so right now you'll notice that right now this is not going to be sticky but after moving it at the top is going to be sticky and the reason why i'm doing this 0 and -1 is because notice that i don't clamp the interpolation so basically here if it's uh with this input range zero minus one and the output range zero zero i'm basically saying if you are at minus two is going to also be zero because uh this is how linear interpolation actually works but on the other hand here if you're a top edge is going to be zero but if you are a top edge plus one just decrement it by one if you are a top edge plus two decrement it by two and so on so forth so it's going to apply this interpolation to the bottom sheet but now we have this error saying that we cannot interpolate like not a number right and the reason for that is initially we don't have these bottom actions so indeed we don't wanna actually render the the footer unless we have the measurements of the dummy or the trigger part for the sticky so down below down here we'll say if we have bottom actions then we would like to render the animated otherwise don't don't do it and now you'll notice [Music] okay that was a silly typo all right so now you'll notice that it's going to be sticky so scroll it scroll it and now when when this uh this bottom it's actually reaching the top edge is going to remain sticky so it's going to be sticky and it's going to apply exactly the in in interpolation of the top edge of the scroll white sorry so if if i had to make this more visible let me add an opacity here to the to the container so notice it's 0.5 right so it's the the red container let me actually make this uh 0.8 this should do so notice that now now i'm scrolling scrolling scrolling scrolling and now i'm hitting the top edge so i'll hit the top edge and i'll remain there and now it's it's going to move along with the with the scroll y position oh before it's the last part that's actually missing is to animate the things inside based on this uh this scroll y right and i'll need to actually create this input range separately so we'll have here an input range so we'll have this input range here right nothing should change but now we can reuse this input range and start animating those elements on the screen so initially i would like to hide the number and hide those two little icons and move the dollar sign on the right hand side so let's start by animating the the text here so well we have the three two let's convert this into one let's convert this into an animated text and the style for it is going to be opacity will interpolate again the scroll y interpolate it has the same input range but the output range is going to be zero zero zero zero zero so one here right so it's going to be like if i hit save now when you see now when this is going to be sticky it's going to be uh one but i noticed that at the top edge actually it should be one so it's one right one one one one okay but notice that this is happening really fast and we would like to avoid this so we can start the animation with i don't know 30 pixels before before the actually trigger point so if we go above here where we decrement it by one we actually say hey you know what just start the animation at top edge minus 30 and then the top edge right instead of one pixel just start the animation at 30 pixels so now if i scroll you'll notice that the animation is more visible so you see it's more visible it's starting to animate based on the scroll why before actually the stickiness to happen and this is really really nice because now we can actually play around with the animation of those elements here as well so if we go down below where we have the the icons we can actually modify those icons those views to be an animated view and animated view so initially i would like to hide those two icons so let's do that now so where we have the let's start with the share icon here so we will have a style here so opacity is going to be scroll y and basically we'll have the same the same opacity as this one so opacity is going to be opacity right so now notice that those icons are not visible but now it's going to be visible visible right and apply the same the same styles to the the other icon here so hit save now we have the the dollar sign in the middle when we hit the trigger point for the stickiness they will appear but initially i would like this dollar sign to be on the right hand side and when we are doing the visibility here toggling or playing around with the opacity i like to move it on the right hand left hand side so here on the icon i will apply a transform and i will say translate x is going to be a scroll y interpolated the input range is going to be the same so input range input range but the output range is going to be 0 for -1 zero for zero and now it's going to be i would like to move it on the right hand side so it's going to be sixty zero zero so actually this should start from 60 60 and then we when we uh are at the edge at the top edge we would like to shift it so move it move it and now we should start the animation you see we start the animation whoop this is looking really good and the reason why is the 60 is because each each particular icon has a 60 pixels width so it's really nice to actually have it fixed height or fixed width in order to have those calculation really easy to done to be to be made but you can also use on layout or use a fixed height as or a fixed size as you wish so basically if now i'm going here and make this fully white now if i scroll scroll scroll and you notice that this is actually animated and it's actually sticky and if you'd like to have a more smooth animation you can start the animation with 60 pixels before the the top edge so now you see is like it's a smoother animation basically right [Music] all righty guys so that was it i hope that you've learned something new you can apply it in your existing project or a new project of yours 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 and like this video other than that see you in the next video thank you so much bye bye guys

Channel: Catalin Miron

Views: 13,573

Keywords: react native advanced carousel, advanced react native tutorial, react native advanced animation, react native pagination flatlist, react native animated, react native animated api tutorial, react native animated api, react native flatlist, react native medium, react native medium tutorial, react native scroll animation, react native sticky, react native sticky header, react native sticky footer, medium.com animation, medium.com mobile app, react native scrollview animation

Id: 4Pw4du1IrDs

Length: 22min 39sec (1359 seconds)

Published: Wed Dec 23 2020