Animating Colors in React Native

Sajal Dulal
Feb 6 · 4 min read

This article is based on my first article “Intro to Animations in React Native”, so make sure you read it before continuing on this one. Some basic concepts needs to be cleared before diving into this concept.

So as usual we create a new project, you can either use expo-cli or react-native-cli to setup a project and get it running on your phone or your emulator. If you do not have a good idea you can reference to the official getting started guide by React Native.

After you set up your project, open up your App.js and enter the following:

import React, { useState } from 'react';
import { StyleSheet, Text, View, Animated, TouchableWithoutFeedback } from 'react-native';
export default function App() {
const handleAnimation = () => {
console.log('we initiate animation here.')
}
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={handleAnimation}>
<Animated.View style={styles.box} />
</TouchableWithoutFeedback>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
box:{
width: 150,
height: 150,
backgroundColor: '#5AD2F4'
}
});

You should come up with a screen like this.

Image for post
Image for post
Initial Setup.

Here, most things are clear except the “Animated.View”. You can check out my previous article “Intro to Animations in React Native” if you are new to this.

Now add a state for animation, as:

const [animation, setAnimation] = useState(new Animated.Value(0))

And replace the handle animation function with:

const handleAnimation = () => {
Animated.timing(animation, {
toValue:1,
duration: 1000
}).start()
}

What we are doing is change the value of the animated value “animation” to 1 in the given duration of time. Now modify it further so that it returns back to being 0 once again.

const handleAnimation = () => {
Animated.timing(animation, {
toValue:1,
duration: 1000
}).start( () => {
Animated.timing(animation,{
toValue:0,
duration: 1000
}).start()
})
}

The second “Animated.timing” function inside the start() method after the first one is completed.

Now, everything till point is same as the previous article, however in the previous article all we did was change the opacity of the box and then later the bottom offset of the box, which could be simple values we could iterate and directly supply the state animation to the style.
Colors, however are a little bit tricky. For animating between colors we need to interpolate between two values of colors.

Now, as the state ‘animation’ is of type Animated.Value, there is a method called interpolate(), which takes a configuration object with keys. The configuation object takes a few different properties.
The first one is “inputRange”. This is going to be an array and requires the values to be in order. And this is defining the range of our “animation”.
Then, there is the “outputRange”, which also takes in an array and we can pass in our colors. Interpolate however only works with RGB or RGBA or any number but not with HEX.

So enter the following right after the handle animation function:

const boxInterpolation =  animation.interpolate({
inputRange: [0, 1],
outputRange:["rgb(90,210,244)" , "rgb(224,82,99)"]
})
const animatedStyle = {
backgroundColor: boxInterpolation
}

So, in the above code, when the value of the state “animation” is 0, then it is directly correlated with "rgb(90, 210, 244)” and when it is 1, it is directed correlated with “rgb(224, 82, 99)”. However, when the animation is between 0 and 1 it will figure out what color to pick, which is between the given values of the “outputRange”.

Then we write the animatedStyle and give the “boxInterpolation” value we just created to the “backgroundColor” property. And then apply it to the Animated viwe box.

<Animated.View style={{...styles.box, ...animatedStyle}} />

Now, you should have something like this.

Image for post
Image for post
Animated Color Box

Now, There are a few things that needs to be cleared, the interpolate() method of the animated value, can be called multiple times and used at different situations. Here is something I created with the same concept as mentioned above. Please visit the git hub to look at the source code.

Image for post
Image for post
Animating Text color and box color with same state of animation value.

Thank you, hope it was helpful in getting to know animations with react native a little bit better.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store