Animation can be done using the Layout Animation or Animated API. LayoutAnimation happens on the UI thread. It is usually used when a view is created or destroyed. Sometimes, it is also used when the view changes size. LayoutAnimation works only on two properties: opacity and size. Layout Animation is the preferred way to animate as it is high-performant.

Animated API

However, background color cannot be animated using Layout Animation. This is where the Animated API comes in. Animated API allows the use of 4 built-in animatable components:

  1. Animated.View
  2. Animated.Image
  3. Animated.Text
  4. Animated.ScrollView

To animate the opacity of the view, Animated.View is created as follows:

The opacity state is of Animated.Value type.

For doing the animation, the state is not updated using setState. Instead, the Animated API is used as follows.

A sequence of two animations are run one after another. The first animation is delayed by 1.5 seconds and runs for a second. The second animation is delayed by 500 milli-seconds and runs for half a second.

Animate color

The Animated API does not have built-in support for animating a button. To animate a button, a new wrapper component should be created.

An example usage of Animated Button is shown below:

As it is shown in the code, the background color is animated. There is still a technical problem to overcome. It is possible to set numbers to Animated.Value but not colors.

The animation changes the background color from 0 to 1 and back to 0. We know that colors do not range from 0 to 1. So, how do we translate the Animated.Value from a number to color. The interpolate method does the job.

The interpolation happens on every render. It is the interpolated background color that is set for the AnimatedButton component that we saw earlier.

How do I animate the background color of a button in React Native?
Tagged on: