Animate Translate Offsets when Values Change in componentDidUpdate with React Native

Instructor: [00:00] To get started with anything animation, we need to import animated from React Native. We had set up our state to be updated every one second, and our componentDidUpdate would run and log the previous value, as well as the current value.

[00:18] Now, let's set up the animation to trigger, rather than just console logging. To do this, we're going to need an animated value. Let's set up componentWillMount, and we'll say this.animation = a new animated.value. We'll set it to 0We actually don't want this to be 0We want to control the translate, we want it to move up and/or down. What this will actually get passed in is the position. We want to set the appropriate position in the start, however, typically, we wouldn't have the height in the beginning.

[00:58] This is not necessary, but we will pass in the position of the value and the height. However, it is necessary when we have a dynamic number of ticks, because the height will have already been measured. Therefore, the newly rendered number will be in the correct position before the user sees it.

[01:22] We're getting an error because it expects something. What we actually want to pass in here is this.animation. Now, our value that we were passing in with position is inside of our animated value. We're passing that into our translateStyle, which will be right here.

[01:42] The other thing that we need to do is, because we're passing animated styles into a view, we need to change this to an animated.view. As you can see, even though we're passing in 01 and 9, the default of our getPosition is going to be 0When the component updates, we can animate to the next value. However, we don't want to animate necessarily, unless the values have changed. We'll say if this.props.value doesn't equal previous props.value, then we'll call animated.timing, pass in our animation, so this.animation.

[02:28] Our toValue will just be the same thing that we had here. We'll say getPosition this.props.value and height, and we'll give it a duration of 500 milliseconds. We have to make sure that we call start, our animation won't get kicked off.

[02:48] Now that we have that all set up, we can add back our random interval generator, save that. We can see that it's randomly changing to all the values and animating from one to the other.

[03:06] This was only possible because React Native will reuse the component if they're in the same location, or if you have provided them a specific key. However, we don't need to do that because they are rendering in the exact same location.

[03:22] The final rundown of how this works is we measure a single digit. That gives us the height of each element within this scrolling stack of numbers. Our additional items are hidden because our styles.row is set to overflow hidden.

[03:37] When React does a setState, our ticks will then be reused, and we'll get the previous value and be able to calculate the new position that it needs to animate the translation to.

[03:51] There's one final improvement that we could make, and that is to use the Native Driver. Because we're doing just a simple translation, this allows us to use Native animations that don't run on the JavaScript thread, and therefore, are more performant.