Create Animated Rings with React Native Reanimated

Instructor: [0:00] We'll start by creating a ring component. We'll create a function here. We will return an Animated.View because this will be animated. We also know that we are going to need to stagger each of these rings, so we will say that it receives a delay.

[0:19] We'll need to then render our rings here, and we'll start with four rings. We'll then create a ring style. For our ring style, we'll say that we have a width of 100, a borderRadius of half of that, at 50. A borderWidth of 10, and we'll give our borderColor a nice tomato color. Then we will apply that to our ring.

[1:02] We see that they're stacked on top of each other, and we want them to be not stacked on top of each other. We will need to add a position of, absolute, and that will now allow them to stack on top of each other so they animate on top of each other.

[1:18] The next step is defining our animation. We will need to use a SharedValue. This will hold on to the progress of our animation. We'll just call this, ring. With that SharedValue, we now need to create an AnimatedStyle for this particular ring.

[1:37] Let's say, useAnimatedStyle, which then we can return various values like, for example, the opacity. We might not want the opacity of our ring to start off at full opacity, so we'll start it at .8, and then as it animates, we'll subtract the ring.value as it transitions from to 1. This will allow it to slowly fade out as ring.value approaches 1.

[2:05] Then, we need to do a scale. We need to supply a transform and a scale, and we'll need to use interpolation. What this does is it takes a value and an input range, so we'll say from to 1, and an output range. We'll start at and go to 4 of a scale, so basically, it gets 4 times larger as it fades out.

[2:38] We'll give this a name, a variable name, called style, and we will apply it to our ring. Once I save, we can see that now it disappears because the SharedValue is at . When we interpolate our scale from to 1, we interpolate it to . Now, we need to trigger our animation.

[2:59] We can do that with a useEffect. We don't want this to run every single time this component is remounted, so we'll just give it a dependency array that is completely empty so it will only run once. Now that that's set, we need to start our animation.

[3:16] We will assign ring.value a animation. We will utilize the delay now, say, withDelay, and supply our delay that we're going to parse in. Then we will trigger a repeat. We want this to continually repeat.

[3:31] We'll say, withRepeat, and then the animation that we want to run, which is a withTiming animation. We will animate that to 1 with a user config of a duration, which we'll set to four seconds. We got an error there, don't worry about that.

[3:49] For our repeat, we want to repeat a number of times, but we want to repeat for forever. To do that, we'll set negative one. Go and fix the error and we'll import withDelay, and then additionally, we'll need to supply our delays to our rings.

[4:05] We'll say, delay is equal to zero, so that our first one will animate immediately. The second will delay for one second, then the third will delay for two seconds, and then finally, three seconds. This will then take up our entire four second animation so that no rings are overlapping each other.

[4:33] Once I save this and give this a refresh, you can see that now, our rings are animating and expanding to four times the size. We never have any ring overlap, and it is a smooth continuous flow.