title: How can I smoothly transition between two color animation loops in React Native?
body: <p>Let's say I'm running an animation loop between green and blue (well there are more colors along the interpolation but I start off cycling between the first three):</p>
  
  <pre><code>this.state = {
    colorValue: new Animated.Value(0)
  };
  this.interpolations = {
    background: this.state.colorValue.interpolate({
      inputRange: [0, 25, 50, 75, 100],
      outputRange: ["#64e5a5", "#216a7a", "#64e5a5", "#ffb637", "#ffd338"]
    })
  };
  this.backgroundAnimation = Animated.loop(
    Animated.timing(this.state.colorValue, {
      toValue: 50,
      duration: 10000
    })
  );
  this.backgroundAnimation.start();
  </code></pre>
  
  <p>Note that I set up extra colors along that interpolation hoping I could just stop the animation loop and start a new one cycling between 75 and 100 for smooth transition between the two color cycles. When I modify this code for the desired effect, the animation seems to always start from 0. I tried setting the animated value to 50 but that didn't fix anything. Can someone explain the right way to do this?</p>
  
  <p>Note: The above code doesn't include an attempt to actually switch to the next color cycle because I really don't have any clue how to do it.</p>
  
  <p>Edit: I'm getting close, but not quite there, the second loop doesnt work:</p>
  
  <pre><code>  this.backgroundAnimation.stop();
    this.interpolations.background = this.state.colorValue.interpolate({
      inputRange: [0, 100],
      outputRange: [JSON.stringify(this.interpolations.background), "#ffd338"]
    });
  
    Animated.timing(this.state.colorValue, {
      toValue: 100,
      duration: 3000
    }).start(() =&gt; {
      console.log("Done");
      this.setState({
        ...this.state,
        colorValue : new Animated.Value(0) //just spit-balling, idk
      });
      this.interpolations.background = this.state.colorValue.interpolate({
        inputRange: [0, 50, 100],
        outputRange: ["#ffd338", "#fff39b", "#ffd338"]
      });
      console.log(this.interpolations.background);
  
  
      this.backgroundAnimation = Animated.loop(
        Animated.timing(this.state.colorValue, {
          toValue: 100,
          duration: 3000
        })
      );
      this.backgroundAnimation.start();
    });
  </code></pre>