19 Graph Animation — React Native Fashion

hello react native developers i hope you are well william here recording from beautiful switzerland in the last video we were refactoring the theme and the idea the idea here in the theme is to have like semantic keys for the colors and not uh colors itself because then that's how we can make the theme uh customizable to different theme colors if we use semantic keys and not colors directly but we were dramatically slowed down because of a bug in the background color property which was not properly typed so here if i was right writing type background 2 typescript wouldn't complain which makes the refactoring very very complicated to do and also i mean why are we using typescript right so i did debug the background color type offline and found the issue so we're going to fix this but before we get into it i want to do something we also said we would do in the transaction history screen is to animate the graph when mounting the screen i hope that sounds good let's have a look we are back into the code here and before we refactor the palette i really want to create this graph animation and here there are two ways we can do it we could get a transition animation value from redash and animate on the scale and opacity of these bars but i want to try the reanimated transition api for such a use case usually we cannot really rely on the reanimated transition api to really work nicely on both ios and android but for such a simple use case i think that's completely okay so i want to give it a shot so here we have our bars and so this would be the container of our bar so this is where we would have the transition so we're going to create a transitioning dot i think so to replace the box container and so we even i'd go into the style now something like this and we need a ref and a transition so let's create the ref so transie shoning view [Music] okay [Music] and the transition so i can create outside the component we can do so transition.together so we can do transition dot in when the object appears and um type fade [Music] and maybe also slide bottom and now we need to activate it and so here we need to use and that's the first time i'm gonna use it i think is use layout effect so if we use use effect it's gonna be too late because the component will be rendered already but if i use a use layout effect it's guaranteed i think to be executed before so ref current before the first render and i think that's exactly why use layout effect has been created animate next transition so it animates nicely let me just maybe move this one here was a bit fast so let's do duration milliseconds 650 and let me add some easing and i think here it's called in interpolation so how can i do can i put it here no no i'd have to that's not how it works okay [Music] so that looks good but now i need to add overflowing here [Music] actually is that [Music] fade i don't think the fade is working but i think just the slide bottom is pretty good yeah that looks cool actually and also the fade looks like it was working actually maybe but this looks nice so that was the graph animation now let's refactor our palette and [Music] so here you see if i put background 2 it's not complaining because of this and i debugged it offline and i realized that it was not working because we didn't have any keys here so maybe i can just use a phone tablet [Music] and now you see now it complains properly so we can safely refactor uh palette let me just quickly upgrade restyle because i noticed when investigating the issue what i was running like quite some new versions have been released in between so let me do that and uh so let's try to refactor the palette now so these colors i would move outside so let's so now let's look at the type errors we are gonna get so in transaction story okay so here we have the bars of our graphs so maybe here i should create so we had orange yellow primary so maybe i can do graph one graph 2 for the colors of the graph [Music] so okay [Music] here we're gonna these values these colors don't depend on the theme at all because they're really part of matching the colors of the image so the images cannot be customizable so here we're gonna use palette palette dot orange and so maybe i should also create a green value so palette we can import [Music] so this one i put it as green so here should be palette dot green so here it should be also yes palette dot orange [Music] and here the field i think we can remove because here we use it as a clip path it comes from the other curve where it's actually the proper value i think i mean here i guess any colors if i put black we just i guess here don't want a transparent pixel i would assume but we're gonna see so let's see so we just want to go through the errors one by one so background color light blue which screen is this [Music] background in all fit id so here would be uh i guess so if we go back to the design here that would be palette dot light blue because i think that's the one here to match the background so we have light blue in palette so i'm gonna do style because here it's actually something we don't want to be uh customized because it's really too much the color of the image so palette dot light blue here okay so in drawer we have all these uh colors here we might want actually to have it customizable [Music] so we have pink yellow [Music] um to think how to name these corals so i'm tempted to create one two three four so drawer one drawer two door three door four i don't know i'll i'm gonna do this for now maybe there is a better way to do it so this would be i mean here i can use [Music] sorry drawer orange yellow okay pink violet okay so draw one drawer [Music] pink violet three four [Music] one [Music] i'm not sure if that's the best practice there are four but we will see [Music] okay so now type number is not nice okay so that was also an issue which was not cut before i guess this one i can just remove why is it choose right why would i need to specify i mean it was not working anyways it was just not cut so i think this should be fine i can check quickly but you see here we still have this is very annoying so we still have some errors which are not caught statically why slide the ts6 ah interesting these would be hard to catch [Music] these would be hard to catch statically right and we need to create a separate it's hard to statically type but this is probably a key of colors i mean there is a way but that would be like super complicated we would need like to to do some sort of a builder of a film builder so i guess for now i'm just gonna fix it manually and [Music] i'm gonna use background [Music] [Music] okay interesting and now somewhere we pass we used to pass y so here this used in some place this is used as a [Music] color let me [Music] try that again [Music] so in login i could it be the check box uh right [Music] i'm wondering because shouldn't this one be white variant button color white okay so that's an issue we introduced from the last uh refactoring because yeah we couldn't rely on static typings so that's a regression that was introduced okay so let's continue so gray like gray dark gray so these are the only [Music] value keys here which are colors primary light secondary danger text background here [Music] so that gray we could call info and then actually these look very close gray and lightweight i'm wondering if we cannot merge them i just want to see where they are used before so here just info info okay and then [Music] light gray and light gray why is light gray used in the header i think it's this one let's see if we use gray instead just to see if we can just merge these two values um up but i'm actually yeah okay um so i'm actually gonna use transparency it's something i think i wanted to do anyways oh what can i do undefined that's good yes and then we need to um so that's something i wanted to do anyways and this one we can do we can call it background secondary or background chew so here this by making this transparent we could fix also the alignment so if we go to okay let's fix this one first six errors okay so in underlay this would be background chew [Music] oh empty find okay [Music] and one last thing okay so no type errors anymore that's good one last thing i would like to do in rounded icon so if so will be your line items if background color is undefined we flex start or center no um [Music] i mean it works for the left side but it should be the flex hand or um maybe i'm gonna create an optional prop which is either center flex start or flex end default prop center okay and now if i go to header so if it's the one on the left and background color is undefined it's flex start or center and on the right one it's gonna be flex end or center what i see here is complaining it's because i need also to add the default prop here but actually shouldn't i do rounded icon dot default props here [Music] so now i'm glad we fixed the alignment it's something that was bugging me in a while so we did the uh quickly the graph animation refactored our palette so in the next video we're going to do a new screen and i think probably the profile we're gonna tackle the profile screen so here's some elements we need to factorize from the drawer and probably a fancy uh tab uh animation to implement because we are like two tabs so i am looking forward to talk to you in the next one and in the meantime happy hacking [Music] huh [Music]