title: React-native animation: Trying to combine multiple animations; getting error
body: <p>I am trying to do an animation where I start with a colored square in the top left corner. Clicking it should move the square to the center of the screen while scaling it to twice its size. Then it should flip over and show a back side. When I try to load the app on the emulator I get this error:</p>
  
  <p><a href="https://i.stack.imgur.com/XUjcZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XUjcZ.jpg" alt="enter image description here"></a></p>
  
  <p>This is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import
      {
          StyleSheet,
          View,
          Text,
          Animated,
          Dimensions,
          TouchableWithoutFeedback
      }
  from 'react-native';
  
  export default class App extends Component {
      state = {
          animation: new Animated.ValueXY(),
          scaleAnimation: new Animated.Value(1),
          rotateAnimation: new Animated.Value(0)
      };
  
      startAnimation = () =&gt; {
          const {width, height} = Dimensions.get("window");
          Animated.parallel([
              Animated.timing(this.state.animation.y, {
                  toValue: (height / 2) - (this._height / 2),
                  duration: 500,
                  useNativeDriver: true
              }),
              Animated.timing(this.state.animation.x, {
                  toValue: (width / 2) - (this._width / 2),
                  duration: 500,
                  useNativeDriver: true
              }),
              Animated.timing(this.state.scaleAnimation, {
                  toValue: 2,
                  duration: 500,
                  useNativeDriver: true
              })
          ]).start(() =&gt; {
              Animated.timing(this.state.rotateAnimation, {
                  toValue: 180,
                  duration: 500,
                  useNativeDriver: true
              }).start();
          })
      }
  
      saveDimensions = (e) =&gt; {
          this._width = e.nativeEvent.layout.width;
          this._height = e.nativeEvent.layout.height;
      }
  
      render() {
          const animatedStyles = {
              transform: [
                  {
                      translateX: this.state.animation.x
                  },
                  {
                      translateY: this.state.animation.y
                  },
                  {
                      scale: this.state.scaleAnimation
                  }
              ]
          }
  
          const frontInterpolate = this.state.rotateAnimation.interpolate({
              inputRange: [0, 180],
              outputRange: ['0deg', '180deg']
          })
  
          const backInterpolate = this.state.rotateAnimation.interpolate({
              inputRange: [0, 180],
              outputRange: ['180deg', '360deg']
          })
  
          const frontAnimatedStyle = {
              transform: [
                  {
                      rotateY: this.frontInterpolate
                  }
              ]
          }
  
          const backAnimatedStyle = {
              transform: [
                  {
                      rotateY: this.backInterpolate
                  }
              ]
          }
  
          return (
              &lt;View style={styles.container}&gt;
                  &lt;TouchableWithoutFeedback
                      onPress={() =&gt; this.startAnimation()}
                      onLayout={() =&gt; this.saveDimensions()}
                  &gt;
                      &lt;View&gt;
                          &lt;Animated.View
                              style={[styles.box, animatedStyles, frontAnimatedStyle]}
                          &gt;
                              &lt;Text&gt;Front&lt;/Text&gt;
                          &lt;/Animated.View&gt;
                          &lt;Animated.View
                              style={[backAnimatedStyle, styles.box, styles.boxBack]}
                          &gt;
                              &lt;Text&gt;Back&lt;/Text&gt;
                          &lt;/Animated.View&gt;
                      &lt;/View&gt;
                  &lt;/TouchableWithoutFeedback&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          //alignItems: 'center',
          //justifyContent: 'center',
      },
      box: {
          width: 150,
          height: 150,
          backgroundColor: 'tomato',
          position: 'absolute',
          top: 0,
          left: 0,
      },
      boxBack: {
          backgroundColor: 'green',
      },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't even know if the animation will work since it won't even load without getting this error.</p>