Animated.spring in functional components doesn't work with onPress?

Question

I am going to create an animation which would run by click on a button, I did this via Animated.timing smoothly and without any problem but when i try to run animation via Animated.spring it just runs for one time and next clicks don't work How can i fix this? Does Animated.spring works smoothly in functional components? This is my code

const BoxShape = () => {
  const jumpValue = new Animated.Value(0);
  const ActiveAnim = () => {
    Animated.spring(jumpValue, {
      toValue: 1,
      friction: 1,
    }).start();
  }

  return (
    <View>
      <Animated.Image
        style={{ transform: [{ scale: jumpValue }], width: 120, height: 120, marginBottom: 30 }}
        source={require('.././images/ball.png')}
      >
      </Animated.Image>
      <Button
        title='Active Ball'
        onPress={ActiveAnim}
      />
    </View>
  )
}

Answer 1

It's the normal behavior, since you update the value to 1 for the first run but never reset it to 0, in order for the animation to run again.

I suggest that you reset the value to 0 after each run, by adding to your code the snippet bellow :p :

const ActiveAnim = () => {
    Animated.spring(jumpValue, {
      toValue: 1,
      friction: 1,
    }).start(() => jumpValue.setValue(0));
  };

start() accept a function as argument that will call after the animation end, https://facebook.github.io/react-native/docs/animated#configuring-animations