Introduction to React Native Reanimated 2

what's up mobile devs today we are going to see the basics of free animated 2 but first of all what is reanimated and why is it needed reanimated is an animation package that allows you to write animations that can run entirely on the ui thread of course in react native you have the option to build up animation with the react native animated apis and usually that's not a huge issue especially if the animation is a kind of a fire and forget animation but when you need to deal with gesture animations it is pretty hard to reach a fluid and nice animation that the final user is expecting the issue is caused by the fact that when you are using animated apis and react native power responder your animation depends on the communication between javascript thread and the ui thread reanimated has solved completely that problem by running the animation uniquely on the ui thread that is possible thanks to the worklets if you animated worklets are just simple javascript function that can be handled entirely on the ui thread in practice a worklet is just a javascript function with the worklet keyword so let's get our hands dirty and let's start to build our simple reanimated animation so here i build up an expo project i just set up the project with the with expo cli and i include of course the reanimated library i use the version 2.1.0 but of course every version above 2.0 is fine for this tutorial and i include the react natively animated plugin on bubble.config.js that is needed for the worklet for the worklets function so let's discover uh which are the the most important ingredients to build up a reanimated animation the first the first ingredient is the user shared value so we need to import the use shared value from [Music] react native reanimated and here we can declare the our shared value that we will call it progress for simplicity and we will set the initial value to zero use shared value allows us to create a value that could be handled from the the work that's so that could be handled from the ui thread the second most important ingredient is the use animated style hook with the use animated style we can basically create a style really similar to very similar to the style sheet style so the react native default styling and we can build so the the style with this use animated style hook we will call it reanimated style and use animated style return returns a style and this kind of field is uh related to the dependency isn't mandatory is optional and it is useful when uh your animated style depends fro of javascript javascript state so in our case uh it will depends just from progress that is a shared value so it isn't needed to specify here the dependency in reality style we will we will specify just the opacity value right now and we will pass the progress dot value so the progress is just a wrapper of a value and the value itself it's in this case just a number use shared value can handle whatever whatever object so it could be a boolean it could be a string and it could be an entirely object so the third ingredient is of course the the animated view animated view can be just imported like that so we are importing animated or animated from react natively animated the library and we are defining here our animated view let's define a style so the default style will be let's imagine a square we will build so height height and width of 100 and here we can define of course a background color i will use blue just blue for simplicity so right now in our animated view we aren't animating anything we need to pass the reanimated style so how to do it just as a normal style sheeting react native so we can add the reanimated style and let's put the initial value to one so nothing is changing and nothing is animating so how to animate progress we want to animate progress from 1 to 0. to do that we can define use effect from react use effect hook from react and we can just update the progress dot value so we need to animate to zero doing that we reach we changed the opacity but we didn't animate so to animate uh the last ingredient needed for the animation iska is a kind of a high order animation utility from reanimated we will use with timing so that's kind of magical that's really magical we need to import with timing from react natively animated and we can see how it animates so uh it's a really fast uh with with the with timing utility we can pass user configuration and we can define a duration for the animation let's uh let's say five seconds so 5000 milliseconds we can see how the the square is fading nicely so right now we can animate much more than an opacity let's uh define for example another use shared value another shared value and let's call it the scale so let's define the initial value of scale to 1 that is the default scaling and let's add the scale to the animated style okay i did it and right now we need to animate the scale so let's animate the scale with the timing and let's put the last value so two value from value one to value let's say two so uh to improve animation just uh i will just change the opacity value so progress dot value to uh value 0.5 just to avoid the animation until avoid the complete fading of the of the square so i think something is missing let's say zero okay so the duration is to is too slow we will put a duration let's say let's keep the default direction and let's animate to 0.5 and right now we can see how it is effectively scaling and the opacity is changing to 0.5 so we can do much more than that we we can use another high order animation utility from reanimated and so uh basically we timing is based on duration uh of on timing and on a curve we will we can use otherwise the width spring high order animation so with spring is in my opinion might much more powerful and is based on a spring animation a spring animation isn't based on adoration and timing is it based on physics so on the object itself on the mass on the damping on the stiffness of the object itself so the animation here with spring has the default value from react native reanimated and in my opinion is often a good solution to use the default value from the animated library and right now we can see how the scale is changing with a spring animation so let's uh let's say that we want to change from we want to change from scale to to scale one so from a big from a big square big square to a small one and let's say that we want to change also the border radius we aren't forced to use another shared value but we can use for example we can attach to the border radius style the progress dot value value so shared value so let's say that the border radius should be equal to progress value multiplied to size perfect so let's let's say size divided by two maybe the animation is a little bit too fast let's say that instead of the wheat timing let's use with spring everywhere perfect and let's add another ingredient to our recipe we can let's imagine that we want to repeat this animation at least three times so how to how to deal with that we can use another high order animation and in that particular case reanimated provides us the weed repeat high order animation so weed repeat with help us to repeat the animation the spring animation in this case number of repetition let's say three and uh we want to make a sort of a reverse reversal it means that we want to go from two to one so 2 scaling a 2 to value 1 and from value 1 to value 2 and we want to do that kind of turnaround 3 3 times so to do that we need to enable reverse uh otherwise uh let's let's visually see what uh what's the difference so without reverse that is the animation with reverse we will go from start to finish to from start to end from end to start and hold the circle three times so we see the the difference we can see the difference let's apply with repeat also to the progress dot value so we repeat let's specify the same value so 3 repetition and enabling reverse so we can see how the reanimated the high order animation are helpful in that particular case so just for the sake of clarity let's animate another value so let's rotate the object the square to rotate the object we can pass the rotate value to the 2d transform array and i will use a string so let's change the radians we need to use of course math math.pi let's say 2 pi and we can of course create another another shared value but i prefer in this case to just use a progress dot value as before and right here we are able to see a full rotation and that's almost incredible in my opinion so uh here we can we can repeat the animation uh much more times than three we can also uh repeat the animation infinite times to do that we need to specify minus -1 so that's uh that's how reanimated works so let's uh talk about the last thing right now i think that this isn't useful but for this particular case but uh for a lot of use cases it could be really useful and my last my last purpose is to understand how workplace when worklets can be useful in reanimated so let's say that we we don't want to write this kind of string but we want to handle this string with a function so let's imagine that the rotate calculation is much more complex than that and so we want to create a specific function that can handle this kind of code for us so let's build a javascript function handle rotation let's pass progress that needed to be an animated shard value number of type number and let's just return this string right here so it could be really intuitive to do something like that but this will not work this will not work because handle rotation is a javascript function that can be handled just from the javascript thread use animated style with repeat with spring and all of this stuff are basically reanimated function that under the hood are worklets worklets are the unique javascript function that can be handled from the ui thread so if you want to run a function on the ui thread written in javascript we need to specify that the function is a worklet so to do that we need to add the worklet string above the the body of the function and right now it should work as before so uh that's all for the reanimated basics i hope that the tutorial was clear and if you have any doubt you can of course comment and subscribe to the channel if you like the video

Channel: Reactiive

Views: 12,630

Rating: 4.9715638 out of 5

Keywords: reanimated, react native, animations, tutorial

Id: yz9E10Dq8Bg

Length: 17min 26sec (1046 seconds)

Published: Sun May 09 2021