Interpolate Colors like a pro with React Native Reanimated 2 🚀

What’s up mobile devs? Today we are going to understand the concept behind the interpolateColor function from the react-native-reanimated (v2) package.
To enhance the learning experience, we will make this beautiful animation from scratch. The goal will be to apply color interpolation when the switch from Light Theme to Dark Theme or vice versa occurs.

If you’re more of a video tutorial person, the same content in this medium article is available as a video on my YouTube channel.

P.S: I’m creating an entire series on the Reanimated 2 basics.
Before going on, know that all the code is entirely available on GitHub (in the 03-interpolate-color folder):

enzomanuelmangano/animate-with-reanimated

Let’s prepare our environment 🐢

The first step is to create a React Native project with expo-cli (since it’s the fastest way to do it).

expo init interpolate-color

The second step is to install react-native-reanimated (make sure in the package.json that you have at least version 2)

yarn add react-native-reanimated

To enable Reanimated worklets you need to add the reanimated plugin in the babel.config.js file.

I also share below the App.tsx file since I have defined some colors that we will use later. Of course feel free to use the colors you prefer.

A missing piece in our setup: The Switch! 🎛

The first component to be included in the UI is the Switch. We’re going to use the Switch from react-native and use it as a kind of animation controller.
When the Switch is toggled the theme becomes Dark, otherwise it remains Light.

Below for simplicity I have uploaded the resulting code.

Let’s get our hands dirty! 🤓

In order to animate things, we need to convert the View in an Animated.View, using Animated from react-native-reanimated.
Moreover since the backgroundColor will be handled on the UI Thread by reanimated, we need to use the useAnimatedStyle hook.

Wait what? 🤨
UI Thread, useAnimatedStyle, Animated.View what are those stuffs?
If this is your first time hearing about these topics, I definitely recommend you to check out my first video on Reanimated 2:

Let’s Interpolate Colors 🎨

Alright. We need to use interpolateColor, but how do we use interpolateColor? 🧐
We need at least three ingredients: a value, an input range and an output range.

The idea behind interpolateColor is then to interpolate a value of type number and map it to an output range.

In the code below we can see that the value on the basis of which we perform the interpolation is progress (and it is a SharedValue).
Of course, we could have used the useSharedValue hook to define progress, but the point is that progress must be “derived” continuously from the current theme value.

At this point it is very easy to understand how interpolateColor works.
Let’s try to understand how the backgroundColor will behave.

1. When progress is equal to 0 then backgroundColor will be equal to Colors.light.background;
2. When progress is equal to 1 then backgroundColor will be equal to Colors.dark.background;
3. When progress is between 0 and 1 then backgroundColor will be a color between Colors.light.background and Colors.dark.background;

Here’s the result.

Wait. Why doesn’t it work as smooth as expected? 🧐

The point is that as defined, progress changes noticeably between 0 and 1 (or vice versa).
However, it never takes on any value between 0 and 1.
To solve this problem we can simply wrap everything with the withTiming function from react-native-reanimated.

Here’s the magic 🚀

Just to make sure I haven’t lost you in the explanation, I attach the actual code below. 📖

What’s missing?

Let’s focus on the Circle ⚪️

As before, we also need to define the circle as Animated.View, as we will animate its backgroundColor.

I attach below the style I used to define circle. As you can see, it is more difficult to define the styling than the animation itself 😬

Finally, in order to interpolate the backgroundColor of our circle, we just need to replicate the same logic as before.
In fact, the only thing that changes from the rStyle used previously, is that in this case, in the output range we need to specify the colors we expect from the circle (Colors.light.circle instead of Colors.light.background for instance).

Just to be sure, I attach the complete code of the App.tsx file with the addition of the circle animation 🐢

Let’s focus on the Text 📖

Having reached this point, we are now experts on the subject.
As before, to animate our Text, we need to define it as Animated.Text and…

… append to it the reanimated style rTextStyle:

In the rTextStyle we just need to pay a little attention to the fact that we are no longer animating the backgroundColor, but rather the text color

Congratulation, you did it! 🥳

And here’s the final result 🥁🥁🥁

I’m extremely sure you don’t need it by now, but just to be totally sure you didn’t miss anything, I attach the final version of the code below. 😌

Conclusions 🤓

If you’ve made it this far you’re probably really into reanimated 2 (or even more likely you were too lazy to read the article).
Anyways I want to share with you my GitHub Repo “Animate with Reanimated” where I try to build from scratch simple and instructive animations with the help of react-native-reanimated and react-native-gesture-handler.

enzomanuelmangano/animate-with-reanimated