The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Animate Styles of a React Native View with Animated.timing

Animate Styles of a React Native View with Animated.timing

3:29
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?