title: React Native Animations, Loop animation without resetting animated value after iteration
body: <h2>React-Native Animated: How to loop an animation without resetting the animation value after each loop.</h2>
  <p>I was struggling to figure out a method of looping React Native Animations without resetting the animated value back to its initial value.</p>
  <p>For example I made a simple &quot;Sway&quot; animation that would move my component left and right</p>
  <pre><code>  let animationX = new Animated.Value(0);
  
    const left = (toValue) =&gt; Animated.timing(animationX, {toValue: -toValue, duration: 1500})
    const right = (toValue) =&gt; Animated.timing(animationX, {toValue, duration: 1500})
  
    const startSwayAnimation = () =&gt; {
      Animated.loop(
        Animated.sequence([
          left(100),
          right(100),
        ])
      ).start()
    }
  </code></pre>
  <p>The problem was that my animationX variable resets back to 0 after every loop.
  I couldn't find any useful resources on how to loop an animation without resetting the value, though there are two dead issues on github:</p>
  <p><a href="https://github.com/facebook/react-native/issues/18028" rel="nofollow noreferrer">https://github.com/facebook/react-native/issues/18028</a>
  <a href="https://github.com/facebook/react-native/issues/20560" rel="nofollow noreferrer">https://github.com/facebook/react-native/issues/20560</a></p>
  <p>I was nearly at the point of considering asking on SO, but then I tried creating a recursive function to loop the animation instead and it worked great</p>
  <p>In case anyone else is struggling with this, or knows a better solution (perhaps some config for Animated.loop that I am unaware of) I decided to share this on SO.</p>