Reanimated 2 Setup

[00:00:00]
>> So React Native actually comes with its own animated API. So you can import this from React Native, and there are loads of examples on the React Native Doc's on how you can use it. For this course, we're actually going to use reanimated and in particular, we're going to use reanimated 2.

[00:00:17]
So just to give you a little bit of history on reanimated, so originally reanimated was created to address some performance deficiencies on React Native built in animated library. In particular was around operating on the UI thread, versus the main thread, etc. And the reanimated one basically copied exactly the API that React Native's animated API was using.

[00:00:43]
Higher Reanimated 2, even though it's still in beta, it kind of sidestep that completely. And the API for Reanimated 2 is really nice to use, especially for React hooks. So the reason I'm using Reanimate two is because I genuinely think it's the nicest use animation library for React Native.

[00:01:03]
And that's what we are going to be using for all of our animations in the future. It's a lot less code than the animated API, and also the animated API is declarative. Which is a little bit hard to read and also reason about when you're new to animations, so first let's install reanimated too.

[00:01:23]
So at the time of ricing, this is the latest version. And because we're still in beta, I've also tagged the actual latest version that I'm going to be using just to make sure that we're all on the same page. In the future this is going to not be in visa and you might have a different version.

[00:01:42]
So we're all on the same version of the package let's install this particular version so let's copy it and paste it to our terminal. So for Reanimated we also need to add a babel plugin, so this is very important. So if you open your Babel configures and then copy this line of code, so Babel config will be at the root directory of your project, and then we need to add the Reanimated plugin to our plugins list.

[00:02:16]
So if you're working on an existing project, you might already have some plugins here. In this case, it's super important that this plugin is the very last thing on the array, otherwise you're gonna. To enable this on Android we to do a couple of extra steps, just a little bit of native code.

[00:02:40]
So firstly, we need to turn on the Hermes engine which is disabled by default. Hermes is React Native or Facebook's proprietary JavaScript runtime, which is optimized for mobile app. So basically, they are building their own JavaScript runtime, which should help your React Native apps. Load faster, and kind of genuinely getting up more optimized for running JavaScript.

[00:03:08]
On the mobile device because obviously JavaScript is generally meant for the web which has different restrictions and different performance needs. So if we go to Android app build gradle. So Android app, whoops, build gradle, and here we got enable Hermes false. We will turn this to true, and then for Android, we also need to add some code to main application dot Java.

[00:03:41]
So we copy these two imports and then we go to app source main Java main application that Java. And then we add these imports actually remove the comments because, they are not valid in Java land. And we need to add this override method, so the whole method, and we will paste it in here.

[00:04:15]
Just underneath the get JS module name and also just comment excellent that's just to rebuild the Android app as well. And then when system called for IOS you want to go to the IOS directory I run pod install. And after that's done we're also going to rebuild our app.

[00:04:51]
So young IOS to rebuild so just to tell you a little bit about how Reanimated 2 works, so the best place to start is the API documentation. So we look at API reference, and hooks, so these are kind of the hooks that you can use. So Reanimated 2 is completely hooks based, so this fits perfectly in how we already think about data and things moving around.

[00:05:21]
Whereas the animated API not so much, so the data that you'll be using most frequently is use animated style. So this is basically a hook that allows you to create a style, which you can then use in an animated component. And in his hook, you can use animated values where you can animate any of these styles from one value to the next, which is what we going to do.

[00:05:51]
Another central component is a use shared value. So this is a value that you can animate, and then use within your animated style, this will be especially handy later on when we're doing gestures. We're basically we're setting the position of the view that we're looking at in a shared value, and then animating that view, correspondingly.

[00:06:16]
Then used to write value, this is basically what you use if you have values that you want to calculate. So if you want to do a calculation in a shared value so here we have a shared value which might change and then you want to like multiply this for example something that's outside of animators.

[00:06:37]
Like welds, like the state value, then you can use the derived value here. And then bunch of these are like if you want to use the on scroll event on a scroll view within your animation, there's a built-in scroll handler. And there's also a gesture handler that works great with React Native gesture handler.

[00:06:58]
There's other ways props and we'd address animated reactions. And you can explore these on your own time. So yeah, we're going to look at useAnimatedStyle and useAnimatedGestureHandler later on. So when it comes to animations you have these helper functions, with timing with spring with with decay, with sequence with repeat.

[00:07:22]
And as you'll see later this is these are what we're going to basically using to animate a value from one muted index. And now the last thing so we haven't had to do this before, but because we added something to our Babel config, we also need to restart the Metro Bundler.

[00:07:40]
So in your tab wherever you have, wherever you run yarn, start at the very beginning, just close it and redo it just to restart the Metro Bundler. All right, now we should be able to use Reanimated.