14 Custom Tap Gesture — React Native Fashion

hello react native developers i hope you are well william here recording from beautiful switzerland in the last session we've built a nice swipe animation and here in this session i would like us to finish the outfit id is a screen by doing the categories here's here which are horizontal scroll and then i would like us to look at the uh masonry of the favorite outfits screen especially selecting and deleting item because i think here there's maybe a nice animation we can build by removing the items and using react native reanimated for the layout transition i hope that sounds good let's have a look [Music] so we are back into the code here and i have like the swipe animation and um i think i'm gonna create the categories component i think this it definitely should be where categories where it should be but i'm not 100 sure let's see so let's create it quickly create categories component and so i should copy this data here i need the color and actually maybe i can do copy as svg let's see maybe it's going to be way too big for me to get the labels and colors so i definitely have the colors where are the labels for instance if i search for summer huh what it's not it's not working anyways so let's do the categories so we have for instance an id new in a title and a color which would be this one here okay [Music] all right so we have here a horizontal scroll view so this one is horizontal and we can map over the categories [Music] and have a category component key is category id [Music] so square view from react native and we can create the category component so yeah cathy gorey and we have color and the title as a string and an id also stream okay category color title and we need to define a size so here we have 60 [Music] um so we have two elements first the title so texts we import from our components perfect [Music] and then i guess i mean here i guess we can use a view we have weave is size [Music] height is size border radius is size divided by two and background color so color we can rename to background color um okay interesting so we need a container [Music] that actually makes sense that we would have this because we have a horizontal scroll view um so let me create a style oh let me go back to using box and here would be texture line center margin left medium okay [Music] and align items center okay here we can add also margin top small um he also managing top [Music] small it doesn't seem to be a scrollable i'm wondering if it's because we have an overlay so are the cards overlaying here we have an absolute feel yeah so the cards overlay everything so should i do something like this maybe so now it's credible this one is too what did i do is the square view here taking some style background color just to debug it quickly i assume here the problem is yes so scroll view is a bit too big should i do a flex shrink of one [Music] uh what about wrapping it into a view that's better we still have a big um let me check [Music] i mean it's not that bad let's look at the container so that's good now i guess i guess that's how it should be perfect okay so now we can scroll around that's perfect and if we go back to the design here we have like a nice border uh i'm thinking and maybe it's if the category is selected or not so here we should have a state to the category selected set selected default is false and so here we can tap so should i use let's see i'm going to use a rack is that correct button and if not i will use borderless button so when we press the button we toggle the state so on press set selected and we toggled the previous value okay rec button comes from react native gesture handler and now yeah that's not good margin [Music] if i do borderless button i'm always confused on what's the difference between the two yeah much better much better now let's change the design if it's selected how do we change the design um what i want to do [Music] i'm not sure um let me think [Music] i would love i would like here to have [Music] the [Music] i'm going to create a variable called padding which is going to be the smaller circle so the smaller circle is going to be size minus padding so maybe four pixels four points and so what i would like to do is here we would have size minus padding [Music] size minus padding here also or maybe it's easier if i call it small in outrageous is let's say 30 outer radius would be 4 34 then let's just try so here this one is inner radius this one is inner radius times two this one is inner radius times two this box here is going to be of size of outer radius so weave is auto rageous height auto radius oh that will be here i'm going to create a subcontainer and [Music] no oh time's true sorry okay now here we need justify content center align items center okay it looks good i like it and now if it's selected we have an underlay with a background color which is white but a border which is of color so if selected we have the outer radius circle it's funny because we always have the same boilerplate for these circles i'm wondering if we almost wouldn't need a like a box component but which would be a circle um so here we have outer ragers no not what am i saying here we have otter ragers this one is a synthesis number it's absolute fill object and background color white but maybe i don't need to specify it but i'm gonna do border color is background color and border wave one yeah isn't that cool um do you think i should almost [Music] like is the opacity distracting i mean no i guess if you tap quickly i feel like the opacity is distracting let me try here to replace it with touchable without feedback hmm [Music] i don't know let me know what you think here it's nice to have the feedback when we keep but if we go quick the animation looks a bit strange here we almost would want to do a custom tap handler and only trigger the opacity change if the gesture hasn't been released yet so almost to have a delay in the in here we probably want to remove the scrolling indicator [Music] show horizontal scroll indicator i'm really bothered by the by the animation [Music] let me try i mean i'm losing my mind here let me try to see if i can build a tap handler that makes sense quickly let me okay [Music] sorry because i pre-apologize because here i'm maybe falling into a rabbit hole but it's not so interesting but let me save my work and try to do if we can do a custom tap handler so here i'm gonna have borderless tap [Music] so and so we have some children and the on press event so here we're gonna use tap gesture handler from react native gesture handler children no we have we need an animated view we put the chin run so [Music] we have children on press uh i have zero confidence that this is gonna work but we have the gesture and learn from use tap gesture handler from re dash and here we have also the state of the gesture which we are going to use animated oops we get from react native reanimated yes that's good use tab gesture handler from re dash so let's try so first to have the same level of functionality if the gesture state is at and we execute on press we call back to the javascript user end so we can execute on press so we're gonna check first see if this works and then try to match or to build a better animation so now we've matched or at least we have some basic tap handler now we'll have some opacity animation here so we need to create an animation value for the opacity or can we so we're gonna need a clock because we want basically to trigger the opacity change only after a certain amount of time so clock we're gonna create a clock use clock when the gesture starts state equals state dot begin we start the clock [Music] when we end the gesture we stop the clock so here start clock [Music] we're gonna need to store when we started the clock so here stop clock use clock from redash so here we can have start equals use value of zero and so when we start the gesture we set probably after we start the clock starts two o'clock and opacity we can infer now based on the clock value so we're gonna have style opacity use value from re dash and now we have opacity equals um so it's a condition so it's let's say either one or zero five i guess it's zero five and we'll see [Music] if clock is so greater when clock is greater than start plus 300 milliseconds and probably we'll do less than much less than franklin uh greater when start and state begin or clock running so we add and the clock is running okay so that's not working clerk is greater um i know because this one is executed for many frames so if state began and clock is not running [Music] that works it's just too slow and also here [Music] so it's a bit too slow maybe i do 100 but also it looked like it got stuck at some point so this is nice and you see i went fast this is good i went fast if you go fast nothing happens which i think is what you want and if you press you see something happening [Music] isn't that cool [Music] yeah i think you see here it can get stuck sometimes [Music] in this state and i'm not sure why we should stop the clock before or maybe if the state ends and here we stop the clock you know in case we have failed or cancelled and maybe that's what happened we had to stay canceled let's state is not equal state began we stop the clock just to make sure we never get stopped i think it's cool and so you see i guess no so if [Music] so yeah i'm gonna i cancelled the gesture [Music] but let me [Music] um [Music] let me try to debug this quickly so so i try to display one and two i want to debug the state of the gesture [Music] and maybe if the clock is running [Music] maybe also opacity and clock running [Music] i knew i was getting into a crazy rabbit hole okay okay and here so we at state 2 which i assume is began and then we go to state one so state one and the clock is still running so this instruction doesn't seem to be executed somehow so let me just also here add the debug so the clock does stop okay so opacity if the so this should be 0.5 only if the clock is running it might be a problem actually with the evaluation of the node could it be so opacity now becomes a value and here so it's zero five one yeah okay so somehow yeah so opacity the value was set only when it was evaluated and so something didn't trigger its evaluation so by setting the value for every frame seems seems to have fixed the problem i like it i think it's uh i don't know i mean it was a bit of trouble but also it's good like to see reanimated one uh gestures and animations maybe we can remove it with the change it with the borderless button but that was like a fun gesture to beat i'm gonna put this one back i think it's fun so i guess i'm gonna take a small break here and so this took way longer than expected and in the next part we will do the masonry of the favorite outfit screen and hopefully the deletion of the items with a nice transition i am really looking forward to talk to you soon and in the meantime happy hacking for you