Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Animate Styles of a React Native View with Animated.timing

3:29 React lesson by

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we will use Animated.timing and easing to animate the opacity and height of a View in our React Native application.

Avatar
George Paul

Is the newest version of React-native drastically different from the one used in this tutorial? None of the elements are animating when I use the code here with react-native version 0.39.2. The box shows up but doesn't change opacity when I refresh, and when I change the animatedStyle variable to { height } the box disappears entirely.

In reply to egghead.io
Avatar
Jason Brown

The example was built with .35, but Animated has not had changes in quite some time.
There is a possibility that the flattening of styles is breaking in recent versions.

I've updated the code to remove height from the box style, and let the animatedStyle have complete control of styling height. (so check the updated code on the branch)

To do opacity you would need to change the code to https://gist.github.com/browniefed/9801dabdc61f623d8a24bf83082b9f9e

If you need any further instructions let me know and am happy to help out further.

In reply to George Paul
Avatar
Jason Brown

The reason { height } destroys it is that you are setting height to undefined therefore 0.
The { height: this.animatedValue } is passing in an Animated.Value to an Animated.View.
So the Animated.View will subscribe to changes on the Animated.Value and when we call Animated.timing it'll cause updates to happen.

In reply to George Paul
Avatar
Jason Brown

Just tested out the code with latest .39.2 and it worked fine. Animating from 100 => 150 when the component mounts doesn't make it very noticeable. Try animating to a larger amount and it might make it more apparent that things are animating.

In reply to George Paul
Avatar
George Paul

Yup! It works now. It was totally a typo on my end. I was setting the animatedStyle variable in the render incorrectly. My bad. Thanks for responding so quickly!

In reply to Jason Brown

We'll start by importing animated and easing from React Native. Let's walk through our application.

We have a view, with a styles.container, and the nested child view with styles.box.

You can see our styles here. We have flex1 on the container. We just take up all available space, and center our nested items -- which is our box -- which has a background-color of 3s, and a width and height of 100.

Now let's add a componentWillMount() lifecycle method. We'll then create an instance variable called this.animatedvalue, and assign it a new instance of Animated.Value, which takes a default value, which we'll pass in as 1.

Now, we'll create an animated style variable, which will be our inline style, which will be an object with an opacity key. We'll pass in this.animatedvalue, which is our animated value instance.

In order to use animated styles, we need to change our view to an Animated.View. To pass in multiple styles to a particular view, we simply pass in an array.

We'll pass in our styles.box inside of the array, and then also the animated style that we created.

If we refresh our emulator, we can still see that the opacity of the box is 1. Let's animate by creating a componentDidMount() lifecycle method. We'll then use Animated.timing, which is a function that takes two arguments.

The first is the animated instance that we want to animate, in our case this.animatedvalue, and also a configuration object that takes a few different parameters.

The first is 2 value, which is the value we want to animate to. In our case, we want to animate to .3 opacity.

The second is duration. The duration is in milliseconds, and so we'll animate over 1,000 milliseconds.

Finally, to start animation, we need to call .start on the animated timing.

Now, when we refresh our emulator, we can see that we animated the opacity from 1 to .3 over 1,000 milliseconds.

Another property that the configuration object takes is a parameter called easing. This will take a function, which React Native provides many easing functions out of the box.

We'll use our easing input, and pass in the bounce easing. Now, I'm going to refresh our emulator. We can see that the opacity fluctuated over the period of time.

To make it a little more apparent, let's change our duration from 1,000 to 3,000.

Animated is not only capable of animating opacity, but it's capable of animating any style. We'll change our starting value to 100. We'll change our "to" value to 150, and we'll change, instead of opacity, we'll change our style that we want to animate to height.

Now, when we refresh our emulator, we can see that it bounced over the course of three seconds. Let's switch this back to 1,000, refresh, and get and get a cool effect.

There are many easing functions that you can choose to accomplish the desired animation in your application. You can find them in the documentation on the React Native website.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?