Browse files

Add a sample to clarify animation callback

Even having worked long with React Native, I am pretty new to animations, so it took me a while to figure out how to trigger some code after an animation had finished. After some investigation, it
was evident I did not ready as in depth as I am supposed to, but this can be a problem for many
who, like me, try to search quick through docs and other resources.

Here more cases:

Read the proposed sample, and see if it is adequate.

 [DOCS] [ENHANCEMENT] [AnimatedImplementation.js] - Adds a sample for animation callbacks
Closes #16770

Differential Revision: D6304441

Pulled By: hramos

fbshipit-source-id: c22e391aece6a62684a78847fc74df203c2438d7
  • Loading branch information...
jsdario authored and facebook-github-bot committed Nov 21, 2017
1 parent 1e18d90 commit 60828566a759dc579dbae1d76a8426e1e479166e
Showing with 10 additions and 0 deletions.
  1. +10 −0 docs/
@@ -46,6 +46,16 @@ In most cases, you will be using `timing()`. By default, it uses a symmetric eas
Animations are started by calling `start()` on your animation. `start()` takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with `{finished: true}`. If the animation is done because `stop()` was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive `{finished: false}`.
this.animateValue.spring({}).start(({finished}) => {
if (finished) {
console.log('Animation was completed')
} else {
console.log('Animation was aborted')
### Using the native driver
By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.

0 comments on commit 6082856

Please sign in to comment.