title: Having a rendering issue with React-Native Animation
body: <p>I am having trouble with an animation.I attempting to flip the card with two different views. I am also trying to create a scrolling effect when the user scrolls between two different cards. When the code is combined in the manner down below, it creating a bug that I cannot squash. I included an image to give a visual representation of my issue.</p>
  
  <p>I appreciate any help.</p>
  
  <p>:</p>
  
  <p>My Life Cycle method:</p>
  
  <pre><code>componentWillMount() {
      this.animatedValue = new Animated.Value(0);
      this.value = 0;
      this.animatedValue.addListener(({ value }) =&gt; {
        this.value = value;
        this.setState({ value });
      });
      this.frontInterpolate = this.animatedValue.interpolate({
        inputRange: [0, 180],
        outputRange: ['0deg', '180deg']
      });
      this.backInterpolate = this.animatedValue.interpolate({
        inputRange: [0, 180],
        outputRange: ['180deg', '360deg']
      });
    }
  }
  </code></pre>
  
  <p>This animation that is used to produce the flip animation:</p>
  
  <pre><code>  flipCard() { 
      if (this.value &gt;= 90) {
        this.setState({
          isWaiting: true
        });
        Animated.spring(this.animatedValue, {
          toValue: 0,
          friction: 8,
          tension: 10
        }).start(() =&gt; {
          this.setState({
            isWaiting: false
          });
        });
      } else {
        this.setState({
          isWaiting: true
        });
        Animated.spring(this.animatedValue, {
          toValue: 180,
          friction: 8,
          tension: 10
        }).start(() =&gt; {
          this.setState({ isWaiting: false });
        });
      }
    }
  </code></pre>
  
  <p>This is View that is being flipped via the flipCard function. If you see in one of the views, there is a function called transitionAnimation. That is used to produce the scrolling effect.</p>
  
  <pre><code> &lt;View style={styles.scrollPage}&gt;
          &lt;View&gt;
            &lt;Animated.View
                style={[
                   frontAnimatedStyle,
                     styles.screen,
                      this.transitionAnimation(index)
                       ]}
                     &gt;
                     &lt;Text style={styles.text}&gt;{question.question}&lt;/Text&gt;
           &lt;/Animated.View&gt;
               &lt;Animated.View
                 style={[
                    styles.screen,
                    backAnimatedStyle,
                      styles.back,
                       this.transitionAnimation(index)
                      ]}
                      &gt;
                      &lt;Text style={styles.text}&gt;{question.answer}&lt;/Text&gt;
                   &lt;/Animated.View&gt;
  </code></pre>
  
  <p>The transitionAnimation:</p>
  
  <pre><code>transitionAnimation = index =&gt; {
      if (!this.state.isWaiting) {
        return {
          transform: [
            { perspective: 800 },
            {
              scale: xOffset.interpolate({
                inputRange: [
                  (index - 1) * SCREEN_WIDTH,
                  index * SCREEN_WIDTH,
                  (index + 1) * SCREEN_WIDTH
                ],
                outputRange: [0.25, 1, 0.25]
              })
            },
            {
              rotateX: xOffset.interpolate({
                inputRange: [
                  (index - 1) * SCREEN_WIDTH,
                  index * SCREEN_WIDTH,
                  (index + 1) * SCREEN_WIDTH
                ],
                outputRange: ['45deg', '0deg', '45deg']
              })
            },
            {
              rotateY: xOffset.interpolate({
                inputRange: [
                  (index - 1) * SCREEN_WIDTH,
                  index * SCREEN_WIDTH,
                  (index + 1) * SCREEN_WIDTH
                ],
                outputRange: ['-45deg', '0deg', '45deg']
              })
            }
          ]
        };
      }
    };
  </code></pre>
  
  <p>My render function:</p>
  
  <pre><code>render() {
      const { flashcards } = this.state;
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;View
            style={{
              alignItems: 'flex-end',
              marginTop: 10
            }}
          &gt;
            &lt;Progress.Circle
              size={70}
              showsText
              progress={this.state.timer}
              formatText={text =&gt; {
                return (this.state.timer * 100).toFixed(0);
              }}
            /&gt;
          &lt;/View&gt;
          &lt;Animated.ScrollView
            scrollEventThrottle={16}
            onScroll={Animated.event(
              [{ nativeEvent: { contentOffset: { x: xOffset } } }],
              { useNativeDriver: true }
            )}
            horizontal
            pagingEnabled
            style={styles.scrollView}
          &gt;
            {this.state.flashcards &amp;&amp; this.renderCard()}
          &lt;/Animated.ScrollView&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/rtQ1E.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/rtQ1E.gif" alt="Animation not working properly"></a></p>
  
  <p>I also created a snack bar where you can look at the problem.
  <a href="https://snack.expo.io/@louis345/flaschards" rel="noreferrer">https://snack.expo.io/@louis345/flaschards</a></p>