status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add a sample to clarify animation callback 

Summary:
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:
https://stackoverflow.com/questions/38053071/react-native-animated-complete-event
https://github.com/facebook/react-native/issues/3212

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

 [DOCS] [ENHANCEMENT] [AnimatedImplementation.js] - Adds a sample for animation callbacks
Closes https://github.com/facebook/react-native/pull/16770

Differential Revision: D6304441

Pulled By: hramos

fbshipit-source-id: c22e391aece6a62684a78847fc74df203c2438d7
This commit is contained in:
Jesús Darío 2017-11-21 10:57:01 -08:00 committed by Facebook Github Bot
parent 1e18d907bf
commit 60828566a7
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/animated.md
View File

@ -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}`.
```javascript
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.