From 34e3cb71ae6e8e0fc6f6515e58d9197fab2224d8 Mon Sep 17 00:00:00 2001
From: James Reggio <james.reggio@gmail.com>
Date: Fri, 6 Jul 2018 16:22:15 -0400
Subject: [PATCH] Use Animated.loop(), when possible, to limit JS thread
 utilization

---
 createAnimatableComponent.js | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/createAnimatableComponent.js b/createAnimatableComponent.js
index 511de99..373e0c1 100644
--- a/createAnimatableComponent.js
+++ b/createAnimatableComponent.js
@@ -387,7 +387,7 @@ export default function createAnimatableComponent(WrappedComponent) {
       const { animationValue, compiledAnimation } = this.state;
       const { direction, iterationCount, useNativeDriver } = this.props;
       let easing = this.props.easing || compiledAnimation.easing || 'ease';
-      let currentIteration = iteration || 0;
+      const currentIteration = iteration || 0;
       const fromValue = getAnimationOrigin(currentIteration, direction);
       const toValue = getAnimationTarget(currentIteration, direction);
       animationValue.setValue(fromValue);
@@ -411,21 +411,12 @@ export default function createAnimatableComponent(WrappedComponent) {
         useNativeDriver,
         delay: iterationDelay || 0,
       };
+      const iterations = iterationCount === 'infinite' ? -1 : iterationCount;
 
-      Animated.timing(animationValue, config).start(endState => {
-        currentIteration += 1;
-        if (
-          endState.finished &&
-          this.props.animation &&
-          (iterationCount === 'infinite' || currentIteration < iterationCount)
-        ) {
-          this.startAnimation(
-            duration,
-            currentIteration,
-            iterationDelay,
-            callback,
-          );
-        } else if (callback) {
+      Animated.loop(Animated.timing(animationValue, config), {
+        iterations,
+      }).start(endState => {
+        if (callback) {
           callback(endState);
         }
       });