How to create Header Animation using Reanimated | Parallax Animation | Sticky Header

hello guys welcome back to my Channel today I'm going to show you how to create header animation like this using re native [Music] reanimated before we dive in please subscribe to my channel to stay updated with new content now without further delay let's get started we will be building this animation within our existing react native UI project in this project I recently added dark mode support all right we have the header animation tab let's open up animated header 1 you can see here I have created initial designs without animation now let's move to the code I added a screen in the app.js file in Our Roots stag then I added header animation list inside our accordion here I have passed our navigation route which is header anim all right let's open up the header anim one component here I have added a left arrow button which is an absolute position I have also added an image the image is added in a separate file and imported here we have the image Styles defined here here I have set a constant image height all right also added a scroll view below the image it contains some text and some horizontal list of items the map list is a reusable component used to map an array of items if the data is empty it will return return null we can pass our custom rendering item similar to a flat list and use this map according to our requirements with or without View and here I just copied the text and the horizontal map list all right first let's add a gradient overlay above this image for that you need to install react native linear gradient here we need to pass an array of colors that you want to show as a gradient our first and second colors are transparent and our third color is black so 66% of area is transparent and 33% of area is black colored save it okay nothing changed let's add a Styles add styles. image overlay set the height to be same as image height and make this view absolute by adding stylesheet do absolute fill object save it all right now you can see it is clearly visible now let's add a View for the sticky header add a text component and give it title Styles here in the constant we have the title imported over here all right now you can see here this title looks like this this is because the image is bigger than its given height and the scroll views background Heights the extra height of that image the hidden image is fully visible because of this title text which is above this scroll Lo and it's transparent if we add the same style over here then we can make it hide again but we don't want to do this either we cannot leverage its resize mode prop so let's increase the image overlay height by adding plus 50 all right now it looks perfect the title is on the overlay now let's add animation on scroll we will translate the image in the negative y- AIS when we scroll so let's make the scroll view animated make sure you import animated from the right module if if you don't get any suggestion remove the curly brackets now you can see we are getting suggestions on scroll and handle scroll let's create the handle scroll function const handle scroll equal use animated scroll Handler this function will give us an event which returns some events on Scrolls here we want to store this events value into an animated shared State let's create it first const scroll yals use shared value and pass the initial value as zero now now we can edit here scroll y. value equals event. content offset doy we need y offset value now it will hold the scroll value into this scroll y State fix this typo now let's make this view [Music] animated add a Styles scroll animat dis Styles let's create scroll animat dis styles scroll animated Styles equal use animated Styles and import it from reanimated here we need to return Styles object const translate y equal interpolate and here we need to pass animated value which is a scroll y. value add input range which will be started from zero and end value is 320 add output range so here we will translate it from Zer to our image height and here we need to add minus here add transform and here add Translate Y and save it now let's check it we use interet to map the scroll by do value from the input range of 0 to 320 which is scroll value to the output range from 0 to the image height we use Translate Y to move the view Up and Down based on the scroll position you can notice it is over translating so let's add clamp here extrapolation do clamp now I can see it works fine let's add an animated header View and animated do view add header Styles here here I have Define this header Styles all right let's add header VI animated [Music] Styles select scroll animated style option plus shift plus down arrow to copy the selected lines now update this animated Styles background color equal interpet color which is used for transitioning from one color to another color we cannot add clamp in interpolate color change its output range add colors the dark gray as a second color and transparent as a first color so we will transition it from from transparent to dark gray now return this background color [Music] here you can see the header color changing from transparent to dark gray all right now you can see the title is not looking good here and the back button overlaps it let's animate this title first make this text animated and add title animation in Styles copy this Styles change this name remove the color from from here and change the output range to be from 1 to [Music] zero name this opacity so we will animate the text opacity from 1 to zero and we are doing fing it out yeah it [Music] works now let's add another title change it style to be title 2 so here you can see our our main title has a phone size of 32 while title 2 has a phone size of 18 we have aligned it centered now make this a style function and add false value here and pass True Value over here now add parenthesis over here and add an argument fedin of type Boolean depending on this fedin Boolean value we decide the output range if fed in is true then range it from 0 to 1 otherwise the range is from 1 to to zero pass this output range here all right now save and check [Music] it you can see the first title is hidden and the second title is visible on [Music] scroll here you can notice both titles are visible at the same time so let's add one more range and both output [Music] range and also update the input range as well which is 120 so at scroll offset 120 both text opacity will be zero all right when you scroll yeah now both titles are not visible at the same [Music] time so here the header is taking up some extra space let's fix [Music] it now make the first title's position absolute but it is still has some issue the header size is [Music] decreased now add margin top to 34 entitle two Styles all [Music] right now it looks [Music] elegant now let's add a scale animation to this [Music] image convert this view into animated View and add animated image Styles copy this and change its name remove this and change opacity to scale change its input and output range so when we scroll it will decrease its size its initial value is 1.4 and end value is 1 so initially we scale this image and when we scroll its value should be decreased to its actual size add transform and pass a scale here now check it you can see the initial image size is changed all right it is descaling yeah it works well check it on iOS yeah it works iOS support overscroll the image is scaling when we over scroll when we scroll it upward meaning the native Y axis it should not be over descale so here add extrapolate right extrapolation do clam so in the upward Direction it should not be over [Music] descaled all right so that is of course not visible but we should be careful about it [Music] now let's add some final [Music] touches now let's make this view animated add an intering prop here and pass padding import it from RE animated ping. duration which is should be 400 and delay should be indexed into 300 all right now you can see items animate one after another copy the same view into the second map list as [Music] well all right so this description text does not look good so change its style let's add text alignment to justify all right now because of our image height the scroll view is not fully scroll so let's add container content style and pass padding bottom 100 uh little bit more let's change it to 120 all right [Music] let's make this button functional now for navigating back we need navigation you can use use navigation you will get navigation from component props so you can also utilize it here so in this on press add navigation do go back now let's try all right [Music] everything looks perfect that's it thanks for watching I hope you enjoyed and learned something new and for more such videos please subscribe to my channel and hit the Bell icon to get notification when I upload a new video I'll see you in next one till then take care and [Music] bye-bye

Channel: Vishal Pawar

Views: 1,827

Keywords: React native, animation, stack, mobile, screen, how to, v5.x, app, ios, android, custom, interpolate, scale, card style, navigator, nav, stack navigator, card animation, cardstyle, header mode, create, customize, component, custom component, animated, beginner, expo, Collapsing, opacity, ecommerce, mobile app, header bar, parallel, sticky, header animation, reanimated, react native reaniamted, sticky header, interpolate color, translate, translateY, text animation, scroll animation, Parallax animation

Id: GrIFxRRhzLg

Length: 14min 2sec (842 seconds)

Published: Thu Feb 29 2024