React Native Animated, Complete Event

Question

What's the best practice to trigger an event when Animated.spring finishes?

Animated.spring(this.state.pan, {
    toValue: 0
}).start()

I've searched quite a bit and haven't found a single way to do it. I could use addListener to check if the animation has reached it's end value or a timeout, but they both feel like ugly fixes to what should be super simple.

Does anyone know?

Answer 1

Half an hour of googling later and i found this, can't believe they didn't document this better.

https://github.com/facebook/react-native/issues/3212

.start(callback)

Answer 2

This will get fired at the start of the animation

.start(console.log("Start Animation")

Using an arrow function or function, done will get called at the END of the animation

.start(() => {console.log("Animation DONE")})

And finaly this is what it looks like in the context to of a function.

_play(){
  Animated.timing(this.state.progress, {
     toValue: 1,
     duration: 5000,
     easing: Easing.linear,
   }).start(() => {console.log("Animation DONE")});
}

Hope that helps!