Reflectly Tabbar - “Can it be done in React Native?”

react native developers welcome to can it be rec native this episode is all about adding this genre sequoia to your tab bars my guys i hope you are well william here recording from beautiful zoex with zomlon in this week's episode we are looking at yet again at the reflect lee up and more specifically this beautiful tab bar animation so you see absolutely delightful and to try to understand a little bit what is going on let's have a look at it frame by frame so first i was thinking okay it's an svg path animation it's going to be a lot of fun to do and what i did is that i recorded the screen and try to play a frame by frame to see what is going on so here i'm advancing frames let me maybe okay so here we have the button the height expands and after a while the weave expands as well and here we have this wonderful axe and then it expands completely and then the content appears this opacity animation and also a nice staggering to each items and i built an svg path i was animating it and then i realized that it didn't look exactly the same and when i replayed the animation here it took me a lot of time to realize it is that actually we have a mask here and this is why the uh what you the corner edges or the arc look like this so how would we do this in react native we're gonna programmatically build this bubble shape in svg is going to be a lot of fun these yeah these are like super fun to do and then we're going to animate a rectangle as a mask which is also the same corner radius as the bubble and this is how we're going to build this effect and in another video i might uh show you one way to do it which looks a bit different but is done using no mask and an svg path animation but that's uh for another video probably so how would we build this shape programmatically so here we have the button which has the size constant it's a square and we're going to have some radius for the corners which is the same for every every corner and then we need to calculate a couple of measures for instance this segment here is going to be half of the weave minus half of the size minus so here are minus ranges for this corner and minus 3 just for this corner so for instance yeah i wrote it here so this is one formula we're going to need because to programmatically build the path we're going to need these measures and we're going to draw an arc between each segments another segment is this one which is the total height or by the way we have the dimensions here width and height so we take the total height we remove size so minus size and then we remove one corner two corner minus two radius and once we built this one programmatically we're gonna add a rectangle and use it as a mask we can even do it here anything more so up and we're going to animate the weave and height of the mask and also it's x and y position so it can animate nicely so i think you know like i mean i'm going to struggle to do it in figma but at the beginning it animates like like like this we have a corner we need to add some corner edges here which is identical to the one of the shape i have no idea of the values but and then after a while it starts to expand on the weave and so this is going to look very similar to i mean it's going to look identical to the reflectly app but what do you guys think can it be linux native let's have a look and before we get started one thing if you're interested to learn the fundamentals of gestures and animations in react native i hope that you will check out my online course at startree native.dev my goal with this course is to provide you with all the tools and knowledge necessary in order to build incredible user interactions but will run at 60fps even on land devices so if you are interested to learn the fundamentals i hope that you will check it out at start react native dot dev we are in vs code here and we have our open animation value is the bubble of the tab bar open or not we use it to animate the backdrop and also if the backdrop is touchable or not so if it's open pointer event is box none so we can have this one pressable to set it back to zero and we have the background color which is visible if not if the bubble is closed the backdrop doesn't catch any touch event so it's whatever is below catches the event and its opacity is zero and now there is the tab bar which we are going to build so in the boiler plate i already have and you can download the boilerplate in the video description in case you want to follow along with this example i have as a boilerplate the linear gradient which we're going to use and the content of the bubble so let's draw our bubble using svg commands and i i love svg paths and i love to animate them here we're not going to animate it but these are just so fun to do so let's do a path and uh so we're gonna add the d and the fill is this question with id gration so i'm gonna do url dash gradient very good so we can create d here it's going to be an array of strings which we join so each string is an svg path and we join it with a space in between and so here we have the size which comes from the static style part so the size of one button here the radius i took 25 percent of the size you can put any value you want and here we have weave and height which i took so these ratios i took from the reflectively up so let's draw our path and so we're going to start with the top left corner so we're going to move to zero on x and r on y and we need to draw the first corner so we're going to draw an arc and so here i'm going to use instead of using so i can write an arc using the a command like this or so here the coordinates should be absolute so based on the zero zero or i can draw based on the last position relative so this is what this lowercase a means it means here all the coordinates are relative to the last position of current position which here is zero r and so here we're gonna draw our commands relative it's gonna be much easier to think about it then to calculate the absolute coordinate because it's just how i move here from radius go down go up so it's like a game where you move along instead of doing everything absolute and also if we were to animate this path which we're going to do in the future it happens that in this particular scenario the relative commands are much easier to think about so an arc radius x ah radius y ah it's a corner of a circle i mean it's an earth arc circle um x rotation zero and then we have two flags which i'm not sure what they do we're gonna randomly activate them to check let me see what is svg path arc command so these are these two flags large arc flag and sweep flag and i'm not sure what they do but we're gonna toggle them until they give us the expecting expected results and then the destination so here the destination is relative so we go up on the y-axis so we go to regis on the x-axis and we go up so minus r on the um y axis i think but let's let's check it out so here i close the path maybe let me just randomly draw some lines maybe one horizontal line to i don't know 100 and one vertical line to 100 just to see so we are not seeing anything at all is it because of the feel i think here path is in i've made a small mistake here path is in depth so i just need to move it into the actual canva that looks good and so we can see here we probably need to set this flag to one yes perfect um cool let's continue so here on the horizontal side we move to weave minus two corners so minus two r perfect and now we can oh it needs to be minus little lowercase h perfect and now we need to draw another arc so we're going to factorize this into a helper function because here r is always the same so we just need the destination this is going to be arc x these svg paths are so fun to do programmatically and even more fun to to animate um so yeah let's factorize this one here so it will be arc and i think we said r minus r and so here is always the same and the x would be x y looking good and let's do so let's do the next one it would be arc 2 we go so on the x axis to r we go to the right and we go to the bottom so that would be r on the y axis as well perfect now let's do v here and v we wrote it down from the figma file it's um so height minus size minus two corners perfect let's draw another arc so we go to the left side so minus r and we go down so ah cool now let's do also one segment horizontal which we calculated on the figma file and so i'm going to call it because we are going to need to use it on each side so let me call it alph weave and alf weave is so width minus size so size is the size of the square button divided by two minus two corners so minus two times r nope because here horizontal that's good we go to the left side so we minus perfect very cool let's draw another arc so we go we go to the left side minus r we go down so ah and you see we need to reverse the angle so i'm going to do a new parameter reverse so here it's gonna be true the default value is false so here if reverse is true this flag is zero if not it's one perfect looking good now let's go down again here we calculated the value on the figma file it's size minus two corners so minus two hours perfect now another arc so that would be um oops sorry arc we go to the left side minus r and we go down r perfect now we go to the left side so that would be horizontal minus size minus two corners two hours nope minus i would do minus so let me store this value so here would be s and here will be minus s perfect let's draw another arc we still go to the left side so minus r and we go up so minus r perfect now we go now we go up so that would be vertical minus s we need to draw another arc which is going to be reversed also so we go to the left minus r we go up minus r and true so cool now we go to the left on horizontally so horizontal minus s no minus the half width perfect and or less corner which would be sorry arc so we go to the left minus r and we go up minus r perfect so we have our shape and now we need to animate it nicely using a mask so let's create our mask so in the definitions we're gonna have a mask i'm gonna call it mask very original and our mask is gonna be animated so it's gonna be an animated rectangle and i can apply it already here in the path so we do mask equals your url id mask and so all animated rectangle is going to have some animated props and it needs also to have some corner ranges we've seen it from the thingama file which is identical to the shape we've built so we simply are going to write radius x is r and radius y is r and what is every white pixel is going to be the visible part here so i'm going to do fill equals white so let's create our animated rectangle so animate oops i think i never mind animated rect equals yeah perfect oops all right and let's create oh masked so use animated props so we need to return x y weave and height and we're gonna start with height because this one is simple we've seen it from the running the animation is in frame by frame so we interpolate on open value when it's zero it's size so just the square of the button and when it's at 100 percent it's it and then the weave is interpolated from the height so here we use interpolate on open on height sorry and so when the size of the so when the height grows at the beginning the weave is only size and when it reaches a threshold here we're gonna take two times the size but you can choose any threshold it's gonna start to expand on the x-axis so we're gonna have size as an input two times size actually i could write two time size already because we're gonna use extra plate and till uh so height so till height and so at the beginning until it reaches two time size the weave is at size and then only it starts to expand so it's we have weave and so here very important i need to add extra plate clamp and that gives us our weave value from there we need to calculate the x and y value so x would be um [Music] so we're going to interpolate from y so from yeah from weave so we've goes from size to weave at the end we know it's zero and when it's size that would be we've divided we've divided by two minus size divided by two here we don't need to extrapolate uh yeah and then y so size goes from size to eight and when it's height it's zero or so and when it's size we calculated i think it's simply height minus size i think let's have a look yeah isn't that cool what a fun animation now let's animate the rotation of the icon and the way the items appear so we have our icon where is it it's here so let's wrap it into an animated view and i'm gonna have style equals icon so use animated style and it's going to be a transform we will rotate transform rotate we do a mix on open that value when it's zero so you see it should be when it's zero it should be straight so i'm going to do minus math pi divided by 4 45 degrees and then it should be at this position when it's open so that would be zero up so here that's the correct position perfect isn't that fun such such a fun animation now let's do the content so again this becomes an animated view and we're going to translate y and also animate the opacity so let's add a style called item there that's good use animated style opacity we want to have a late opacity so we're going to use interpolate on open dot value and we're only going to start at let's say 75 of course you can pick any value you want so we're going to go from zero to one extra plate clamp and then we can add the translate so transform translate y and let's so mix and open the value and we know at the end it's at zero and if not it's at height plus plus a little something something which is here this uh instead like for the safe area inside the bottom so plus insets dot bottom let's have a look so here perfect it animates nicely we could add some staggering to the to the items but just a fun animation and quite simple actually to implement guys i hope you enjoyed this example a delightful user interaction which is seemingly not so difficult to implement the reflectly up look and feel is really great and i think it's something we should all aspire to build when building apps in react native let me know what you think in the comments below i am looking forward to talk to you soon and until next time happy hacking [Music] you

Channel: William Candillon

Views: 39,708

Keywords: React, React Native, Can it be done in React Native?

Id: B52na2LxQu4

Length: 24min 45sec (1485 seconds)

Published: Thu Mar 04 2021