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>
  )
}

If you want to reanimate you have to reset value. – Kishan Bharda Dec 28 '19 at 07:41 — Kishan Bharda, Dec 28 '19 at 07:41

score 3 · Accepted Answer · answered Dec 28 '19 at 08:42

3

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

answered Dec 28 '19 at 08:42

Drea Zener

323
1
2
7

useState ? what do you mean – Drea Zener Jan 01 '20 at 18:24
1

I am sorry, It was just a misunderstanding, I did test your solution and It worked, Your comment was really really helpful to me, I truly appreciate it – roz333 Jan 02 '20 at 00:10

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

1 Answers1