Animating backgroundColor in React Native

How would I go about animating from one color to another in React Native. I've found that by interpolating an Animated.Value you can animate colors by:

var BLACK = 0;
var RED = 1;
var BLUE = 2;

backgroundColor: this.state.color.interpolate({
  inputRange: [BLACK, RED, BLUE],
  outputRange: ['rgb(0, 0, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)']
})

and

Animated.timing(this.state.color, {toValue: RED}).start();

But using this method, going from BLACK to BLUE, you have to go through red. Add more colors to the mix and you end up in a 1980s disco.

Is there another way of doing this that allows you to go straight from one color to another?

Solution 1:

Given you have Animated.Value lets say x, you can interpolate color like this:

render() {
    var color = this.state.x.interpolate({
        inputRange: [0, 300],
        outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
    });

    return (
        <Animated.View style={{backgroundColor:color}}></Animated.View>
    );
}

You can find full working example in the issue I've posted on github.

Solution 2:

If you could get the color of the animated color value at the instant you pressed the button then you could probably do it. Something like this :

var currentColor = ? : 
this.state.color = 0; 
var bgColor = this.state.color.interpolate({
  inputRange: [0, 1],
  outputRange: [currentColor, targetColor]
});

So for each button you'd set a different targetColor.