Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: oblador/react-native-animatable
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: svhawks/react-native-animatable
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
  • 1 commit
  • 2 files changed
  • 1 contributor

Commits on May 4, 2021

  1. Copy the full SHA
    0c3ad9a View commit details
Showing with 16 additions and 10 deletions.
  1. +1 −0 README.md
  2. +15 −10 createAnimatableComponent.js
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -68,6 +68,7 @@ You can create your own simple transitions of a style property of your own choos
|**`onTransitionBegin`**|A function that is called when the transition of a style has been started. The function is called with a `property` argument to differentiate between styles. |*None*|
|**`onTransitionEnd`**|A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a `property` argument to differentiate between styles. |*None*|
|**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. |`false`|
|**`noAnimateOnMount`**|Whether to not animate the component when it mounts. Component will be animated only when it receives new props. |`false`|

### Imperative Usage

25 changes: 15 additions & 10 deletions createAnimatableComponent.js
Original file line number Diff line number Diff line change
@@ -306,19 +306,24 @@ export default function createAnimatableComponent(WrappedComponent) {
delay,
onAnimationBegin,
iterationDelay,
noAnimateOnMount,
} = this.props;
if (animation) {
const startAnimation = () => {
onAnimationBegin();
this.startAnimation(duration, 0, iterationDelay, endState =>
this.props.onAnimationEnd(endState),
);
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, iterationDelay, endState =>
this.props.onAnimationEnd(endState),
);
this.delayTimer = null;
};
if (delay) {
this.delayTimer = setTimeout(startAnimation, delay);
} else {
startAnimation();
}
}
}
}