React Native Gesture Handler and Reanimated Tutorial

react native developers this swiping user interaction is an absolute classic when building a mobile app [Music] i hope you are well william here recording from beautiful drake switzerland and this fun user interaction is a perfect opportunity to harness the fundamentals of react native gesture handler and reanimated [Music] first let's have a look at the transformations we need to apply and then we will focus on handling the gesture we have our cards and we overlay them on top of each other using an absolute fill now the first transform we would like to apply is a slight rotation on the x-axis to give it a nice 3d effect however you can tell that this looks a bit strange why is that if i draw lines across the corners of the card we always get a rectangle this is because we are missing the perspective transformation the perspective will add a simple projection of the 3d points onto the 2d canva so points which are further away will look smaller we add our perspective and now the lines across the corners of our cards have become a parallelogram and it looks much better you can of course adjust the value of the perspective to your needs the next transformation we would like to apply is a transformation along the z axis here we want to use a random value let's say between -10 and 10 degrees to give it a nice effect of the cars being stacked on top of each other another transformation we would like to add is scale so that when we select the card it grows a little bit bigger here we use 1.1 meaning that the card will grow 10 percent we can also move the rotation on the x-axis to zero when selecting the card to give it this nice effect and finally we would like to move the card around we just translate x and translate y for that r transform is now defined and now we build a small punjab chandler to drive the values of the transformation we create an animated gesture handler from reanimated2 when the gesture is active we assign the translation x and transition y a value to the x and y coordinates of the card now translation x and transition y will always start at 0 when the gesture is active this means that when starting the gesture we need to remember the position of the card for that when the gesture starts we store the x and y value into the context object the goal of the context object is to provide the state that is available across different states of the gesture onstart onactive on end and so on now that we remember the position we simply added to the translation values and now our cards should translate nicely finally when the gesture ends we need to snap the card either to the left right or back to the middle redash provides us with a nice function named snap point to tell us where to snap the card when releasing the gesture and we can simply spring to that snap point destination for the y-axis we can always snap back to zero now let's jump into vs code i have a boilerplate project which you can download in the video description in case you want to code along with me and i think the first thing we're going to do is to wrap the card component to have a pan gesture handler and we're going to add a translation on the x and y axis so here i have the view which i can wrap with a pen gesture handler from react native gesture handler and the first and unique child of a punjab character needs to be an animated view from reanimated2 so probably need to import it here up so i want the one from reanimated i appear to have us any view okay and we can add our animated gesture handler so on gesture event and we're going to create our animated gesture handler so on gesture event use animated gesture under now i'm going to create two animation values one for the translation x and one from the translation y so i can create x is use shared value and y is also use a shared value now when the gesture is active on active we get the translation x and y and we can assign it to the x and y animation value so x that value equals translation x and y dot value equals translation y now we need to apply these values to the style so via transform so we're going to create an animated style use animated style we're going to return a transform and here for now we're going to add translate x so equals x dot value and translate y equals y dot value and i can assign the style here so now i can translate the card nicely but if i see you see if i start the gesture again because translation x and translation y always starts at zero it always goes back to zero so we need to remember the position when we start the gesture and this is where we're going to use the context from the gesture handler where we can keep states across different state of the gesture so on start we're going to get the context object and save the x and y value so x equals x dot value and y equals y dot value now i can add the type for it here so the first generic parameter here is going to be which type of gesture it is so here is spanish handler and here in the second generic parameter i can type the context and so my context is very simple i have x and y value all right so here i remember the values i can keep this state in on active so across different state of the gesture i can access the object so i'm simply going to add this value to translation x and translation y here i'm moving the card around i release and when i start against the gesture it remembers where it was so it moves nicely now when we need to release the gesture we need to snap either back to the middle or to the left or to the right so we're going to create a variable called destination so we need the x dot value we need the velocity so i need velocity x and velocity y in here we're going to use velocity x and we need the list of snap points so if we go look at the list of snap points here i used the wheel of the screen which is way too big it's actually um let me call it maybe side so side we could do half of the weave maybe i can just rename this one here so half of the width and half of the weave of the card because the origin is the center of the card so here i have card weave so i could do card with divided by two i would be so we go minus plus side r0 that looks good let's have a look so here we have the destination we can spring to a destination so with the spring to destination and we can use the velocity in the configuration let me import with spring and for y we always go to zero so we've spring to zero and we can use velocity y let's have a look i need to fix i move the card around so here the snap point is not correct so the weave of the screen may not the weave of the card no it's plus the width of the card divided by two so here i snap back to the center and if i go left so it's not the minus the way of the card but plus the width of the card divided by two so up back to the middle and let's go to the side perfect so here we see the [Music] bouncing appear on the left and right so i think we're going to add some padding to this maybe 50 50 points let's see um so that actually looks good now what i would like to do is to add the rotation on the x and z axis and we can add the [Music] x rotation because it's fixed maybe let's say 30 degrees so rotate z equals 30 degrees no rotate x sorry and you see it looks squished because we didn't add the perspective so we can add some perspective value here you can pick look at whatever feels good to you so this this looks good and what we can do so we're going to add the scale transform but first maybe let me do the rotate z so we're going to add a rotate z value and we want a random value between let's say minus 10 degrees or between minus 10 to 10 degrees so we have map random that goes from zero to one so we go we want it to go from zero to 20 so we multiply by 20 and then we remove 10 to go from minus 10 to 10. right we go from 0 to 20 and if we remove 10 we go from -10 to 10 and we can apply this transformation so rotate z equals rotate z dot value and these are degrees looks good and now one thing we can do is when selecting the card scale yeah scale the card have the rotate z go back to zero so i'm gonna add the scale transformation you'll notice that here i'm adding the scale at the end here the order of um of the transformation is important i will link to a video on this topic in the video description so we're going to create a scale value so you use shared value default value is one when we start the gesture we can put it to 1.1 so plus 10 percent and rotate z goes to zero and we probably can add maybe some nice easing to give it a physical feel let me import easing from reanimated so here i select the card the rotate z goes to zero we scaled nicely i need to scale back when we release the gesture so on end scale.value goes back to one and i i think i should always do this easing in the animation configuration and one thing we could do is also set the rotate x to zero when we select the card so that actually looks pretty good and one thing we can do is to animate the cards when they appear for the first time so the default value here for translate y is going to be let's say minus the height of the screen so they disappear and we can as we can add a use effect so when we mount the component we want the cards to appear so let me add the empty dependencies so we can add so y dot value we can add the timing animation to zero again yeah here i have duration and i want to use some nice easing but of course we want here they all appear at the same time we want some delay which depends on the index of the card whichever which we have as a property here so i'm going to calculate delay simply index time duration so here we can add weave delay so what i like in reality 2 is that animations are first-class citizens and they can be nicely composed with each other you can add delays timing and you can really actually go pretty crazy with the level of composibility in the the animation you can add pause bouncing uh you name it here i can update the array of dependencies even though it will never change and one thing we might want to do let's have a look so that's pretty good but also maybe we want to set the rotate in the animation so i'm going to extract it here sorry um [Music] so i can execute this also on rotate z to go to tata and maybe i want to add an offset to the delay maybe one second here you can pick any value you would like let's have a look so i think that looks pretty good and i can swipe the cards and now when all the cards have disappeared i would like maybe to shuffle them back with a nice animation so here shuffling back is a state that is across all cards so i need to go to the parent components so here i have all my cards and i'm going to create a shuffle back animation value which is true when we need to shuffle back the cards so shuffle back default value is false and i can pass it as a property of each card so shuffle back is an animated so it's a shared value of boolean i get it as a property here and when the gesture ends and actually we can look when it ends so it means also when it ends and the animations are over so i can use the callback and with timing to see when the animation is over so the problem is because spring has small oscillations even though it looks like the animation is finished technically it's not done so with timing will be faster because it's exactly after the default duration it will be over so we can look if the card is last so here because we have them on top of each other is if index equals zero and if the destination is left or right so if the destination was zero we we don't need to shuffle back yet so if index is zero and destination is different from zero then we can set shuffle back to true and now for each card component we can listen to the shuffleback animation value if it is true we need to animate and for this we're going to use use animated reaction which lets us listen to an anime a change in animation value and react to it so use animated reaction on shuffleback so shuffleback.value and here i get it as parameter of the second but of course we could use shuffleback directly i mean i'm not sure whatever uh if value no actually let me just i think it's much more explicit i don't know i don't know which way is better so if we need to shuffle back we are going to set the x value back to zero so x that value equals with spring so to zero and we are we want to add some delay and we want also maybe to add rotate z back to the random value so rotate z dot value is with spring to data so now they will all appear at the same time so again we need some delay value here so here it's a spring um [Music] let me put maybe 150 milliseconds so time index so here we can add with delay and when the animation is over so here we can look at any the callback of either animation when it's over i simply want to set shuffle back back to false um sorry i have some yeah so the second parameter would be the spring config here i keep the default and then we can have the callback for when the animation is over let's have a look so the cards appear nicely up swiping and you see they shuffled back nicely isn't that cool it feels great just a fun example guys i hope you enjoyed this example these are the fundamentals of gesture handler and reanimated we looked at the transforms we need to apply the transform api in reanimated is really well done and i will link to a video on this topic where we can dig further on how this api works and i hope that it's a topic that we will get to explore in future videos and then we built a simple pan gesture handler we use the translation x and y and the context to remember where we were when we start the gesture when the gesture ends we use a snap point function from redash to know where to snap the card 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 they say the mountain is the top i say that just scratched the surface yeah we started at the bottom with no option but to go up you know what hurt is when you growing up with no love when you knew how to die before you learned a hug where you falled in the street or you pulled a gun and led off at the op so you're so drunk right now i'm rolling through the city living at the top of my world waking up to new views in the morning up under my girl this is what it feel like this is what it looked like when you see it from the top this is what it sound like when it came from the heart that could have died [Applause] [Music] you don't know how much [Music] [Applause] [Music] yeah they say the sky is the limit i say that just scratch the surface [Music] [Applause] [Music] [Music] you don't know [Applause] nothing you don't know oh

Channel: William Candillon

Views: 37,241

Keywords: React, React Native, Can it be done in React Native?, JavaScript, TypeScript, gestures, animations, reanimated, Native Apps, Apps, Mobile development

Id: xPbRsca_l7c

Length: 25min 11sec (1511 seconds)

Published: Sat Nov 13 2021