Use Animated.loop(), when possible, to limit JS thread utilization

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);
         }
       });