diff --git a/README.md b/README.md index a4da901..2060f6a 100644 --- a/README.md +++ b/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 diff --git a/createAnimatableComponent.js b/createAnimatableComponent.js index c3b98fe..1280349 100644 --- a/createAnimatableComponent.js +++ b/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;