Animate Styles of a React Native View with Animated.timing

Jason Brown
InstructorJason Brown
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

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.

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

[00:06] We have a view, with a styles.container, and the nested child view with styles.box.

[00:13] 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.

[00:25] 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.

[00:42] 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.

[00:59] 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.

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

[01:17] 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.

[01:32] 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.

[01:43] The first is 2 value, which is the value we want to animate to. In our case, we want to animate to .3 opacity.

[01:50] The second is duration. The duration is in milliseconds, and so we'll animate over 1,000 milliseconds.

[01:57] Finally, to start animation, we need to call .start on the animated timing.

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

[02:10] 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.

[02:21] 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.

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

[02:43] 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.

[03:06] 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.

[03:19] 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.

egghead
egghead
~ 49 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today