From 60828566a759dc579dbae1d76a8426e1e479166e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Dar=C3=ADo?= Date: Tue, 21 Nov 2017 10:57:01 -0800 Subject: [PATCH] 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 --- docs/animated.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/animated.md b/docs/animated.md index 261c2fc4b..21d012941 100644 --- a/docs/animated.md +++ b/docs/animated.md @@ -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.