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

oblador · Jul 6, 2018 · 170d7ba · 170d7ba
1 parent d9cbb61
commit 170d7ba
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/createAnimatableComponent.js b/createAnimatableComponent.js
@@ -412,9 +412,21 @@ export default function createAnimatableComponent(WrappedComponent) {
         delay: iterationDelay || 0,
       };
 
-      Animated.timing(animationValue, config).start(endState => {
+      let animation = Animated.timing(animationValue, config);
+      const canLoop =
+        !iterationDelay &&
+        (iterationCount === 'infinite' || iterationCount > 1);
+      if (canLoop) {
+        const loopConfig =
+          iterationCount !== 'infinite' ? { iterations: iterationCount } : {};
+
+        animation = Animated.loop(animation, loopConfig);
+      }
+
+      animation.start(endState => {
         currentIteration += 1;
         if (
+          !canLoop &&
           endState.finished &&
           this.props.animation &&
           (iterationCount === 'infinite' || currentIteration < iterationCount)