Spotify Scrollable Header - “Can it be done in React Native?”

he'll react native developers what is going on welcome to can it be done in reg native this week we scroll for best Jones hello guys I hope you are well William here recording from beautiful Zack Switzerland in this week's episode we are looking at the Spotify scorable header so you see you can scroll in one direction or the other very smooth the shuffle play button floats to the top position and you have this very nice transition with the header from this max size to with mean sighs I'm very excited about this episode for two reasons the first reason is that this is one of the most requested example but I get so I'm glad to finally tackle it so we did I think was the last episode was App Store app of the day was also one of the most requested and so with this one now we we also tackle one of the most requested episode so that's very cool and the second reason I'm very excited about this example is because these collapsibles collaborator are I think very important to give a really nice finish to your app I mean it makes your app looks very professional and it's about time I think we tackle these examples on the on the channel and that we become experts in such techniques so last episode I think was a sham transition with the Apple Store app of the day so again I think also that sham transitions need to become a commodity in in react native and as well as building these beautiful square table headers I looked at a couple of examples from real world apps so I found this one which I find to be pretty cool there are some others which you would build using different techniques and hopefully we'd get to do more examples in the future but this is the one we are doing today and if you have examples of interesting examples of scrollable headers you would like me to look at please send me an email or you can also reach me on Twitter so how would we do this in the react native so obviously we we have a score view right we're scrolling through for list of item items and which is one two three layers so the first layer is this background image which is animated on on scale on the scale property according to the scroll event so the second layer is on top of it is a scroll view the scroll view as the first item in the first component in square view is a is a view that linear gradient so that's why we see the image through the view but you see also this Linea Gration that goes from transparent to black and then you have the list of items and when we scroll we also animate the opacity of the linear gradient to go to black and then we have the list of items the third did I say free layers I think that is for but the third layer is on top of it so here I'm going from bottom to top so the image on top of it we have the square view on top of it have choo-choo elements which aren't the same Lovella so the first one is the header you see on the top you see with the arrow and the following button which has an opacity of zero and then goes to 1 and also we have some opacity animation on the text you can see a the background is already black but the text not quite yet so that's a third layer and the fourth layer is of course this shuffle play button which is perfectly synchronized with Y event of the score view but until a certain point then it's it has all the same it's clamped to a certain value on top position so nothing you see I think if you can decompose this problem in in really clear separate layers here we have four layers each on top of each other and we have the square view which will drive this animation so we're going to declare Y animation value which we are going to pass to all these components because we they're all animated in one way or the other and the square view will drive this animation value so nothing too too complex it's a really cool example to look at and not I think you know all the scrip collapsible scorable header that you see on on real world apps cannot necessarily be implemented with this particular technique but hopefully would get also to look at some other examples but what do you guys think can it be done in react native let's have a look and before we get started two things first of all if you would like to we published channel and you liked the show you can buy me a coffee and I will give you access to the private github repository where I think with all these examples and I will make sure to treat your requests in priority and if you have a new react native project coming up you can check out react native elements it's a premium starter kit for react native it works very well on both iOS and Android it's 80% of what you need when starting your new react native project and so from boilerplate navigation static analysis and tons of beautiful UI components this is what I use for every of my new react native projects so if you have a new project coming up I recommend you check it out links in the video description all right guys let's get started here I created a boilerplate project which you can download in case you want to follow along with this example I used explain it to create this project and I used SDK 43 super exciting lots of I mean some incredible release I didn't get time to play with react native web yet but what I can tell you is that the new typescript support is absolutely incredible and of course we can use books so yeah I have some data to to display on the view which contains album cover and erm stands I'm using use effects to load the album cover I'm showing the splash screen while it's loading once it's loaded I have the album component which contains the four layers but we mentioned before cover which is an image you see at the background content which is a square view which gonna drive the animation header which is this black header and we're going to play with the opacity of theater by default is going to be transparent and then it's gonna get to the opacity of of one as well as a slight delay with the text and we have the shuffle play button which we need to synchronize with the score view and maybe I'm sure I'm gonna start with let's let's start - we need something to drag the animation value so I'm gonna create a Y animation value from oops no okay so import animated react native reanimated and I think but we're gonna need this Y value in every component so I'm going to just pass it as parameter and if we go in content so we have Y which we can declare here as an animated value of number okay perfect and we can use we can assign this value to the on scroll event and have a boilerplate function from Ray - phone Scrolls I can't just do one scroll like this okay perfect so now we should have the Y animation that you being driven by the squirrel you so let's go through the these four components one by one and do the proper animations so let's go to the barn cover when we oh this means but I forgot something which is animated let's call you and let's go back to the Cova component so yeah yeah I have two things when he made the scale of the image and the opacity so we're gonna start with your pasture scale and I'm gonna need okay so I'm adding Y again as animated value of number and we're going to need to use in lathes and may be extra polite as well from animated so we get Y as a property so let's interpolate so we interpolate Y input range goes from let's say - I don't know - 8 of the screen to 0 we output range goes let's say let's just put some random value see how it fits a 6 to 1 and of course we need to at least extrapolate on the right side so extra correlate clamp okay and we need to define I'd eat I'd 8 no right of course what am i eight is the number mind what's up height and the number is eight okay things I'm learning while doing with examples so we can have an animated view as I need a transform scale perfect and on top of the image I have black mask and we're going to animate also the opacity so if I go back here to the example you see it's kind of a bit dark goes a bit clearer goes darker so let's go back here we can interpolate why extrapolate clamp so from let's say again minus 64 we're gonna go to zero default is gonna be zero two and once we had had our Delta we the mask as full opacity so everything is dark and just to show you quickly if I go in model so here I define the mean header height which is status bar eight plus 64 max header height which is relative to the ID of the screen so I could have actually used this constant yeah because relative to the right of the screen to do max header height and maybe four four six yeah let's try that so I don't have to use this here and then I have header Delta which is the scroll the number of pixels that need to be scrolled to go from the max that I to the min dead right so let's have a look oops locked in yes sorry about that and yeah of course needs to be animated view as well should be good now so we do have like the parallax effect and the passage he seems to to be changing as well so that looks good now let's go into content so in content if we go back here what do we animate in content so we have you see the look at the bottom gradient on the cover so it's ight goes down the more scroll you see goes up goes up so we need to animate that as well as the opacity of the name of the artist at zero its full opacity I go down goes to zero and I go up goes to zero as well so let's animate these things so I'm gonna need again I guess interpolate and some extra poor late as well from animated okay so the eight so we interpolate why so we go from zero suit - max head I to 0 and output range so when we are screwed at - head max header ID the height of the linear gradient is zero and if not it's max at a height which is you see it on the screen right with this idea actually I'm sorry about that I got confused okay so this one should be good we need to extrapolate clamp and so I'm gonna need animates in here now we need also to deal with the opacity of the text title here so I can just add animated text and image text opacity which we interpolate on Y as well and we are gonna go from so we go from so at zero it's going to be one when we scroll down to a certain position goes to zero and goes to zero when we scroll to the top as well and yeah I'm gonna pick these two values see how it looks but actually to see how it looks I think we're gonna need to so yeah perfect and here I cannot see it because of the header so let's animate the opacity of the header which is also a third component so we have two components of the black ground view black background view and the text and we know based on the specifics on parts above need to be separately animated so let's do that we also get Y as a parameter which is a very odd number and now let's interpret so we have opacity [Music] when we start to get close to header we have almost whole header Delta pixels we start to animate the opacity so I'm going to do a head out - 16 at head of Delta the header needs to be visible so I'm gonna do God put range we go from 0 to 1 and we need to extrapolate and I need to import these guys from reanimated as the value as parameter and we need to do the same with the text opacity which as we've seen in the example as slight delay so I'm gonna create text opacity which goes let's say from header Delta to header that plus 4 or maybe plus 2 and maybe we start when let's do plus 2 and I can pass it as parameter here as well all right doesn't look too bad I think maybe I will do here - for let's let's see if it's better I would even do something like minus eight minus four yeah much better alright so now we need to animate our last element which is this shuffle play button and I mean the first thing we let's do let's add a transform so a translate y and it needs to be animated you of course and let's maybe just assign translate y to Idris your looks okay so you see it needs to be x minus 1 and I need to import multiply from animated and we're gonna need to add basically a mean sum we have to block so yeah that looks great bye you see Eric continues scrolling but wait a minute so we're going to need to add some min but we need to fix this one which I think let's try max at 8:00 see what looks max 8 - what looks good actually no - the height of the button because we wanted really to have it in between the ID of the button / - yeah it looks much better but now you see it goes through and we need to block this value so we are going to make sure that we don't go below head or Delta and I need to import min sorry about that so it looks pretty good I mean if we go back to the original example this is pretty similar but and you see here so if you look at the tags of wet cuts in the middle perfectly so exactly like in the example so that looks pretty good but can you guys see you see this how's the green button is checking so basically it's not synchronizing properly on on iOS on Android it works great so that's the first time I do some react native and you have something that works that is supposed to work but works on Android and that doesn't work on iOS it's usually the other way around it's supposed to work it works great on iOS it never works on Android it's I've done react native since one to more than two years and the very first time this happens to me so I made some research and there is actually a bug bug and tree forest in the react native project which has been fixed which is planned to be shipped in 0.6 and apparently also in the patch production of 0.15 9 but of course well it would be nice to have for us to have a workaround for this in the meantime if we cannot choose with versions of react native and I think we can find a pretty cool walk around and it's a walk around and we need I'm willing to to make because I'm gonna I want to use a technique which I'm gonna need to reuse in other future examples whether I have to regardless of the fact that there is this bug on the square view so I think it can be good to try this technique so how can we walk around with this berg this regression on iOS we can put the shuffle play button into score view so here it will move of course it would be synchronized with the score view and then once we reach a certain value we make the button disappear and then we have we have of course this button absolutely positioned which the opacity appears so we have true button we will have to shuffle play button but we will play with an opacity animation value which will make it look like there is only one button so let's try I hope it works if it works it's a technique that can be very useful for other animations that we can try in next videos so let's have a look so I'm gonna add a shuffle play button in the content so yeah I have the tracks so I'm gonna add a shuffle play button and what we need is I need to import it just somehow we need to make so this button needs to appear on top so at Max had mean header ID - now just mean at height actually so we are not going to be able to have it in between because I would break the effect exactly so that's good and now we just need to animate the opacity so we're going to add a city value so we're going to add a condition on the Y so we're crawling with corn until so till the Delta values so if great so if Y is great great equal when dealt had Delta opacity is one if not it's zero let's a look mmm - so if - Alf of the button ate Plus sorry my Delta what actually makes sense I should yeah perfect but now we need yaniv so that makes sense because of course it's Delta yeah it's Delta eight plus yeah alfe of the button it's this one because that's exactly the position we are here at zero and then so the last step now is to make the other one disappear so we go into content and we're going to also wrap it into an animated view which has opacity of button opacity and so what is our condition you so we basically I mean text we let me just copy and invert it and if it works we can pass it as parameter so let's just try quickly I mean what doesn't make sense sorry sorry about that so we have opacity I'm gonna pass it here as BTN opacity and if I go into content so yeah opacity is gonna be so if and opacity equals one we are at zero or at one and yeah perfect alright so that looks pretty good what I would do is maybe of the original I'm not sure how easy would be but to have some sort of a platform flag to have the original animation as we built it to run on Android and then to run this one on iOS and then we can also disable it easily once we run the version of Rack native which has this bug fixed I think it's just very funny but the first time we have something not work working on Android not working on iOS I'm pretty actually happy but this workaround of having two identical elements and make it look like as if there's only one by playing with the opacity of these elements we're going to use it to do some I think really cool things in future videos so yeah that's it I hope you enjoy this example I'm looking forward to talk to you guys soon and in the meantime app yakking

Channel: William Candillon

Views: 67,634

Keywords: React, React Native, Can it be done in React Native?, Scrollable Header, Animations, JavaScript

Id: pNw8lPdD4H4

Length: 35min 3sec (2103 seconds)

Published: Tue Jun 04 2019