Airbnb Header Animation | React Native | Reanimated

[Music] so in today's video we'll be using the react native free animated library to create an animated header some of you may have seen this animation in the air BnB app and now it's pretty common everywhere the moment you scroll down you notice that the header gets hidden and when you scroll back up from any position in your app you notice that the header appears again it does not wait for you to reach the top of your scroll view for the header to appear again as always we start with an empty react native project that I've created with Expo and I'm running it here on my iPhone 10 simulator here we just first get into this view which we have by default and pass in another view with the Flex of one then we'll pass in our header which you want to absolutely position here on the top so let's pass in another view and let's style it give it a position of absolute left to zero right of zero and a top of zero let's give it a height of 74 now we'll also give it a background color of gray so then we have a head of next we'll go ahead and import a scroll view into our app say it's a scroll view and here we'll pass it in below our header inside a scroll view will display a couple of images which I already have in my assets folder and I'll import them in here so basically it's an arrow of images each image has an ID and a URI which points to its path within our scroll view I'm gonna map over these images and for each image I'll just pass in a view which contains an image inside it let's go ahead and import image as well from react native for the source of the image I'll use image dot URI let's style the container of the image by giving the height of 400 a margin of 20 and for the image we'll the style it by giving it a flex of 1 a height of null a width of null and a border radius of 10 and there we see we're getting our images to make sure that a header comes above our image let's just give it a high enough set index so let's say their index 1004 Android we'll give it a elevation of 1000 we also need to make sure that we pass in a key here which would be image dot ID so they are scroll view is working now we can go ahead and animate the header for that let's go ahead and install react native reanimated so open up your terminal and we say yawn and react native reanimated let's go ahead and import it so it's a import animated from react native reanimated first thing we do is we'll change our header to an animated dot view and we'll also change our scroll view to an animated dot scroll view now every time we scroll we want to take that scroll value and store it into another variable so here we'll say on scroll inside this we want animated dot event which takes an array within which we want the native event access the content offset and then you want to store the Y value so here let's go ahead and create a constant called scroll Y which will be a new animated dot value and we start with the value of 0 let's pass that in here so earlier we had hard-coded a header height we'll move that out into another constant so let's say header height let's go ahead and create that header height and set that to 70 now every time we want to scroll down we want the header to be hidden and when we scroll back up we want the header to be visible again so what we'll do is we'll interpolate over this scroll Y value which is storing us called position and use the value we get to hide our header so let's create another constant let's call it header Y and we'll use something known as animated dot interpolate within which will interpolate over scroll Y the input range that we're looking for is from 0 to the height of the header and the output range that we want is 0 again when we haven't started scrolling and when we scroll to the height of the header we want the header to move out so you want to go to the negative of the header height then we'll go ahead and pass this header Y to the transform property of animated view see I would say transform inside this we want to target translate why and we want to set that to head away before we test this out we'll go ahead and set up scroll event throttle and set that to the maximum value of 16 now when we scroll down we notice that the header gets hidden but when we scroll back up we're not seeing the header appear again that's because it's only going to appear when we reach our Y value so to fix this we'll go ahead and create another value here and let's call that diff clamp scroll Y and within that we use something known as animated or tiff clamp which basically takes the animated value that you want to clamp as the first property as a second property it takes the minimum value you want to clamp it at and as a third property it takes the maximum value so here we pass in scroll Y the minimum value you want is 0 and the maximum value of you want is header height instead of passing in scroll VY here will pass in diff clamp scroll Y let's save that let's scroll up we see that the header gets hidden and the moment we scroll back down we see that the header appears again but what has happened because of the bounce effect of our scroll view a header gets hidden so in our animated the scroll view let's disable the bounce so it's a bounces and set that to false now we can make sure that it doesn't get hidden inadvertently just I had some finishing touches to our scroll view we pass in a style give it a padding top and here we'll pass in the header height also for the height of our header we'll change it depending on the platform so for that let's import in platform from react native and here we'll detect which platform it's on by using platform dot s if that's equal to iOS then we'll give it a value of 70 plus the height of the notch which is approximately 40 to 45 pixels so let's give it a value of 1 1 5 and if it's Android we'll give it a value of 70 plus we want to also give it the value of the status bar for that let's go an important state a spa here nobody passed in state a spa dot current height let's pass in a text inside our header and see how it displays let us call an animated header let's align that to the center and as we see that it's still closer to the top so for that we'll give it a padding top which is equal to the height that we had added which is close to 45 and then we see that looks much better if we just run our animation again we notice that it works perfectly

Channel: Unsure Programmer

Views: 33,207

Rating: 4.9299126 out of 5

Keywords: React native reanimated, react native animations, Airbnb Header Animation, Diffclamp Reanimated, Simple React Native Animations, Scroll Animations

Id: JPx8IlfYQ-c

Length: 7min 29sec (449 seconds)

Published: Tue Aug 13 2019