Add "noAnimateOnMount" prop

README.md

@@ -63,6 +63,7 @@ You can create your own simple transitions of a style property of your own choos
 |**`onAnimationBegin`**|A function that is called when the animation has been started. |*None*|
 |**`onAnimationEnd`**|A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. |*None*|
 |**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling and requires you to integrate that module on iOS.  |`false`|
+|**`noAnimateOnMount`**|Whether to not animate the component when it mounts. Component will be animated only when it receives new props.  |`false`|
 
 ### Imperative Usage
 

createAnimatableComponent.js

@@ -291,17 +291,22 @@ export default function createAnimatableComponent(WrappedComponent) {
         delay,
         onAnimationBegin,
         onAnimationEnd,
+        noAnimateOnMount,
       } = this.props;
       if (animation) {
-        const startAnimation = () => {
-          onAnimationBegin();
-          this.startAnimation(duration, 0, onAnimationEnd);
-          this.delayTimer = null;
-        };
-        if (delay) {
-          this.delayTimer = setTimeout(startAnimation, delay);
+        if (noAnimateOnMount) {
+          this.startAnimation(0, 0);
         } else {
-          startAnimation();
+          const startAnimation = () => {
+            onAnimationBegin();
+            this.startAnimation(duration, 0, onAnimationEnd);
+            this.delayTimer = null;
+          };
+          if (delay) {
+            this.delayTimer = setTimeout(startAnimation, delay);
+          } else {
+            startAnimation();
+          }
         }
       }
     }
@@ -390,11 +395,18 @@ export default function createAnimatableComponent(WrappedComponent) {
         easing = Easing.out(easing);
       }
 
+      let effectiveDuration = 1000;
+      if (typeof duration === 'number') {
+        effectiveDuration = duration;
+      } else if (typeof this.props.duration === 'number') {
+        effectiveDuration = this.props.duration;
+      }
+
       Animated.timing(animationValue, {
         toValue,
         easing,
         isInteraction: iterationCount <= 1,
-        duration: duration || this.props.duration || 1000,
+        duration: effectiveDuration,
         useNativeDriver,
       }).start(endState => {
         currentIteration += 1;