🎛 Custom Animated Switch component in React Native - Moti & Reanimated2

hey guys long time no see hey friends hey patreons hey haters oh man this this like button has disappeared anyway in today's video we are going to take a look at moti uh mo it's a pretty powerful animation library uh for react native and actually it's a cross-platform animation library it's pretty powerful for micro interactions and ui animations it's built by fernando rojo i've invited him on this channel a while ago just before he actually released moti and since then i was playing around with it and i can tell you for sure that you can build a lot of cool things with it so in today's video we are going to start taking a look at it and in more particular we are going to rebuild this beautiful animation by my friend oleg uh this switch on off on off and i'll be showing you my way of doing it in react native and i mean everything is 60 fps because mont is powered by reanimated too so you can you can basically animate whatever property you'd like and it's still going to run at 60 fps because everything is happening on the ui thread by the way if you if you consider becoming a patron you'll have access to not only this source code but over 50 different animations enjoy the content that's available on my patreon page let's play the intro and jump straight into vs code and start learning something new shall we all righty guys so we are in this code here uh i've already created a project uh using expo and by the way if you're not using expo this this should work in in a vanilla rv native project as well so without further ado let's let's start coding um it's been a while you know since i last coded anything especially like recording stuff so i don't know i'm just getting used to again in case you see a lot of cuts or me doing us and us and whatever you'll figure it out it's more like a live coding session for me and i just want to share the knowledge and that's it yeah if you find something useful just just leave a comment and i'll do my best to either improve or extend my knowledge and whatever my my way of teaching uh but uh here i'm i'm i'm just doing a blank right project so first of all uh let's do the ui because um this is going to be the the simplest thing so first of all i would like to create a new a new component here and i'll do it switch and i know that i'll expect a size an on press and if it's active or not right so this one will return a view and nothing inside so let's render this switch right okay so nothing is visible uh just to see if everything is working uh text is not fined no problem let's import text and yeah everything is here right so i'll i'll i'll start by defining a size because i like to make this component a reusable component and for it i like to pass a size uh an on press or and if it's active or not right so um yeah let's let's start by doing the size so i'll start with the trick size let's say underscore size here it's 60. i'll define just a dummy one or you know what let's let's do directly here so i'll do size it's going to be 60. okay no fancy things here and let's start by doing the ui and first of all i know that everything should be oppressible so oppressible and inside the pressable i'll have i'll start with the track size uh and inside the trick size i'll have the knob and the knob inside the knob i'll have this uh either a circle or a plain rectangle so let's start with the by wrapping everything in inside the view uh and in this view i'll i'll just import uh multiview from moti right so i'll start with uh the track size and here i'll have another mod view and another multiview so this is uh oh man it's been a long time so what what what the hell am i doing here so basically this is the track and this is the knob container that's going to move right and inside this one is going to be knob uh indicator i think it's called i don't know basically the circle or the rectangle right so let's start doing uh the styling so i'll just do here uh line items to the center and justify to the center so everything is going to be to the center and here i like to create some constants like the track size so the trick size uh let's uh do oh yeah i have co-pilot in case you're wondering what what the hell is this one it's github co-pilot i had access to it since the beginning and it's pretty powerful uh just go ahead and search on google uh github co-pilot you'll figure it out uh so so here i'll be using uh react use memo uh because i like to define a track size based on the size that's passed as prop right so in my case the dependency is the size and the trick size is going to change only when the size is going to change so and and here i'll just return size multiplied with 1.5 it's just a dummy number right and let's start by creating the styles for the track so i'll create here a style and i'll say here i'll position this absolute i'll give it a width of track size height of track height track height is not defined here okay so let's copy this one and do track height and for the sake of this demo let's remove this and do track width right and the trick height is going to be [Music] i have some notes here is going to be size multiplied with 0.4 i just just some random numbers don't worry about it and yeah so and the border radius of track height because why not okay so this should not be visible but if i do a background color of red you see we have the track wow this is this is looking really spicy and just for the colors i also have prepared couple of things here so i'll just copy stuff and i'll say here is active size okay so let's define those as react fc and then switch props yeah i'm using typescript if you don't know typescript it's okay don't worry uh so size is going to be a number on press is going to be um yeah avoid thank you copilot and this active is going to be a boolean and press save and now let's move to the knob itself right so we don't have we have again it's like this is the container of the circle and let's define some some styles for it so we will have here style and i also have some notes here yeah so the width is going to be size the height is going to be size border radius [Music] is going to be size divided by two doesn't matter a background color of white because i don't care about the background if you like to customize it you can pass it as a prop i will align the items to the center and also justify the content to the center let's move it down here make this a string okay and inside this if if i press save now and do some background color here of red and save it you see we we have this beautiful knob here which is uh fantastic okay um everything is fine yeah everything is fine uh okay just for the sake of this demo i'll just pass colors active right just to have it here and and now let's let's focus on this circle within the the knob container and basically is the indicator right so i'll just pass the style here and the style for it is going to be the following the width is going to be size multiplied with actually you know what let's let's do it size multiplied let's do another another variable here and i'll say knob size so knob size is going to be multiplied 0.6 so the width is going to be knob size the height is going to be in up size border radius everything is defined here um but this time i'll do a different uh different thing uh i'll need to define a border a border width of let's say you know size multiplied with 0.1 and i'll give it a border color of colors active oops everything was completed uh colors active you see so basically what i did is uh i shrink down in size the container so if i do here a background color red just see so this is the container this is without the border right so i shrink down in size the the knob indicator and then around it i i've applied a border and the border is calculated based on the size passes the prop so we we have this um yeah we we actually this is it right okay it's starting to take some shape right uh okay and and now the the moti part uh actually before doing it we also need to pass an on press compress is going to be on press and here inside on press is going to be something and something it's going to be a state so i'll do is active set is active react use state and we'll pass it as false and on press is going to be [Music] a method that we'll call set is active set is active with is active not is active and also pass is active as is active right so the method on press what will happen and then the the boolean that we we are basically giving back to the component itself so nothing is is visible now and with moti oh man moti moti has couple of properties so you can define a from uh you can define an animate and you can define a transition configuration so basically the from is where to start uh the animate is where to go and the transition config is basically passing like easing duration uh the type of the animation which can be a timing a spring you name it decay so i'll just start with uh defining here because i like to define the transition itself so the transition is going to be a reusable transition so in my case it's going to be a typo timing and duration of 300 and i'll pass an easing function so easing is in in out with an easing ease and let's import this easing from real anime too and this type of transition it's actually a multi uh transition prop cool let's save it and the from let's remove those and pass the transition as transition okay and what will happen now is i like to change the background color in case if it's active or not for the track itself right so i'll specify a from and the from here it's uh if it's active i like to start from the active color otherwise from the inactive color and i like to animate the background color again if it's active i would like to go to inactive otherwise vice versa right so i'll just press save and now if i press on this button because of the callback and the easy active prop i'm actually animating everything so this is really powerful i mean just just passing a config everything gets animated so multi is doing the hard work for us and it's it's animating everything uh with with a particular transition config in in my case just uh 300 milliseconds duration with this dedicated easy easing animation and just look at it everything everything is animated uh it's pretty powerful just believe me that just on on vanilla animated api and even on reanimated2 just creating this one it's it's going to require a lot of boilerplate but anyway so let's move on so we we we made the track right uh background color if it's active or not uh and now let's move to the knob uh so so for the knob let's we we just need to move this circle uh to to a particular location and also change the background color of it so for this again just pass the transition and now let's specify from again based on based on is active i would like to move it on on the x axis so i'll say translate x translate x if it's active i like to move it to the track with divided by four otherwise minus directly divided by four and why divided by four is because this one is in the middle right and i like to move it just uh a quarter of this uh entire width on the left or right hand side so this is why i'm specifying those properties here and actually you know what i i don't even need a from i'll just animate directly so yeah this is this is how it's actually looking like you see it's um you you can avoid passing the front property as long as you have a toggle inside the animate because uh once this is rendered uh moti will know what is the from and when you switch it so for example if it's active the from is going to be track wave divided by four and when this is active it's false is going to start from wave divided by four and go to minus we've divided by four this is again another another feature of moti which which i believe it's it's pretty powerful let me change the entire background of the scene to something like f3 f3 a4 yeah just to have like a slightly uh grade background so we we have everything here visible on the screen taking some shape and now the the the last part is to actually animate this circle if it's active we would like to make the rectangle with border radius of course if it's not active we would like to have it as a circle basically it's zero and one really smart isn't it where zero is false one is true i o that's why you have i o input output one zero anyway um so yeah uh let's go to this knob size and and do some multi magic so we are going to again pass the same transition uh configuration uh and then we would like to to apply a from so you like to animate the width this is really smart you'll see in a minute so if it's active we would like to go to zero otherwise uh we'll go to knob size so yeah it's if it's active we'll go to knob size and let's also animate so if it's active uh we would like to we don't care actually but so yeah just animate it uh if it's active the width is going to be zero otherwise just go to knob size and now you will see the magic of it because this width in general in react native uh has to run on on just thread and uh for it to work on just vanilla animated the api you had to pass use native driver to false but it's not the case here everything is happening on the ui thread and you can basically animate all the properties just believe me all the properties and just modifying the width it's just shrinking down in size because we have the the border with is going to transform it into a rectangle just just watch it whoop it's it's just mind-blowing isn't it so this is it basically nah i'm just kidding we also need to to change the the background color uh so the the border color sorry so if it's active i like to go to colors active otherwise color inactive so oh yeah border all right so yeah it's interruptable and pretty much this is it right so of course uh we we can pass the different sides and everything is going to work it's magic right but uh we we can also do it bigger you know what uh the the track background it's it's actually wrong it's vice versa so detective i like to go to active and inactive right so now uh it doesn't make any sense to have the from because from an animate they are equal so and just to to give you like the performance here you see a drop in the gs thread because i'm using set state but we can easily remove the set state but we don't want to do it oh this this is a homework for you but uh yeah you see here everything is 60 fps um yeah it's it's it's magic yeah guys that that was it uh it was a long tutorial uh i hope that you've learned something new uh and i i just opened the doors for you in order to use moti in your projects and i don't know it's it it's a powerful library um if you feel like it was too long it's okay i mean i haven't recorded anything for a while now but hopefully in the next one i'll get better and if you enjoyed it or you have any any tips and tricks don't hesitate to leave a comment down below and if you need any help i'll do my best to answer all as much as i can and help you as much as i can also don't forget if you're not a subscriber don't forget to subscribe hit the ring ring bell button and also put the thumbs up thumbs up yeah thank you so much guys and and see you in the next one bye

Channel: Catalin Miron

Views: 22,926

Keywords: react native animated api, advanced react native tutorial, react native advanced animation, react native moti, react native reanimated, reanimated2, custom react native component, custom react native animation, amazing mobile animation, mobile animation, reusable components react native, reusable components react, react native ui components, react native ui design tutorial, reanimated 2 transition, reanimated 2 react native, moti animations, react native animation tutorial

Id: LwKUjau3Ifw

Length: 22min 34sec (1354 seconds)

Published: Tue Nov 23 2021