title: Update color of animated view after animation
body: <p>I am creating a react native application and want to change the background color of an animated View after the user touches it. For more context, the view is in the shape of a square and I am rotating it 225 degrees when the component mounts. If the user touches the square, it will animate a flipping motion and show the other side of the square, which is a different color. The code I am using to do this can be seen below:</p>
  <pre><code>const app = (props) =&gt; {
     let colors = [color1, color2, color3, ...];
     let index = 0;
     let animatedValue= new Animated.Value(0);
     let squareSpin = new Animated.Value(0);
     let val = 0;
  
    useEffect(() =&gt; {
      Animated.timing(squareSpin, {
        toValue: 1,
        duration: 3000,
        easing: Easing.linear,
      }).start();
    }, []);
  
    const startSpin = squareSpin.interpolate({
      inputRange: [0, 1],
      outputRange: [&quot;0deg&quot;, &quot;225deg&quot;],
    });
  
    animatedValue.addListener(({ value }) =&gt; {
      val = value;
    });
  
    let frontInt= animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: [&quot;0deg&quot;, &quot;180deg&quot;],
    });
  
    let backInt = animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: [&quot;180deg&quot;, &quot;360deg&quot;],
    });
  
    let opacityFront = animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [1, 0],
    });
  
  
    let opacityBack = animatedValue.interpolate({
      inputRange: [89, 90],
      outputRange: [0, 1],
    });
  
    const flip= () =&gt; {
      if (val&gt;= 90) {
        Animated.spring(animatedValue, {
          toValue: 0,
          friction: 6,
          tension: 8,
        }).start();
      } else {
        Animated.spring(animatedValue, {
          toValue: 180,
          friction: 6,
          tension: 8,
        }).start();
      }
    };
  
    const frontAnimated = {
      transform: [{ rotateY: frontInt }],
    };
    const backAnimated = {
      transform: [{ rotateY: backInt}],
    };
  
    return (
       &lt;Animated.View
          style={{transform: [{ rotate: startSpin }] }}
        &gt;
           &lt;TouchableWithoutFeedback
                onPress={() =&gt; {
                  index++;
                  flip();
                }}&gt;
              &lt;Animated.View
                  style={[
                    styles.shape,
                    {
                      backgroundColor:
                        colors[index % colors.length],
                    },
                    frontAnimated ,
                    { opacity: opacityFront },
                  ]}
                &gt;
                &lt;/Animated.View&gt;
                &lt;Animated.View
                  style={[
                    styles.shape,
                    {
                      backgroundColor:
                        colors[(index + 1) % colors.length],
                    },
                    { position: &quot;absolute&quot; },
                    backAnimated ,
                    { opacity: opacityBack },
                  ]}
                &gt;&lt;/Animated.View&gt;
            &lt;/TouchableWithoutFeedback&gt;
       &lt;Animated.View&gt;
    )
  
  }
  
  </code></pre>
  <p><strong>The Problem</strong>: The animations all work great, but the issue is that each side of the square I am flipping can only take on one color. Notice how in the <code>colors</code> array, there are multiple colors that the square should be based on the number of times the user presses the square. However, this is not happening and each side of the square is always the color is started out to be (color1 for the top side of the square and color2 for the bottom side of the square). I think this is happening because the <code>view</code> does not realize that the index is changing because it is never rendered again. Or maybe it simply cannot chance its color due to some properties of <code>Animated.View</code>, I am not really sure. I tried forcing a render when the square is pressed using <code>useState</code> but that resulted in the square to undo its rotation that happened when the component was mounted, which I do not want to happen. How do I get the background color of the views to change based on the number of taps by the user?</p>
  <p>Thanks!</p>