Calling function after Animate.spring has finished

Question

i am using an animation in order for a pop-up to come in from the right side. I'm using the following code for this -

  var toValue = 200;

  if(this.state.fileMenu){
    toValue = 0;
  }

  Animated.spring(
    this.state.bounceValue,
    {
      toValue: toValue,
      velocity: 3,
      tension: 2,
      friction: 5,
    }
  ).start();
  //I want to call a function here after the animation is finished.

  this.setState({fileMenu: !this.state.fileMenu});

The code works perfectly, and it looks great, however, I am now wanting to call a function only when the animation has completely finished, and strictly only once. Just wondering how i can do this? Not sure if this is a really simple question.

Answer 1

start takes a callback function, the function is executed once after the animation finishes:

 Animated.spring(
    this.state.bounceValue,
    {
      toValue: toValue,
      velocity: 3,
      tension: 2,
      friction: 5,
    }
  ).start(() => doSmething());